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

二、方法一: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。