一、問題：獲取ul中的第一個li標(biāo)簽

二、方法一:getElementByXXX

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

當(dāng)層級比較多時，使用這種方法是比較麻煩的

三、方法二:querySelector API

模仿Jquery的寫法產(chǎn)生的API

?// document.querySelector ?匹配滿足條件的第一個標(biāo)簽 ?// document.querySelectorAll 匹配滿足條件的所有標(biāo)簽

四、方法三：Chrome環(huán)境中的$符號簡寫方式

五、總結(jié)

1.性能上

querySelector API比getElementByXXX API性能略低，但現(xiàn)在電腦的運行速度和計算速度都很快，本身它們之間差異也不大，所以在這個前提下，它們之間的差異是可以忽略不計的

2.使用上

將兩種方式獲取的標(biāo)簽賦值給兩個變量

之后刪除頁面中第三個li標(biāo)簽，再打印兩個變量

我們會發(fā)現(xiàn)，使用getElementByXXX獲取的數(shù)據(jù)中，沒有了刪除的標(biāo)簽，而使用querySelector API獲取的數(shù)據(jù)中，刪除的標(biāo)簽還在，只是把鼠標(biāo)放到刪除的標(biāo)簽上，它已經(jīng)不在當(dāng)前頁面中了。所以我們得出結(jié)論：使用getElementByXXX得到的是動態(tài)數(shù)據(jù)結(jié)構(gòu)，使用querySelector API得到的是某一時間節(jié)點數(shù)據(jù)的拷貝，之后頁面數(shù)據(jù)的動態(tài)修改對它沒有影響。所以不要在頻繁改變DOM的情況下，盡量不要從getElementByXXX過渡到querySelector API。如果一定要過過渡，那在DOM改變時重新調(diào)用querySelector API。