查询选择器

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

我介绍选择器语法（用在样式表中，确定样式作用的元素）的主要原因是这种微型语言同时也是一种高效的 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>
  8. <script>
  9.   function count(selector) {
  10.     return document.querySelectorAll(selector).length;
  11.   }
  12.   console.log(count("p"));           // All <p> elements
  13.   // → 4
  14.   console.log(count(".animal"));     // Class animal
  15.   // → 2
  16.   console.log(count("p .animal"));   // Animal inside of <p>
  17.   // → 2
  18.   console.log(count("p > .animal")); // Direct child of <p>
  19.   // → 1
  20. </script>

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

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