JavaScript DOM操作实战指南：从元素获取到事件处理全解析

Ch1oy

已于 2025-03-21 17:49:44 修改

阅读量845

点赞数 14

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript 前端 html5

于 2025-03-18 16:08:18 首次发布

本文链接：https://blog.youkuaiyun.com/Ccwlwlbb51522/article/details/146339539

一、DOM操作基础认知

1.1 什么是DOM？

文档对象模型（Document Object Model）是浏览器将HTML文档转换为树形结构的编程接口。每个HTML标签对应一个节点对象，开发者可以通过JavaScript操作这些节点实现页面动态更新。DOM操作包含三个核心方向：元素获取、内容修改和事件交互。

1.2 元素的获取

① ID精准定位：通过元素的id属性进行唯一性查找

使用方法：document.getElementById('idName')

特点：

返回单个元素对象
查找速度最快（浏览器优化机制）
严格区分大小
适用场景：快速定位导航栏、页头/页脚等唯一元素

示例：

// ID精准定位（返回单个元素）
const header = document.getElementById('main-header');

② 类名批量获取：获取相同类名的元素组

使用方法：document.getElementsByClassName('className')

特点：

返回动态HTMLCollection（实时更新）
支持多类名查询（空格分隔）

示例：

// 类名批量获取（返回动态集合）
const cards = document.getElementsByClassName('card');

③ CSS选择器查询：用于复杂条件下的元素定位

使用方法：

document.querySelector() ：获取首个匹配元素

document.querySelectorAll() ：获取所有匹配元素

特点：

支持完整CSS选择器语法
返回静态NodeList（适合循环操作）

示例：

// 获取单个元素（首个匹配项）
const btn = document.querySelector('.submit-btn');

// 获取多个元素（静态集合）
const navLinks = document.querySelectorAll('nav a');

二、内容操作的三大核心属性

1. innerText：纯文本处理

特性：

仅处理可见文本，忽略HTML标签
自动合并空白符和换行
触发重排（性能敏感场景慎用）

使用场景：

显示用户输入的纯文本内容
动态更新按钮文字

示例：

<div class="box">你好，世界！</div>

//先获取box元素
  var box = document.querySelector('.box');
  console.log(box);//打印出 你好，世界！
//修改其内容直接赋值
   var newbox = box.innerText = "Hello World!"
   console.log(newbox);//打印出 Hello World!

2. innerHTML：HTML解析引擎

特性：

可插入完整的HTML代码片段
自动解析并生成DOM节点
存在XSS攻击风险（需转义用户输入）

使用场景：

动态加载模板内容
第三方富文本编辑器集成

示例：

<div class="div1">你好博主</div>

var div1 = document.querySelector('.div1');
div1.innerHTML = div1.innerHTML + '<a href="https://www.baidu.com">百度</a>'; //增加的是超链接，而不是文字内容

3. value：表单元素专用

适用范围：

<input>
<textarea>
<select>

特性：

实时反映用户输入值
支持文本/数字/布尔值的获取与设置

示例：

 <input type="text" class="input1" placeholder="请输入您想说的话...">

 console.log(input1.value);//输出input单行输入框的值

三、样式操作的两种范式

1. 行内样式操作

方法：通过style属性直接修改

element.style.属性 = 属性值（注意：属性值为String类型）

特点：

优先级最高（覆盖CSS样式）
适合动态计算样式值

示例：

const progressBar = document.querySelector('.progress');
// 单个属性设置
progressBar.style.width = "100px";

2. 类名控制

方法：通过classList伪数组来进行增加样式或者移除

方法列表：

add()：添加类
remove()：移除类
toggle()：切换类
replace()：替换类

特点：

维护性更好
支持多类名独立操作

示例：

<div class="div3">优快云</div>
<div class="div4" onclick="div4Click()">点击更改div3的样式</div>


 var div3 = document.querySelector('.div3');
 funion div4Click(){

   if(div3.classList.contains('div666')){
      div3.classList.remove('div666')
   }else{
      div3.classList.add('div666')
    }
   }

四、自定义属性操作

在 JavaScript 中，setAttribute 和 getAttribute 是用于操作 HTML 元素属性的常用方法。它们允许你动态地设置和获取元素的属性值。

1. `setAttribute` 方法

setAttribute 方法用于为 HTML 元素设置一个属性。如果该属性已经存在，则更新其值；如果不存在，则添加该属性。

语法：element.setAttribute(name, value);

name: 要设置的属性名称（字符串）。
value: 要设置的属性值（字符串）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setAttribute Example</title>
</head>
<body>
    <div id="myDiv">这是一个div元素</div>

    <script>
        // 获取元素
        const divElement = document.getElementById('myDiv');

        // 设置元素的 class 属性
        divElement.setAttribute('class', 'container');

        // 设置元素的 title 属性
        divElement.setAttribute('title', '这是一个提示');

        // 设置自定义属性
        divElement.setAttribute('data-custom', '12345');
    </script>
</body>
</html>

2. `getAttribute` 方法

getAttribute 方法用于获取 HTML 元素的指定属性值。如果该属性不存在，则返回 null。

语法：element.getAttribute(name);

