查询选择器

本书不会使用太多样式表。尽管理解样式表对浏览器程序设计至关重要,想要正确解释所有浏览器支持的属性及其使用方式,可能需要两到三本书才行。

我介绍选择器语法(用在样式表中,确定样式作用的元素)的主要原因是这种微型语言同时也是一种高效的 DOM 元素查找方式。

document对象和元素节点中都定义了querySelectorAll方法,该方法接受一个选择器字符串并返回类数组对象,返回的对象中包含所有匹配的元素。

  1. <p>And if you go chasing
  2. <span class="animal">rabbits</span></p>
  3. <p>And you know you're going to fall</p>
  4. <p>Tell 'em a <span class="character">hookah smoking
  5. <span class="animal">caterpillar</span></span></p>
  6. <p>Has given you the call</p>
  7. <script>
  8. function count(selector) {
  9. return document.querySelectorAll(selector).length;
  10. }
  11. console.log(count("p")); // All <p> elements
  12. // → 4
  13. console.log(count(".animal")); // Class animal
  14. // → 2
  15. console.log(count("p .animal")); // Animal inside of <p>
  16. // → 2
  17. console.log(count("p > .animal")); // Direct child of <p>
  18. // → 1
  19. </script>

getElementsByTagName这类方法不同,由querySelectorAll返回的对象不是动态变更的。修改文档时其内容不会被修改。但它仍然不是一个真正的数组,所以如果你打算将其看做真的数组,你仍然需要调用Array.from

querySelector方法(没有All)与querySelectorAll作用相似。如果只想寻找某一个特殊元素,该方法非常有用。该方法只返回第一个匹配的元素,如果没有匹配的元素则返回null