DOM 是什么
文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。 DOM 提供了一种表述形式— 将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将 web 页面和脚本或编程语言连接起来了。
DOM API 获取元素的 N 种方法
1.document.getElementById()
getElementById方法返回匹配指定id属性的元素节点。
语法
element = document.getElementById(id);
参数
- element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
- id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
document.getElementById("test"); // 获取id为test的元素
2.document.getElementsByClassName()
document.getElementsByClassName方法返回一个类似数组的对象，包含了所有指定 class 名称的子元素。当调用发生在document对象上时, 整个DOM都会被搜索, 包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定class名称的子元素。
语法
var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
- elements 是查找到的所有元素的集合 HTMLCollection .
- names 是一个字符串，表示用于匹配的 class 名称列表; class 名称通过空格分隔
- getElementsByClassName 可以在任意的元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素.
document.getElementsByClassName('test'); // 获取所有 class 为 'test' 的元素
3.document.getElementsByName()
document.getElementsByName方法用于选择拥有name属性的HTML元素（比如form、radio、img、frame、embed和object等），返回一个类似数组的的对象（NodeList对象的实例），因为name属性相同的元素可能不止一个。
语法
elements = document.getElementsByName(name)
- elements 是一个 NodeList 集合。
- name 是元素的 name 属性的值。
<form name="up"><input type="text"></form>
<script>
var up_forms = document.getElementsByName("up");
console.log(up_forms[0].tagName); // returns "FORM"
</script>
4.document.getElementsByTagName()
document.getElementsByTagName方法返回所有指定HTML标签的元素，返回值是一个类似数组的HTMLCollection对象，可以实时反映HTML文档的变化。如果没有任何匹配的元素，就返回一个空集。
语法
var elements = document.getElementsByTagName(name);
- elements 是一个由发现的元素出现在树中的顺序构成的动态的HTML集合（HTMLCollection） 。
- name 是一个代表元素的名称的字符串。特殊字符 "*" 代表了所有元素。
var div = document.getElementsByTagName("div")[0]; //获取HTML中第一个div元素
5.document.querySelector()
document.querySelector方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
语法
element = document.querySelector(selectors);
-
element 是一个 element 对象（DOM 元素）。
-
selectors 是一个字符串，包含一个或是多个 CSS 选择器 ，多个则以逗号分隔。
var el = document.querySelector(".myclass");
// 返回当前文档中第一个类名为 "myclass" 的元素
6.document.querySelectorAll()
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
语法
elementList = document.querySelectorAll(selectors);
- elementList 是一个non-live的 NodeList 类型的对象.
- selectors 是一个由逗号连接的包含一个或多个CSS选择器的字符串.
var test = document.querySelectorAll("div.test")
// 返回文档中所有的class为"test"的div元素
7.document.elementFromPoint()
document.elementFromPoint方法返回位于页面指定位置最上层的Element子节点。
语法
var element = document.elementFromPoint(x, y);
- element 是返回的DOM元素.
- x 和 y 是坐标数值, 不需要单位比如px.
var element = document.elementFromPoint(50, 50);
// 选中在(50, 50)这个坐标位置的最上层的那个HTML元素
elementFromPoint方法的两个参数，依次是相对于当前视口左上角的横坐标和纵坐标，单位是像素。如果位于该位置的HTML元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值或超过视口大小），则返回null。
网友评论