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();

你可能感兴趣的:(DOM启蒙——第四章)