选择元素

在 DOM 操作中，选择元素是最基本也是最重要的操作之一。JavaScript 提供了多种方法来选择文档中的元素。

通过 ID 选择元素

使用 getElementById() 方法可以通过元素的 ID 来选择元素。这是最直接和高效的方法之一。

语法

javascript

let element = document.getElementById(id);

示例

html

<!DOCTYPE html>
<html>
<head>
    <title>选择元素示例</title>
</head>
<body>
    <h1 id="main-title">主标题</h1>
    <p id="description">这是一段描述文本。</p>
    <button id="my-button">点击我</button>
</body>
</html>

javascript

// 选择元素
let title = document.getElementById("main-title");
let description = document.getElementById("description");
let button = document.getElementById("my-button");

// 修改元素内容
title.textContent = "新的主标题";
description.style.color = "blue";

// 添加事件监听器
button.addEventListener("click", function() {
    alert("按钮被点击了！");
});

通过类名选择元素

使用 getElementsByClassName() 方法可以通过类名来选择元素。该方法返回一个 HTMLCollection。

语法

javascript

let elements = document.getElementsByClassName(className);

示例

html

<!DOCTYPE html>
<html>
<head>
    <title>选择元素示例</title>
</head>
<body>
    <p class="highlight">段落 1</p>
    <p class="highlight">段落 2</p>
    <p class="normal">段落 3</p>
    <div class="highlight">这是一个 div 元素</div>
</body>
</html>

javascript

// 选择所有具有 highlight 类的元素
let highlightedElements = document.getElementsByClassName("highlight");

// 遍历所有选中的元素
for (let i = 0; i < highlightedElements.length; i++) {
    highlightedElements[i].style.backgroundColor = "yellow";
}

// 使用 Array.from() 转换为数组以便使用数组方法
let elementsArray = Array.from(highlightedElements);
elementsArray.forEach(function(element) {
    element.style.fontWeight = "bold";
});

通过标签名选择元素

使用 getElementsByTagName() 方法可以通过标签名来选择元素。该方法也返回一个 HTMLCollection。

语法

javascript

let elements = document.getElementsByTagName(tagName);

示例

html

<!DOCTYPE html>
<html>
<head>
    <title>选择元素示例</title>
</head>
<body>
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p>段落 1</p>
    <p>段落 2</p>
    <div>Div 1</div>
    <div>Div 2</div>
</body>
</html>

javascript

// 选择所有 h1 元素
let h1Elements = document.getElementsByTagName("h1");
h1Elements[0].style.color = "red";

// 选择所有 p 元素
let pElements = document.getElementsByTagName("p");
for (let i = 0; i < pElements.length; i++) {
    pElements[i].style.marginBottom = "10px";
}

// 选择所有 div 元素
let divElements = document.getElementsByTagName("div");
Array.from(divElements).forEach(function(div) {
    div.style.border = "1px solid black";
});

使用 querySelector

querySelector() 方法使用 CSS 选择器语法来选择元素，返回匹配的第一个元素。

语法

javascript

let element = document.querySelector(selectors);

示例

html

