解析JavaScript中 querySelector 与 getElementById 方法的区别

当在JavaScript中需要通过DOM方法来操作HTML文档元素时，会用到querySelector与getElementById两种方法。尽管这两种方法都可以工作，但是它们之间存在一些区别。

区别1：查找方式

• 使用querySelector方法可以使用CSS选择器来查找元素。例如，可以使用querySelector("#example")来查找id为example的元素。在CSS中，"#"表示ID选择器。
• 使用getElementById方法是直接查找ID匹配的元素。 不需要使用CSS选择器。可以使用getElementById("example")来获取id为example的元素。

区别2：返回值

• querySelector方法返回查找到的第一个元素。如果没有找到匹配的结果，则返回null。
• getElementById方法返回唯一的一个具有指定ID的元素。如果没有找到匹配的结果，则返回null。

接下来，通过两个例子来具体说明这两种方法的区别：

示例1：

有一个html文件，里面有一个id为example的div元素。可以使用getElementById方法找到它并修改它的文本内容。

<div id="example">原来的文本内容</div>

const example = document.getElementById("example");
example.innerText = "修改后的文本内容";

结果是：

<div id="example">修改后的文本内容</div>

示例2：

有一个html文件，里面有一个class为example的div元素以及一个id为example的div元素。可以使用querySelector方法找到class为example的div元素并修改它的文本内容。

<div id="example">无关紧要的文本内容</div>
<div class="example">原来的文本内容</div>

const example = document.querySelector(".example");
example.innerText = "修改后的文本内容";

结果是：

<div id="example">无关紧要的文本内容</div>
<div class="example">修改后的文本内容</div>

通过这个例子可以看出，如果使用getElementById方法，它会返回第一个id匹配的元素，这里是无关紧要的文本内容的div元素，并不是我们想要修改的class为example的div元素。而如果使用querySelector方法，可以根据CSS选择器来查找到class为example的div元素。