DOM-选取元素节点
内容列表
DOM 操作都是通过对文档树中节点的访问来实现的，如何选取特定的元素节点是关键，进而才能访问该元素节点实现修改、查看、移除、替换等操作。
选取特定单一元素节点
取得某一特定单一元素节点的引用最常用的方式如下：
- querySelector()
- getElementById()
exp：
<body>
<ul id="animal">
<li id="Dog">Dog</li>
<li id="Cat">Cat</li>
<li id="Pig">Pig</li>
</ul>
</body>
<script>
// querySecletor()方法可通过多种途径获取第一个<li>
console.log(document.querySelector("li"));
console.log(document.querySelector("ul>li"));
console.log(document.querySelector("#Dog"));
console.log(document.querySelector("#animal>#Dog"));
// getElementById()通过ID属性获取
console.log(document.getElementById("Dog"));
</script>
getElementById() 方法仅能通过节点的 id 属性获取目标节点的引用；而 querySelector() 方法更强大，它可以接受一个 CSS 选择器语法格式（例如 ul > li）的参数，而且它只会返回第一个符合条件的节点的引用。
选取特定元素节点集合
取得某一特定元素节点集合最常用的方式如下：
- querySelectorAll()
- getElementsByTagName()
- getElementsByClassName()
- getElementsByName()
exp：
<body>
<ul id="animals">
<li class="animal">Dog</li>
<li class="animal">Cat</li>
<li class="animal">Pig</li>
</ul>
</body>
<script>
// querySecletorAll()方法可通过多种途径获取第三个<li>集合
console.log(document.querySelectorAll("li"));
console.log(document.querySelectorAll("ul>li"));
console.log(document.querySelectorAll("#animals>.animal"));
// getElementsByTagName()通过标签名称获取
console.log(document.getElementsByTagName("li"));
// getElementsByClassName()通过class属性获取
console.log(document.getElementsByClassName("animal"));
</script>
同样地，querySelectorAll() 方法更强大一些，它可以接受一个 CSS 选择器语法格式（例如 ul > li）的参数。getElementsByName() 方法可以通过节点的 name 属性获取特定节点集合的引用，但是它并不常用。
querySelectorAll() 方法获取的节点集合是静态的，也就是说是非实时的，它只是创建该节点集合时文档的快照；而其他的方法获取的节点集合都是实时的，会及时反映文档的当前状态。
选取所有的直属子元素节点
使用元素节点上的 children 属性，我们可以获取该元素节点的所有直属（第一代）子元素节点。
<body>
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Pig</li>
</ul>
</body>
<script>
// 获取<ul>元素内的所有<li>子元素
console.log(document.querySelector("ul").children);
</script>
获取的该节点集合是实时的，文档中任何改动都将会动态反映到集合中。
选取与上下文有关的元素节点
虽然 querySelector()、querySelectorAll()、getElementsByTagName()、getElementsByClassName() 这些方法一般都通过 document 对象访问，其实在元素节点上也有定义。这样我们可以将这些方法的查找范围缩小到文档树中某一特定分支（或者分支集）。
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
<li>Pear</li>
</ul>
<ul id="animals">
<li>Dog</li>
<li>Cat</li>
<li>Pig</li>
</ul>
</body>
<script>
// 获取第二个<ul>元素中的所有<li>子元素
console.log(document.querySelectorAll("#animals>li"));
// 这样也可以
var li_animals=document.querySelector("#animals");
console.log(li_animals.querySelectorAll("li"));
</script>
预定义的元素节点选取
有一些很方便的预定义的元素集合，如下所示：
document.all
获取 HTML 文档中所有元素节点的集合。
document.forms
获取 HTML 文档中所有（from）元素。
document.images
获取 HTML 文档中所有（img）元素。
document.links
获取 HTML 文档中所有（a）元素。
document.scripts
获取 HTML 文档中所有（script）元素。
document.styleSheets
获取 HTML 文档中所有（link、style）元素。
以上类数组列表中，document.all 构建自 HTMLAllCollection；styleSheets 构建自 StyleSheetList；其他的均构建自 HTMLCollection，并且都是实时的。
验证特定元素节点
使用 matchesSelector() 方法，我们可以判断一个元素是否匹配某个选择器字符串。但是该方法在不同内核的浏览器中实现不一样，分别加了前缀：
- mozMatchesSelector()
- webkitMatchesSelector()
- msMatchesSelector()
- oMatchesSelector()
exp：
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
<li>Pear</li>
</ul>
<ul id="animals">
<li id="Dog">Dog</li>
<li>Cat</li>
<li>Pig</li>
</ul>
</body>
<script>
// 验证id为Dog的<li>元素是否是第二个<ul>元素的子元素节点
var a=document.querySelector("#Dog").webkitMatchesSelector("#animals>li");
console.log(a);
// 输出true
</script>
结语
querySelector() 与 querySelectorAll() 方法相对来说要功能强大一些，但要特别注意的是后者获取的节点集合不是实时的。
参考
- 《DOM 启蒙》，Cody Lindley，陈养剑 译