一、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 应用打下坚实基础。无论是初学者还是有一定经验的开发者,都能从中获得实用的知识和技巧。
欢迎到评论区一起讨论~