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.