查询选择器
本书不会使用太多样式表。尽管理解样式表对浏览器程序设计至关重要,想要正确解释所有浏览器支持的属性及其使用方式,可能需要两到三本书才行。
我介绍选择器语法(用在样式表中,确定样式作用的元素)的主要原因是这种微型语言同时也是一种高效的 DOM 元素查找方式。
document
对象和元素节点中都定义了querySelectorAll
方法,该方法接受一个选择器字符串并返回类数组对象,返回的对象中包含所有匹配的元素。
<p>And if you go chasing
<span class="animal">rabbits</span></p>
<p>And you know you're going to fall</p>
<p>Tell 'em a <span class="character">hookah smoking
<span class="animal">caterpillar</span></span></p>
<p>Has given you the call</p>
<script>
function count(selector) {
return document.querySelectorAll(selector).length;
}
console.log(count("p")); // All <p> elements
// → 4
console.log(count(".animal")); // Class animal
// → 2
console.log(count("p .animal")); // Animal inside of <p>
// → 2
console.log(count("p > .animal")); // Direct child of <p>
// → 1
</script>
与getElementsByTagName
这类方法不同,由querySelectorAll
返回的对象不是动态变更的。修改文档时其内容不会被修改。但它仍然不是一个真正的数组,所以如果你打算将其看做真的数组,你仍然需要调用Array.from
。
querySelector
方法(没有All
)与querySelectorAll
作用相似。如果只想寻找某一个特殊元素,该方法非常有用。该方法只返回第一个匹配的元素,如果没有匹配的元素则返回null
。