name: 要获取的属性名称（字符串）。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getAttribute Example</title>
</head>
<body>
    <div id="myDiv" class="container" title="这是一个提示" data-custom="12345">这是一个div元素</div>

    <script>
        // 获取元素
        const divElement = document.getElementById('myDiv');

        // 获取 class 属性值
        const className = divElement.getAttribute('class');
        console.log('Class:', className); // 输出: Class: container

        // 获取 title 属性值
        const title = divElement.getAttribute('title');
        console.log('Title:', title); // 输出: Title: 这是一个提示

        // 获取自定义属性 data-custom 的值
        const customData = divElement.getAttribute('data-custom');
        console.log('Custom Data:', customData); // 输出: Custom Data: 12345

        // 获取不存在的属性
        const nonExistentAttr = divElement.getAttribute('non-existent');
        console.log('Non-existent Attribute:', nonExistentAttr); // 输出: Non-existent Attribute: null
    </script>
</body>
</html>

3. 注意事项

属性名大小写敏感：setAttribute 和 getAttribute 方法对属性名是大小写敏感的。例如，class 和 CLASS 被视为不同的属性。
布尔属性：对于布尔属性（如 disabled、checked 等），setAttribute 会将属性值设置为字符串 "true" 或 "false"，而不是布尔值 true 或 false。

const inputElement = document.createElement('input');
inputElement.setAttribute('disabled', 'true'); // 设置 disabled 属性
console.log(inputElement.getAttribute('disabled')); // 输出: "true"

五、事件绑定的三种方式

在 JavaScript 中，事件绑定是将用户操作（如点击、鼠标移动、键盘输入等）与 JavaScript 函数关联起来的过程。常见的事件绑定方式有三种：

1. HTML 事件属性（内联事件绑定）

直接在 HTML 元素中使用事件属性（如 onclick、onmouseover 等）来绑定事件处理函数。

语法：<element 事件属性="JavaScript代码或函数调用">

特点：

简单直接，适合快速测试。
将 JavaScript 代码与 HTML 混合在一起，不利于代码维护和分离。
只能绑定一个事件处理函数，后续绑定会覆盖之前的绑定。

示例：

    <button onclick="alert('按钮被点击了！')">点击我</button>
    <button onclick="handleClick()">点击我调用函数</button>

    <script>
        function handleClick() {
            alert('按钮被点击了，调用了 handleClick 函数！');
        }
    </script>

2. DOM 属性绑定

通过 JavaScript 直接操作 DOM 元素的属性（如 onclick、onmouseover 等）来绑定事件处理函数。

语法：element.事件属性 = 函数;

特点：

将 JavaScript 代码与 HTML 分离，便于维护。
只能绑定一个事件处理函数，后续绑定会覆盖之前的绑定。
适合简单场景，但不适合需要绑定多个事件处理函数的情况。

示例：

     <button id="myButton">点击我</button>

    <script>
        // 获取元素
        const button = document.getElementById('myButton');

        // 绑定事件处理函数
        button.onclick = function() {
            alert('按钮被点击了！');
        };

        // 绑定另一个事件处理函数（会覆盖之前的绑定）
        button.onclick = function() {
            alert('新的点击事件处理函数！');
        };
    </script>

3. `addEventListener` 方法

使用 addEventListener 方法为元素绑定事件处理函数。这是最推荐的方式，因为它支持绑定多个事件处理函数，且更灵活。

语法：element.addEventListener(事件类型, 事件处理函数, 是否使用捕获);

事件类型：字符串，表示事件类型（如 "click"、"mouseover" 等）。
事件处理函数：事件触发时执行的函数。
是否使用捕获：布尔值，可选参数，默认为 false（表示使用冒泡阶段）。如果为 true，则表示使用捕获阶段。

特点：

支持绑定多个事件处理函数，不会覆盖之前的绑定。
更灵活，可以指定事件捕获或冒泡阶段。
推荐使用，适合复杂的交互场景。

示例：

    <button id="myButton">点击我</button>

    <script>
        // 获取元素
        const button = document.getElementById('myButton');

        // 绑定第一个事件处理函数
        button.addEventListener('click', function() {
            alert('第一个事件处理函数被触发！');
        });

        // 绑定第二个事件处理函数
        button.addEventListener('click', function() {
            alert('第二个事件处理函数被触发！');
        });

        // 绑定鼠标移入事件
        button.addEventListener('mouseover', function() {
            console.log('鼠标移入按钮！');
        });
    </script>

三种方式的对比

方式	优点	缺点	适用场景
HTML 事件属性	简单直接，适合快速测试	代码耦合，不利于维护；只能绑定一个函数	简单测试
DOM 属性绑定	代码分离，便于维护	只能绑定一个函数	简单场景
`addEventListener`	支持多个函数绑定，灵活，推荐使用	语法稍复杂	复杂交互场景

总结

本篇博客从基础到进阶，详细讲解了 JavaScript 中 DOM 操作的各个方面，包括元素获取、内容操作、样式控制、自定义属性操作以及事件绑定。通过学习这些内容，读者可以掌握如何动态操作网页内容、样式和交互行为，为构建复杂的 Web 应用打下坚实基础。无论是初学者还是有一定经验的开发者，都能从中获得实用的知识和技巧。

欢迎到评论区一起讨论~