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

一、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 被视为不同的属性。

  • 布尔属性:对于布尔属性(如 disabledchecked 等),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 元素中使用事件属性(如 onclickonmouseover 等)来绑定事件处理函数。

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

特点:

  • 简单直接,适合快速测试。

  • 将 JavaScript 代码与 HTML 混合在一起,不利于代码维护和分离。

  • 只能绑定一个事件处理函数,后续绑定会覆盖之前的绑定。

示例:

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

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

2. DOM 属性绑定

通过 JavaScript 直接操作 DOM 元素的属性(如 onclickonmouseover 等)来绑定事件处理函数。

语法: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 应用打下坚实基础。无论是初学者还是有一定经验的开发者,都能从中获得实用的知识和技巧。

欢迎到评论区一起讨论~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值