querySelector和getElementById用法区别

querySelector 和 getElementById 是两种常用的 DOM 操作方法，它们用于在文档中查找元素，但有不同的用法和适用范围。

1. getElementById

• 用法: getElementById(id) 方法用于根据元素的 id 属性值来查找元素。

• 返回值: 返回具有指定 id 的元素对象。如果不存在该 id 的元素，返回 null。

• 选择范围: 只能通过 id 进行查找，并且 id 在文档中应该是唯一的。

• 性能: 相对来说，getElementById 是查找单个元素时性能最优的方法之一，因为它直接通过 id 查找元素，不需要进行复杂的选择器解析。

• 示例:

var element = document.getElementById("myElementId");

 

2. querySelector

• 用法: querySelector(selector) 方法用于通过 CSS 选择器语法来查找元素。可以使用类选择器、属性选择器、标签选择器、伪类等。

• 返回值: 返回与指定的 CSS 选择器匹配的第一个元素对象。如果没有匹配的元素，返回 null。

• 选择范围: 可以使用复杂的选择器语法，包括类名、属性、嵌套结构等，选择范围更广。可以选择id、class、标签、属性选择器、伪类选择器等。

• 性能: querySelector 的灵活性较高，但由于它要解析选择器，性能可能略低于 getElementById，特别是在复杂的选择器和深层次的 DOM 树中。

• 示例:

// 根据 id 查找元素
var elementById = document.querySelector("#myElementId");

// 根据类名查找元素
var elementByClass = document.querySelector(".myClassName");

// 根据标签名查找元素
var elementByTag = document.querySelector("div");

// 查找具有特定属性的元素
var elementByAttribute = document.querySelector("[data-custom='value']");

 

区别总结

1. 选择器类型:

   • getElementById 只能根据 id 查找。
   • querySelector 可以使用任意有效的 CSS 选择器。

2. 返回的元素:

   • getElementById 只返回具有指定 id 的元素。
   • querySelector 返回与选择器匹配的第一个元素。

3. 性能:

   • getElementById 更快，用于单个 id 查找时性能最佳。
   • querySelector 更灵活，但解析复杂选择器时性能可能稍慢。

4. 灵活性:

   • querySelector 适用于复杂的选择场景，比如嵌套、组合条件的选择。
   • getElementById 适用于唯一 id 的快速定位。

这两者可以根据具体需求选择使用，如果只需要通过 id 查找，getElementById 是首选；如果需要更复杂的选择器，querySelector 则更合适。