在前端开发的日常工作中，我们经常会遇到这样的场景：页面已经加载完毕，但我们需要根据用户的操作动态地更新内容、修改样式，或者获取用户输入的数据。如果在每次需要变更时都去重新编写 HTML 源代码，那效率将极其低下，也是不现实的。

这就引出了我们今天要探讨的核心话题：如何利用 JavaScript 来操作 DOM（文档对象模型）。简单来说，DOM 将网页呈现为一个结构化的树状图，而我们的 HTML 元素就是这棵树上的节点。在能够随心所欲地“修剪”或“装饰”这棵树之前，我们必须先学会如何准确地找到这些节点——也就是如何访问 HTML 元素。

虽然 JavaScript 提供了多种方式来定位元素，但不同的方法适用于不同的场景。选择合适的方法，不仅能让代码更加简洁，还能显著提升应用的运行性能。今天，我们就将深入探讨这五种最常用的方法，并通过丰富的代码示例，带你掌握它们的精髓。

准备工作

在正式开始之前，建议你打开浏览器的开发者工具（按 Ctrl + Shift + I 或 Cmd + Option + I），并切换到“控制台”面板。我们在后续示例中编写的代码，你都可以直接粘贴到控制台中运行，亲眼见证代码的效果。

1. 通过 ID 获取 HTML 元素

这是最直接、最常用的方法，就像通过身份证号找人一样准确。在 HTML 文档中，ID 属性应当是唯一的（即使有重复，浏览器也只会返回第一个匹配项）。我们可以使用 getElementById() 方法来获取它。

#### 语法

document.getElementById(element_ID);

• 参数：你想要获取的元素的 ID 字符串（区分大小写）。
• 返回值：返回一个对应的 DOM 元素对象。如果找不到该 ID，则返回 null。

#### 实战示例

让我们看一个基础的例子。首先我们在 HTML 中定义一个带有 ID 的标题。

    


    
    
欢迎来到 JavaScript 世界
    
DOM 操作示例

    
        // 使用 getElementById 获取元素
        let titleElement = document.getElementById("main-title");

        // 1. 打印整个元素对象
        console.log("获取到的元素对象：", titleElement);

        // 2. 打印元素内部的文本内容
        console.log("元素内容：", titleElement.innerHTML);

        // 3. 动态修改样式（把文字变成红色）
        titleElement.style.color = "red";
    

#### 开发者提示

在使用这个方法时，最常见的错误是 ID 拼写错误 或者 大小写不匹配。HTML 中的 ID 是区分大小写的，INLINECODE532d491b 和 INLINECODE726ce0da 是完全不同的两个 ID。另外，如果脚本在 HTML 元素加载之前运行（例如放在 INLINECODEeeacae7e 中而没有使用 INLINECODE164cf3c4），你将会得到 null，这也是新手常遇到的“脚本报错”原因之一。

2. 通过 ClassName 获取 HTML 元素

与 ID 不同，Class（类）通常用于描述一组具有相同样式的元素。如果我们需要同时操作多个类似的元素（比如一组按钮或列表项），使用 getElementsByClassName() 是最佳选择。

#### 语法

document.getElementsByClassName(element_classnames);

• 参数：包含一个或多个类名的字符串。如果要匹配多个类，可以用空格分隔。
• 返回值：这是一个关键点——它返回的不是一个元素，而是一个 HTMLCollection（类数组对象）。即使页面上只有一个匹配的元素，它也会被包装在这个集合中返回。

#### 实战示例 1：基础用法

