JS的querySelector 和 getElementBy* 方法族之间的差异

querySelector

用途

• 使用 CSS 选择器来选择页面中的第一个匹配元素。
• 支持所有有效的 CSS 选择器，包括但不限于：
  • ID 选择器：#id
  • 类选择器：.class
  • 标签选择器：tag
  • 属性选择器：[attribute]
  • 组合选择器：.class1 .class2, .class1 > .class2
  • 伪类选择器：:hover, :first-child
  • 伪元素选择器：::before, ::after

返回值

• 如果找到了匹配的元素，返回该元素。
• 如果没有找到匹配的元素，返回 null。

示例代码

let elementById = document.querySelector('#myId'); // 使用 id 选择器
let elementByClass = document.querySelector('.myClass'); // 使用类选择器
let elementByTag = document.querySelector('div'); // 使用标签选择器
let elementByAttribute = document.querySelector('[href="https://example.com"]'); // 使用属性选择器
let elementByComplexSelector = document.querySelector('.container > .item'); // 使用组合选择器
let elementByPseudoClass = document.querySelector('a:hover'); // 使用伪类选择器

工作原理

• querySelector 解析提供的 CSS 选择器字符串，并在文档中查找第一个匹配的元素。
• 如果选择器包含多个部分（如组合选择器），它会按顺序逐层查找。

性能

• 由于需要解析 CSS 选择器，性能可能不如直接使用 getElementById。
• 对于简单的选择器（如 ID 选择器），性能差异可能不明显。
• 对于复杂的组合选择器或伪类选择器，性能可能会有所下降。

兼容性

• 被所有现代浏览器支持，包括 IE8+。
• 在 IE8 中，只支持基本的选择器（如 ID 选择器、类选择器和标签选择器），不支持伪类和伪元素选择器。

注意事项

• querySelector 只返回第一个匹配的元素。如果需要选择所有匹配的元素，应使用 querySelectorAll。
• CSS 选择器的语法错误会导致 querySelector 返回 null。

getElementById

用途

• 根据元素的 id 属性值来选择一个元素。
• id 属性必须是唯一的，因此每次调用只会返回一个元素。

返回值

• 如果找到了匹配的元素，返回该元素。
• 如果没有找到匹配的元素，返回 null。

示例代码

let element = document.getElementById('myId');

工作原理

• getElementById 直接利用浏览器内部对 id 的优化索引来查找元素。
• 浏览器内部维护了一个 id 索引，查找速度非常快。

性能

• 通常性能最佳，因为它直接利用了浏览器对 id 的优化索引。
• 查找速度非常快，特别是在大型文档中。

兼容性

• 被所有现代浏览器支持，包括非常老的浏览器版本（如 IE6+）。

注意事项

• id 必须是唯一的。如果有多个元素具有相同的 id，行为是未定义的。
• 如果需要选择多个元素，应使用其他方法（如 getElementsByClassName 或 querySelectorAll）。
• 在某些旧版浏览器中，如果 id 包含特殊字符（如空格或非字母数字字符），可能会导致问题。

getElementsByName

用途

• 根据元素的 name 属性值来选择一组元素。
• 常用于表单元素，如 <input>、<select> 等。

返回值

• 返回一个包含所有匹配元素的 NodeList 对象。
• NodeList 是一个动态集合，当 DOM 发生变化时会自动更新。

示例代码

let elements = document.getElementsByName('myName');

工作原理

• getElementsByName 遍历整个 DOM 树来查找所有 name 属性值匹配的元素。
• 返回的结果是一个动态的 NodeList 对象。

性能

• 性能一般，因为需要遍历整个 DOM 树来查找匹配的元素。
• 不如 getElementById 快，但通常也能接受。

兼容性

• 被所有现代浏览器支持，包括一些较旧的浏览器版本（如 IE6+）。

注意事项

• name 属性不是唯一的，因此可以返回多个元素。
• 返回的 NodeList 是动态的，如果 DOM 发生变化，NodeList 会自动更新。
• 在某些情况下，name 属性可能包含特殊字符，这可能会导致问题。

getElementsByClassName

用途

• 根据元素的 class 属性值来选择一组元素。
• 可以传入多个类名，以空格分隔。

返回值

• 返回一个包含所有匹配元素的 HTMLCollection 对象。
• HTMLCollection 是一个动态集合，当 DOM 发生变化时会自动更新。

示例代码

let elements = document.getElementsByClassName('myClass');
let elementsWithMultipleClasses = document.getElementsByClassName('class1 class2');

工作原理

• getElementsByClassName 遍历整个 DOM 树来查找所有 class 属性值匹配的元素。
• 返回的结果是一个动态的 HTMLCollection 对象。

