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

二、也可以使用CSS选择器的伪类
【示例1】以下代码将会返回鼠标指针现在已经结束的元素的集合（按嵌套顺序：从最外层到嵌套最多的元素）

document.querySelectorAll(':hover')

querySelector

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

matches

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

<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)
    }
  }
</script>

二、elem.matches(css)用于检查elem与给定的CSS选择器是否匹配。

closest

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

<h1>Contents</h1>
<div class="contents">
  <ul class="book">
    <li class="chapter">Chapter 1</li>
    <li class="chapter">Chapter 1</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>

getElementsBy*

一、elem.getElementsByTagName(tag)查找具有给定标签的元素，并返回给它们的集合。tag参数也可以是对于“任何标签”的星号“*”.
二、elem.getElementsByClassName(className)返回具有给定CSS类的元素。
三、document.getElementsByName(name)返回在文档范围内具有给定name特征的元素。
【示例1】

// 获取文档中的所有div
let divs = document.getElementsByTagName('div')

// 查找table中的所有input标签
<table id="table">
  <tr>
    <td>Your age:</td>

    <td>
      <label>
        <input type="radio" name="age" value="young" checked> less than 18
      </label>
      <label>
        <input type="radio" name="age" value="mature"> from 18 to 50
      </label>
      <label>
        <input type="radio" name="age" value="senior"> more than 60
      </label>
    </td>
  </tr>
</table>

<script>
  let inputs = table.getElementsByTagName('input');

  for (let input of inputs) {
    alert( input.value + ': ' + input.checked );
  }
</script>

1、返回的是一个集合，不是一个元素

// 错误写法
document.getElementsByTagName('input').value = 5;

// 正确写法（如果有input）
document.getElementsByTagName('input')[0].value = 5;

【示例2】查找.article元素

<form name="my-form">
  <div class="article">Article</div>
  <div class="long article">Long article</div>
</form>

<script>
  // 按 name 特性查找
  let form = document.getElementsByName('my-form')[0];

  // 在 form 中按 class 查找
  let articles = form.getElementsByClassName('article');
  alert(articles.length); // 2, found two elements with class "article"
</script>

getElementsBy*、querySelectorAll返回的集合的区别

一、所有的”getElementsBy*”方法都会返回一个实时的（live）集合。这样的结合始终反映的是文档的当前状态，并且在文档发生更改时会“自动更新”。
【示例1】下面有2个脚本
第一个创建了对

<div>First div</div>
<script>
  let divs - document.getElementsByTagName('div');
    alert(divs.length); // 1
</script>

<div>Second div</div>
<script>
  alert(divs.length); // 2
</script>

<div>First div</div>

<script>
  let divs = document.querySelectorAll('div');
  alert(divs.length); // 1
</script>

<div>Second div</div>

<script>
  alert(divs.length); // 1
</script>