<!DOCTYPE html>
<html>
<head>
    <title>选择元素示例</title>
    <style>
        .container {
            padding: 20px;
        }
        #main-content {
            background-color: #f0f0f0;
        }
        .item:first-child {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="main-content">
            <p class="item">项目 1</p>
            <p class="item">项目 2</p>
            <p class="item">项目 3</p>
        </div>
    </div>
</body>
</html>

javascript

// 通过 ID 选择元素
let mainContent = document.querySelector("#main-content");

// 通过类名选择元素
let container = document.querySelector(".container");

// 通过标签名选择元素
let firstParagraph = document.querySelector("p");

// 使用复杂选择器
let firstItem = document.querySelector(".item:first-child");
let nestedElement = document.querySelector(".container #main-content .item");

// 修改选中元素的样式
mainContent.style.padding = "30px";
firstItem.style.color = "red";

使用 querySelectorAll

querySelectorAll() 方法使用 CSS 选择器语法来选择所有匹配的元素，返回一个 NodeList。

语法

javascript

let elements = document.querySelectorAll(selectors);

示例

html

<!DOCTYPE html>
<html>
<head>
    <title>选择元素示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
        .card {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">
            <h2>卡片 1</h2>
            <p class="highlight">这是卡片 1 的内容</p>
        </div>
        <div class="card">
            <h2>卡片 2</h2>
            <p>这是卡片 2 的内容</p>
        </div>
        <div class="card">
            <h2>卡片 3</h2>
            <p class="highlight">这是卡片 3 的内容</p>
        </div>
    </div>
</body>
</html>

javascript

// 选择所有卡片元素
let cards = document.querySelectorAll(".card");

// 为每个卡片添加边框样式
cards.forEach(function(card, index) {
    card.style.borderLeft = "5px solid #" + (index * 50 + 100);
});

// 选择所有具有 highlight 类的段落
let highlightedParagraphs = document.querySelectorAll("p.highlight");

// 修改所有高亮段落的样式
highlightedParagraphs.forEach(function(paragraph) {
    paragraph.style.fontWeight = "bold";
    paragraph.style.padding = "5px";
});

// 使用复杂选择器
let cardTitles = document.querySelectorAll(".card h2");
cardTitles.forEach(function(title) {
    title.style.color = "blue";
});

NodeList 与 HTMLCollection 的区别

querySelectorAll() 返回 NodeList，而 getElementsByClassName() 和 getElementsByTagName() 返回 HTMLCollection。两者有重要区别：

javascript

// HTMLCollection 是动态的
let liveDivs = document.getElementsByTagName("div");
console.log(liveDivs.length); // 假设输出 3

// 添加新 div
let newDiv = document.createElement("div");
document.body.appendChild(newDiv);

console.log(liveDivs.length); // 输出 4，自动更新

// NodeList 是静态的（querySelectorAll 返回的）
let staticDivs = document.querySelectorAll("div");
console.log(staticDivs.length); // 假设输出 4

// 添加新 div
let anotherDiv = document.createElement("div");
document.body.appendChild(anotherDiv);

console.log(staticDivs.length); // 仍然输出 4，不会自动更新

最佳实践

优先使用 querySelector/querySelectorAll：它们使用 CSS 选择器语法，更强大且一致。
缓存选择结果：如果需要多次使用同一个元素，应该将其存储在变量中。

javascript

// 不好的做法
document.querySelector("#myButton").addEventListener("click", handler1);
document.querySelector("#myButton").style.color = "red";
document.querySelector("#myButton").textContent = "新文本";

// 好的做法
let button = document.querySelector("#myButton");
button.addEventListener("click", handler1);
button.style.color = "red";
button.textContent = "新文本";

检查元素是否存在：在操作元素之前检查它是否存在。

javascript

let element = document.querySelector("#myElement");
if (element) {
    // 元素存在，可以安全操作
    element.style.display = "none";
} else {
    // 元素不存在，处理错误情况
    console.log("元素未找到");
}

使用有意义的选择器：选择器应该清晰地表达选择元素的意图。

javascript

// 不清晰的选择器
let elements = document.querySelectorAll(".c");

// 清晰的选择器
let buttons = document.querySelectorAll(".submit-button");

避免过度具体的选择器：过于具体的选择器可能在 HTML 结构变化时失效。

javascript

// 过于具体
let element = document.querySelector("body > div.container > ul.list > li.item");

// 更好的做法
let element = document.querySelector(".item");

通过掌握这些选择元素的方法，您可以更有效地操作 DOM，创建动态和交互式的网页。

选择元素 ​

通过 ID 选择元素 ​

语法 ​

示例 ​

通过类名选择元素 ​

语法 ​

示例 ​

通过标签名选择元素 ​

语法 ​

示例 ​

使用 querySelector ​

语法 ​

示例 ​

使用 querySelectorAll ​

语法 ​

示例 ​

NodeList 与 HTMLCollection 的区别 ​

最佳实践 ​

选择元素

通过 ID 选择元素

语法

示例

通过类名选择元素

语法

示例

通过标签名选择元素

语法

示例

使用 querySelector

语法

示例

使用 querySelectorAll

语法

示例

NodeList 与 HTMLCollection 的区别

最佳实践