性能

• 性能较好，但不如 getElementById。
• 浏览器内部通常会对类名进行索引，因此查找速度相对较快。

兼容性

• 被所有现代浏览器支持，包括 IE9+。
• 在 IE8 及以下版本中不支持。

注意事项

• class 属性可以包含多个类名，因此可以返回多个元素。
• 返回的 HTMLCollection 是动态的，如果 DOM 发生变化，HTMLCollection 会自动更新。
• 如果需要在 IE8 及以下版本中使用类似的功能，可以考虑使用 querySelectorAll 或者第三方库（如 jQuery）。

getElementsByTagName

用途

• 根据元素的标签名来选择一组元素。
• 常用于选择特定类型的元素，如所有的 <div> 或 <p> 元素。

返回值

• 返回一个包含所有匹配元素的 HTMLCollection 对象。
• HTMLCollection 是一个动态集合，当 DOM 发生变化时会自动更新。

示例代码

let divElements = document.getElementsByTagName('div');
let pElements = document.getElementsByTagName('p');

工作原理

• getElementsByTagName 遍历整个 DOM 树来查找所有标签名匹配的元素。
• 返回的结果是一个动态的 HTMLCollection 对象。

性能

• 性能较好，但不如 getElementById。
• 浏览器内部通常会对标签名进行索引，因此查找速度相对较快。

兼容性

• 被所有现代浏览器支持，包括非常老的浏览器版本（如 IE6+）。

注意事项

• 标签名是区分大小写的，因此 getElementsByTagName('DIV') 和 getElementsByTagName('div') 是不同的。
• 返回的 HTMLCollection 是动态的，如果 DOM 发生变化，HTMLCollection 会自动更新。
• 如果需要选择多个标签名的组合，可以考虑使用 querySelectorAll。

比较

选择方式

• querySelector：支持所有有效的 CSS 选择器，非常灵活。
• getElementById：仅支持通过 id 选择单个元素。
• getElementsByName：支持通过 name 属性选择多个元素。
• getElementsByClassName：支持通过 class 属性选择多个元素。
• getElementsByTagName：支持通过标签名选择多个元素。

返回结果

• querySelector：返回第一个匹配的元素或 null。
• getElementById：返回匹配的元素或 null。
• getElementsByName、getElementsByClassName、getElementsByTagName：返回一个包含所有匹配元素的集合（NodeList 或 HTMLCollection）。

性能与兼容性

• 性能：
  • getElementById 通常最快。
  • querySelector 的性能取决于选择器的复杂度。
  • getElementsByName、getElementsByClassName、getElementsByTagName 的性能介于两者之间。
• 兼容性：
  • getElementById：最广泛的兼容性，支持所有现代和旧版浏览器。
  • querySelector：现代浏览器支持，包括 IE8+。
  • getElementsByName：广泛的兼容性，支持所有现代和旧版浏览器。
  • getElementsByClassName：现代浏览器支持，包括 IE9+。
  • getElementsByTagName：广泛的兼容性，支持所有现代和旧版浏览器。

常见使用场景

单个元素选择

• 使用 getElementById：当你确切知道元素的 id 并且只需要选择一个元素时。

  let element = document.getElementById('myId');

• 使用 querySelector：当你需要更灵活的选择器，例如选择具有特定类名或属性的元素时。

  let element = document.querySelector('.myClass');

多个元素选择

• 使用 getElementsByName：当你需要根据 name 属性选择多个元素时，常见于表单元素。

  let elements = document.getElementsByName('myName');

• 使用 getElementsByClassName：当你需要根据 class 属性选择多个元素时。

  let elements = document.getElementsByClassName('myClass');

• 使用 getElementsByTagName：当你需要根据标签名选择多个元素时。

  let elements = document.getElementsByTagName('div');

注意事项

• 动态集合：getElementsByName、getElementsByClassName、getElementsByTagName 返回的是动态集合，这意味着如果 DOM 发生变化，集合会自动更新。如果你需要静态集合，可以将其转换为数组：

  let elements = Array.from(document.getElementsByClassName('myClass'));

• 性能优化：对于大量元素的选择，尽量使用更具体的选择器来减少遍历范围。例如，使用 document.querySelector('.container .item') 而不是 document.querySelectorAll('.item')。
• 兼容性检查：在旧版浏览器中使用这些方法时，确保进行兼容性检查，或者使用 polyfills 来提供支持。
• 选择器优先级：在使用 querySelector 时，注意选择器的优先级和特异性，以避免意外的选择结果。
• DOM 更新：如果在遍历动态集合时修改 DOM，可能会导致意外的行为。建议先将动态集合转换为静态数组再进行操作。