1.4搜索：getElement*，querySelector*

document.getElementById 或者只使用 id

如果一个元素有 id 特性（attribute），那我们就可以使用 document.getElementById(id) 方法获取该元素，无论它在哪里。
例如：

<div id="elem">
  <div id="elem-content">Element</div>
</div>
<script>
  // 获取该元素
  let elem = document.getElementById('elem');
  // 将该元素背景改为红色
  elem.style.background = 'red';
</script>

此外，还有一个通过 id 命名的全局变量，它引用了元素：

<div id="elem">
  <div id="elem-content">Element</div>
</div>
<script>
  // elem 是对带有 id="elem" 的 DOM 元素的引用
  elem.style.background = 'red';
  // id="elem-content" 内有连字符，所以它不能成为一个变量
  // ...但是我们可以通过使用方括号 window['elem-content'] 来访问它
</script>

……除非我们声明一个具有相同名称的 JavaScript 变量，否则它具有优先权：

<div id="elem"></div>
<script>
  let elem = 5; // 现在 elem 是 5，而不是对 <div id="elem"> 的引用
  alert(elem); // 5
</script>

注意:

• 请不要使用以 id 命名的全局变量来访问元素

• id 必须是唯一的

  querySelectorAll

  到目前为止，最通用的方法是 elem.querySelectorAll(css)，它返回 elem 中与给定 CSS 选择器匹配的所有元素。
  在这里，我们查找所有为最后一个子元素的

• 元素：

  <ul>
  <li>The</li>
  <li>test</li>
  </ul>
  <ul>
  <li>has</li>
  <li>passed</li>
  </ul>
  <script>
  let elements = document.querySelectorAll('ul > li:last-child');
  for (let elem of elements) {
    alert(elem.innerHTML); // "test", "passed"
  }
  </script>

  这个方法确实功能强大，因为可以使用任何 CSS 选择器。

• 也可以使用伪类

CSS 选择器的伪类，例如 :hover 和 :active 也都是被支持的。例如， document.querySelectorAll(‘:hover’) 将会返回鼠标指针正处于其上方的元素的集合（按嵌套顺序：从最外层 到嵌套最多的元素）。

querySelector

elem.querySelector(css) 调用会返回给定 CSS 选择器的第一个元素。
换句话说，结果与 elem.querySelectorAll(css)[0] 相同，但是后者会查找 所有 元素，并从中选取一个，而 elem.querySelector 只会查找一个。因此它在速度上更快，并且写起来更短。

matches

之前的方法是搜索 DOM。
elem.matches(css) 不会查找任何内容，它只会检查 elem 是否与给定的 CSS 选择器匹配。它返回 true 或 false。
当我们遍历元素（例如数组或其他内容）并试图过滤那些我们感兴趣的元素时，这个方法会很有用。
例如：

<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>
<script>
  // 不一定是 document.body.children，还可以是任何集合
  for (let elem of document.body.children) {
    if (elem.matches('a[href$="zip"]')) {
      alert("The archive reference: " + elem.href );
      //The archive reference: http://example.com/file.zip
    }
  }
</script>

closest

元素的祖先（ancestor）是：父级，父级的父级，它的父级等。祖先们一起组成了从元素到顶端的父级链。
elem.closest(css) 方法会查找与 CSS 选择器匹配的最近的祖先。elem 自己也会被搜索。
换句话说，方法 closest 在元素中得到了提升，并检查每个父级。如果它与选择器匹配，则停止搜索并返回该祖先。
例如：

<h1>Contents</h1>
<div class="contents">
  <ul class="book">
    <li class="chapter">Chapter 1</li>
    <li class="chapter">Chapter 2</li>
  </ul>
</div>
<script>
  let chapter = document.querySelector('.chapter'); // LI
  alert(chapter.closest('.book')); // UL
  alert(chapter.closest('.contents')); // DIV
  alert(chapter.closest('h1')); // null（因为 h1 不是祖先）
</script>

任务

这是带有表格（table）和表单（form）的文档。
如何查找？……

1. 带有 id=”age-table” 的表格。
2. 表格内的所有 label 元素（应该有三个）。
3. 表格中的第一个 td（带有 “Age” 字段）。
4. 带有 name=”search” 的 form。
5. 表单中的第一个 input。
6. 表单中的最后一个 input。

在一个单独的窗口中打开 table.html 页面，并对此页面使用浏览器开发者工具。

// 1. 带有 id="age-table" 的表格。
let table = document.getElementById('age-table')
// 2. 表格内的所有 label 元素
table.getElementsByTagName('label')
// 或
document.querySelectorAll('#age-table label')
// 3. 表格中的第一个 td（带有 "Age" 字段）
table.rows[0].cells[0]
// 或
table.getElementsByTagName('td')[0]
// 或
table.querySelector('td')
// 4. 带有 name="search" 的 form。
// 假设文档中只有一个 name="search" 的元素
let form = document.getElementsByName('search')[0]
// 或者，专门对于 form
document.querySelector('form[name="search"]')
// 5. 表单中的第一个 input
form.getElementsByTagName('input')[0]
// 或
form.querySelector('input')
// 6. 表单中的最后一个 input
let inputs = form.querySelectorAll('input') // 查找所有 input
inputs[inputs.length-1] // 取出最后一个