DOM

元素里面的所有元素。 ``` var p = document.getElementsByTagName('p')[0]; var span = p.getElementsByTagName('span'); ``` **1.2.4 用指定CSS类选取元素** HTML元素的`class`属性值是一个以空格隔开的列表，可以为空或包含多个标识符。 在HTML文档和HTML元素上，我们可以调用`getElementsByClassName()`来选择指定CSS类的元素，它返回一个实时的NodeList对象，包含文档或元素所有匹配的后代节点。 `getElementsByClassName()`只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成，只有当元素的class属性值包含所有指定的标识符时才匹配。 在`Element`类中也同样定义了`getElementsByClassName()`方法，其原理和Document版本是一样的，不过它只选取调用该方法的元素的后代元素。 **1.2.5 通过CSS选择器选取元素** `Document`对象的方法`querySelectorAll()`，它接受一个CSS选择器的字符串参数，返回一个代表文档中匹配选择器的所有元素的NodeList对象，并不是实时的。如果没有匹配的元素，则返回一个空的NodeList对象。 ``` document.querySelectorAll('.div') //匹配所有class名为div的元素 ``` 还有一个`querySelector()`方法，其原理和`querySelectorAll()`是一样的，不过它返回第一个匹配的元素（以文档顺序），如果没有匹配的元素就返回null。 它们支持复杂的CSS选择器。 ``` // 选中data-tip属性等于title的元素 document.querySelectorAll('[data-tip="title"]'); // 选中div元素，那些class含ignore的除外 document.querySelectorAll('div:not(.ignore)'); ``` 但是，它们不支持CSS伪元素的选择器（比如:first-line和:first-letter）和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。 这两个方法在`Element`节点上也有定义。 **1.2.6 document.all[ ]** document.all[ ]也可用来选择元素，不过已经废弃了。 ``` document.all[0] //文档中第一个元素 document.all['navbar'] // id或name为“navbar”的元素 ``` **1.3 文档结构和遍历** **1.3.3 作为节点树的文档** `Document`对象、它的`Element对象`和文档中表示文本的Text对象都是Node对象。 Node属性： **（1）parentNode** 该节点的父节点，或者针对类似Document对象应该是null，因为它没有父节点。 **（2）childNodes** 返回只读的类数组对象（NodeList对象），它是该节点的子节点的实时表。 注意：该属性还包括文本节点和评论节点。 **（3）firstChild、lastChild** 该节点的子节点中的第一个和最后一个，如果该节点没有子节点则为null 注意：这两个属性返回的除了HTML元素子节点，还可能是文本节点或评论节点。 **（4）nextSibling、previousSibling** 该节点的兄弟节点中的前一个和下一个。具有相同父节点的两个节点称为兄弟节点。节点的顺序反映了它们在文档中出现的顺序。这两个属性将节点之间以双向链表形式连接起来。 注意：这两个属性返回的除了HTML元素子节点，还可能是文本节点或评论节点。 **（5）textContent** 返回该节点和它的所有后代节点的文本内容。 ```