DOM启蒙——第四章

1.选取特定元素节点

取得一个元素节点引用的最常用的方式为

●querySelector()

●getElementById()

querySelector()返回文档中符合传入选择器的首个元素节点，即若有多个节点满足条件，则返回第一个。

document.createTextNode(document.querySelector("li").textContent)

document.createTextNode(document.getElementById("last").textContent)

2.选取/创建一个元素节点列表(NodeList)常见方法为

●querySelectorAll();

●getElementsByTagName()

●getElementsByClassName()

①getElementsByTagName()和getElementsByClassName()创建的NodeList实例是实时的，会即时反应文档的当前状态。

②而querySelector()返回的列表是该列表创建时文档的快照，是静态的，不反映文档之后的改动。

③querySelectorAll()或者getElementsByTagName()方法传入字符串* ，返回一个由文档中所有节点组成的列表。

3.选取所有直属子元素节点。

使用元素节点的children属性可以取得一个HTMLCollection列表，它由所有直属子节点中元素节点组成。

console.log(document.querySelector("ul").children);

children只返回直属的元素节点，不是元素的节点会被剔除。

4.选取与上下文有关的元素。

getElementsByTagName()和getElementsByClassName()以及querySelector()、querySelectorAll()一般通过document访问，但是也可以在元素节点上使用。如

document.querySelector("div")

div.querySelector("ul");

div.getElementsByClassName("test")

这些方法不仅在实时DOM中可以使用，动态创建的DOM元素中也可以。

5.预定义的节点列表

document.all为文档中所有元素。
document.forms为文档中所有<form>元素
document.images为文档中所有<img>元素
document.links为文档中所有<a>元素
document.scripts为文档中所有script元素
document.styleSheets为文档中所有<link>或<style>元素

其中document.styleSheets构建自StyleSheetsList,其他均构建自HTMLCollection

document.all构建自HTMLALLCollection

6.使用matchesSelector()验证元素是否会被选取

使用matchesSelector()可以判断一个元素是否匹配某个选择器字符串，若匹配则返回true

(document.createTextNode(document.querySelector("li").webkitMatchesSelector("li:first-child")))//true

需要加前缀。

以后matchesSelector()将被改名为matches()；