下面这个例子展示了如何获取一组元素，并遍历它们来修改样式。

    
    
        .box { padding: 10px; margin: 5px 0; background-color: #f0f0f0; border: 1px solid #ccc; }
    


    
    
这是第 1 个提示框
    
这是第 2 个提示框
    
这是第 3 个提示框

    
DOM getElementsByClassName() 演示
    
        // 获取所有包含 ‘info-box‘ 类的元素
        let boxes = document.getElementsByClassName("info-box");

        // 遍历集合并修改样式
        // 注意：boxes 是一个类数组，不能直接使用 forEach()，我们使用 for 循环
        for (let i = 0; i < boxes.length; i++) {
            boxes[i].style.backgroundColor = "lightblue";
            console.log(`元素 ${i} 的内容:`, boxes[i].innerText);
        }
    

#### 实战示例 2：多类名匹配

在实际开发中，我们经常遇到元素具有多个类的情况。这个方法允许我们精确查找同时包含特定类的元素。

    


    
    
目标元素 1 (同时拥有 highlight 和 important)
    
普通高亮元素 (只有 highlight)
    
普通重要元素 (只有 important)

    
        // 只有同时包含 ‘highlight‘ 和 ‘important‘ 的元素会被选中
        let specialItems = document.getElementsByClassName("highlight important");

        console.log("找到的目标元素数量：", specialItems.length); // 输出: 1
        
        if(specialItems.length > 0) {
            specialItems[0].style.border = "2px solid red";
            console.log("已选中特定元素：", specialItems[0]);
        }
    

3. 通过 Name 获取 HTML 元素

这种方法主要用于处理表单元素，如 INLINECODE7dbe9946、INLINECODE9716c77e 或 INLINECODE5f04ed9c。在表单提交时，我们通常需要获取一组具有相同 INLINECODEa9bcabac 属性的值。getElementsByName() 就是为此而生的。

#### 语法

document.getElementsByName(name_value);

• 参数：元素的 name 属性值。
• 返回值：返回一个 NodeList 节点列表。

#### 实战示例：处理单选按钮

这是 getElementsByName 最经典的应用场景：获取用户选中的选项。

    


    
请选择你的编程语言：
    
         JavaScript

         Python

         C++

        提交选择
    
    


    
        function checkValue() {
            // 获取所有 name 为 ‘language‘ 的单选按钮
            let options = document.getElementsByName("language");
            let selectedValue = null;

            // 遍历 NodeList 查找哪个被选中了
            for (let option of options) {
                if (option.checked) {
                    selectedValue = option.value;
                    break;
                }
            }

            let resultDisplay = document.getElementById("result");
            if (selectedValue) {
                resultDisplay.innerHTML = "你选择的是：" + selectedValue + "";
                resultDisplay.style.color = "green";
            } else {
                resultDisplay.innerHTML = "请先选择一个选项！";
                resultDisplay.style.color = "red";
            }
        }
    

4. 通过 TagName 获取 HTML 元素

当你想要操作某种特定类型的所有元素时（例如把页面上所有的段落文字加粗，或者获取所有的链接），getElementsByTagName() 非常有用。

#### 语法

document.getElementsByTagName(tagName);

• 参数：HTML 标签名（如 "div", "p", "a"）。
• 返回值：返回一个 HTMLCollection。

#### 实战示例：操作页面链接

让我们来做一个实用的小工具：获取页面上所有的外部链接，并在控制台中打印出来。

    


    
我的链接收藏夹
    

        
Google
        
Mozilla
        
关于我们
    

    
        // 获取页面上所有的  标签
        let links = document.getElementsByTagName("a");

        console.log(`页面总共有 ${links.length} 个链接`);

        // 将 HTMLCollection 转换为数组以便使用高阶函数（可选）
        let linksArray = Array.from(links);

        linksArray.forEach((link, index) => {
            console.log(`链接 ${index + 1}: ${link.href} - 文本: ${link.innerText}`);
            
            // 实用技巧：自动给所有外部链接添加 target="blank"
            if(link.href.includes("http")) {
                link.target = "_blank";
                link.style.color = "blue"; 
            }
        });
    

document.querySelector(selectors);
document.querySelectorAll(selectors);

    


    

        
这是容器内的第一个段落。
        
这是容器内的第二个段落。
        

            
项目 1
            
项目 2
            
项目 3
        
    

    
        // 1. 使用 querySelector 获取 ID 为 container 下的第一个 p 标签
        let firstPara = document.querySelector("#container p");
        console.log("第一个段落的内容：", firstPara.innerText);

        // 2. 使用 querySelectorAll 获取所有带有 item 类的 li 元素
        let allItems = document.querySelectorAll("ul.item-list li.item");
        console.log(`找到 ${allItems.length} 个列表项`);

        // 3. 结合 CSS 伪类选择器：获取列表中的偶数项
        let evenItems = document.querySelectorAll("ul.item-list li.item:nth-child(even)");
        evenItems.forEach(item => {
            item.style.backgroundColor = "yellow"; // 高亮偶数行
        });

        // 4. 获取具有特定类组合的元素
        // 这比 getElementsByClassName("item active") 更灵活
        let activeItem = document.querySelector("li.item.active");
        if(activeItem) {
            console.log("当前激活的项目是：", activeItem.innerText);
        }
    

// 确保页面加载完成后再执行
document.addEventListener(‘DOMContentLoaded‘, () => {
    let myElement = document.getElementById(‘non-existent-id‘);
    if (myElement) {
        console.log(myElement.innerHTML);
    } else {
        console.log("未找到元素，请检查 ID 是否正确。");
    }
});