:::success DOM选择器用于快速定位DOM元素。在原生的JavaScript中有提供根据id、name等属性来查找的传统选择器，也有新型的、更高效的querySelector选择器和querySelectorAll选择器，支持丰富的元素、属性、内容选择等。 :::

    1. 传统JavaScript 选择器
      1. 通过id定位
        1. JavaScript提供了getElementById()函数，通过id定位元素，返回匹配到id的第一个元素。其他元素会被忽略
      2. 通过class定位
        1. JavaScript提供了getElementsByClassName()函数，通过类名定位元素，返回由匹配到的元素构成的HTMLCollection对象，它是一个类数组结构。
      3. 通过name属性定位
        1. JavaScript提供了getElementsByName()函数，通过元素的name属性进行定位，返回由匹配到的元素构成的NodeList对象，它是一个类数组结构。
      4. 通过标签名定位
        1. JavaScript提供了getElementsByTagName()函数，通过标签名定位元素，返回由匹配到的元素构成的HTMLCollection对象。
      5. document.all在早期是IE支持的属性，而现在的浏览器也都提供了支持，但是在实现细节上有些差异。

    2. 新型的querySelector选择器和querySelectorAll选择器 :::success querySelector选择器和querySelectorAll选择器是在W3C DOM4中新增的，都是按照CSS选择器的规范来实现的，接下来分别来看它们的具体使用方法。 :::

      1. querySelector选择器
        1. querySelector选择器返回的是在基准元素下，选择器匹配到的元素集合中的第一个元素。
        2. 匹配过程
          1. 匹配的过程中不仅仅针对基准元素的后代元素，实际上会遍历整个文档结构，包括基准元素和它的后代元素以外的元素。实际处理过程是首先创建一个匹配元素的初始列表，然后判断每个元素是否为基准元素的后代元素，第一个属于基准元素的后代元素将会被返回。
      2. querySelectorAll选择器
        1. querySelectorAll选择器与querySelector选择器类似，区别在于querySelectorAll选择器会返回基准元素下匹配到的所有子元素的集合。
          1. 匹配过程
            1. querySelectorAll选择器匹配过程与querySelector选择器一样，优先获取所有匹配元素的集合，然后判断每个元素是否属于基准元素。如果属于则返回结果，最终返回一个NodeList对象。