JavaScript中getElementById 和querySelector的差別

getElementById vs querySelector: 相似點

首先我們先看一下如下代碼：

<ul>
 <li id="web-id">PHP</li>
 <li>HTML</li>
 <li class="web-class">CSS</li>
 <li class="web-class">JavaScript</li>
</ul>
           

*舉個例子先想擷取第一個 li， id名字叫"web-id"

1.用getElementById

document.getElementById('web-id');
           

2.用querySelector

document.querySelector('#web-id');
           

getElementById vs querySelector: 不同點

當你要選取第3個li的時候你還能用getElementById嗎？

不可能用！

因為這裡沒有聲明id，是以隻能選擇querySelector

document.querySelector('ul li.web-class');
           

要麼簡單寫成這樣也可以

document.querySelector('li.web-class')
           

總結：

這兩者使用的時候差不多，但是更建議getElementById.

Because it is faster and better supported than querySelector.