JavaScript选择器详解：从基础到进阶，玩转DOM操作289

在JavaScript中，操作DOM（文档对象模型）是前端开发的核心技能之一。而要操作DOM，首先就要学会如何选择目标元素。JavaScript提供了多种选择器，如同CSS选择器一样，能够精准地定位页面上的HTML元素。本文将深入探讨JavaScript的选择器，涵盖其基础用法、进阶技巧以及各种选择器类型的区别与应用场景，帮助大家掌握这门至关重要的技能。

一、基础选择器：getElementById(), getElementsByTagName(), getElementsByClassName()

JavaScript最初提供的三种选择器是最基础也是最常用的：getElementById(), getElementsByTagName(), getElementsByClassName()。它们分别根据元素的ID、标签名和类名来选择元素。

getElementById() 方法返回带有指定 ID 的第一个元素。ID 必须在文档中是唯一的。如果找不到具有指定 ID 的元素，则返回 null。
let element = ("myElement");
if (element) {
= "red";
}

getElementsByTagName() 方法返回带有指定标签名的所有元素的 HTMLCollection。HTMLCollection 是一个动态集合，这意味着如果文档中的元素发生更改，则集合也会更新。返回的集合是一个类数组对象，可以使用索引访问其中的元素。
let elements = ("p");
for (let i = 0; i < ; i++) {
elements[i]. = "16px";
}

getElementsByClassName() 方法返回带有指定类名的所有元素的 HTMLCollection。类似于getElementsByTagName()，它返回的是一个动态集合。
let elements = ("myClass");
for (let i = 0; i < ; i++) {
elements[i]. = "yellow";
}

二、querySelector() 和querySelectorAll()：强大的CSS选择器支持

为了更好地支持CSS选择器，JavaScript引入了querySelector()和querySelectorAll()这两个方法。它们提供了更强大的选择能力，支持几乎所有CSS选择器。

querySelector() 方法返回与指定选择器匹配的第一个元素。如果找不到匹配的元素，则返回 null。
let element = ("#myElement"); // 选择ID为myElement的元素
let element2 = (".myClass"); // 选择类名为myClass的第一个元素
let element3 = (""); // 选择类名为special的第一个p标签

querySelectorAll() 方法返回与指定选择器匹配的所有元素的NodeList。NodeList 是一个静态集合，这意味着即使文档中的元素发生更改，集合也不会更新。返回的集合是一个类数组对象，可以使用索引访问其中的元素。
let elements = (".myClass"); // 选择所有类名为myClass的元素
(element => {
= "bold";
});

三、选择器类型详解

querySelector()和querySelectorAll()支持各种CSS选择器，包括：
ID选择器：#id
类选择器：.class
标签选择器：element
组合选择器：

后代选择器：ancestor descendant
子选择器：parent > child
兄弟选择器：prev + next, prev ~ siblings

属性选择器：[attribute], [attribute=value], [attribute^=value], [attribute$=value], [attribute*=value]
伪类选择器：:first-child, :last-child, :nth-child(n), :hover, :focus, :checked 等

四、性能比较

getElementById() 通常是最快的，因为它直接通过ID查找元素。getElementsByTagName()和getElementsByClassName()的性能相对较低，特别是当文档很大时。querySelector()和querySelectorAll()的性能介于两者之间，但它们提供了更强大的选择能力。对于复杂的DOM操作，选择合适的策略至关重要，要根据实际情况选择最佳方法。

五、总结

掌握JavaScript的选择器对于高效地操作DOM至关重要。从基础的选择器到强大的querySelector()和querySelectorAll()，以及各种CSS选择器的运用，都需要在实际项目中不断练习和积累经验。选择合适的JavaScript选择器，可以提高代码效率，并使代码更简洁易读。

2025-06-06

上一篇：JavaScript Hint：提升代码可读性和可维护性的实用技巧

下一篇：JavaScript模块化：深入理解和运用封装技术