在 JavaScript 中，选择 DOM 元素是与网页交互的基础。通过正确地选择元素，我们可以修改它们的内容、样式，甚至响应用户的操作。本文将介绍几种常用的 DOM 选择方法。
使用 getElementById
getElementById 方法可以根据元素的 id 属性选择单个 DOM 元素。这是选择元素的最简单且最常用的方法。
示例
假设我们有以下 HTML 代码：
1
| <div id="myDiv">Hello, World!</div>
|
我们可以通过以下 JavaScript 代码选择并修改这个 div 的内容：
1
2
| const myElement = document.getElementById('myDiv');
myElement.innerHTML = 'Hello, JavaScript!';
|
在这个例子中，我们用 getElementById 选择了 id 为 myDiv 的元素，并将其内容修改为 Hello, JavaScript!。
使用 getElementsByClassName
如果你需要选择多个同样类名的元素，可以使用 getElementsByClassName 方法。这个方法返回一个“类数组”对象，包含所有符合条件的元素。
示例
考虑以下 HTML 结构：
1
2
3
| <div class="myClass">Item 1</div>
<div class="myClass">Item 2</div>
<div class="myClass">Item 3</div>
|
我们可以选择所有 myClass 类的元素并改变它们的颜色：
1
2
3
4
5
| const elements = document.getElementsByClassName('myClass');
for (let i = 0; i < elements.length; i++) {
elements[i].style.color = 'blue';
}
|
这里，我们用 getElementsByClassName 获取了所有具有 myClass 类名的 div 元素，并依次将它们的文字颜色更改为蓝色。
使用 querySelector 和 querySelectorAll
querySelector 和 querySelectorAll 是选择元素的强大工具，允许使用 CSS 选择器语法。
示例
在以下 HTML 中：
1
2
3
4
| <div class="container">
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
</div>
|
我们可以用 querySelector 选择第一个 p 元素：
1
2
| const firstParagraph = document.querySelector('.text');
firstParagraph.style.fontWeight = 'bold';
|
使用 querySelectorAll
如果我们想选择所有的 p 元素，可以使用 querySelectorAll：
1
2
3
4
5
| const paragraphs = document.querySelectorAll('.text');
paragraphs.forEach(paragraph => {
paragraph.style.fontStyle = 'italic';
});
|
在这个例子中，所有 text 类的 p 元素的字体样式都被设置为斜体。
小结
以上是选择 DOM 元素的几种基本方法。根据具体的需求，我们可以灵活运用这些方法来选择并操作网页元素。掌握这些技能将为你深入学习 JavaScript 和前端开发打下坚实的基础！
