html5 dom api,列出DOM 元素选取的 API

我们先来了解一下DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档(结构树)提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。

要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过DOM来获得的。

document对象

每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。

Element

除了document对象，在DOM中最常用的就是Element对象了，Element对象表示HTML元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点，DOM提供了一系列的方法可以进行元素的增、删、改、查操作

Element有几个重要属性

1、nodeName：元素标签名，还有个类似的tagName

2、nodeType：元素类型

3、className：类名

4、id：元素id

5、children：子元素列表(HTMLCollection)

6、childNodes：子元素列表(NodeList)

7、firstChild：第一个子元素

8、lastChild：最后一个子元素

9、nextSibling：下一个兄弟元素

10、previousSibling：上一个兄弟元素

11、parentNode、parentElement：父元素

查询元素

1、通过id来获取元素，getElementById()

getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法

var elem = document.getElementById("test");

2、通过class来获取元素，getElementsByClassName()

getElementsByClassName方法返回一个类似数组的对象(HTMLCollection类型的对象)，包括了所有class名字符合指定条件的元素(搜索范围包括本身)，元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

var elements = document.getElementsByClassName('tab');

getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。

document.getElementsByClassName('red test');

3、通过标签获取元素，getElementsByTagName()

getElementsByTagName方法返回所有指定标签的元素(搜索范围包括本身)。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

var paras = document.getElementsByTagName("p");

4、通过name获取元素，getElementsByName()

getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

// 假定有一个表单是

var forms = document.getElementsByName("x");

forms[0].tagName // "FORM"

5、终极大招 querySelector()和querySelectorAll()

querySelector()

querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

var el1 = document.querySelector(".myclass");

var el2 = document.querySelector('#myParent > [ng-click]');

querySelectorAll()

querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。

var matches = document.querySelectorAll("div.note, div.alert");