小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

一、问题：获取ul中的第一个li标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM选择器</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

二、方法一:getElementByXXX

  // document.getElementById
  // document.getElementsByClassName
  // document.getElementsByTagName

当层级比较多时，使用这种方法是比较麻烦的

三、方法二:querySelector API

模仿Jquery的写法产生的API

  // document.querySelector  匹配满足条件的第一个标签
  // document.querySelectorAll 匹配满足条件的所有标签

四、方法三：Chrome环境中的$符号简写方式

五、总结

1.性能上

querySelector API比getElementByXXX API性能略低，但现在电脑的运行速度和计算速度都很快，本身它们之间差异也不大，所以在这个前提下，它们之间的差异是可以忽略不计的

2.使用上

将两种方式获取的标签赋值给两个变量

之后删除页面中第三个li标签，再打印两个变量

我们会发现，使用getElementByXXX获取的数据中，没有了删除的标签，而使用querySelector API获取的数据中，删除的标签还在，只是把鼠标放到删除的标签上，它已经不在当前页面中了。所以我们得出结论：使用getElementByXXX得到的是动态数据结构，使用querySelector API得到的是某一时间节点数据的拷贝，之后页面数据的动态修改对它没有影响。所以不要在频繁改变DOM的情况下，尽量不要从getElementByXXX过渡到querySelector API。如果一定要过过渡，那在DOM改变时重新调用querySelector API。

JS-DOM选择器