一篇文章帮你搞定DOM基础！！！
（一）定义
DOM（Document Object Model，文档对象模型）是浏览器将 HTML/XML 文档解析后生成的树形对象模型—— 简单说，浏览器把 HTML 里的每一个标签、文本、属性都转换成了JS能 “摸到” 的对象，这些对象组成了一棵 “DOM 树”。
而DOM 操作，就是通过JavaScript来访问、修改、添加、删除这棵树上的节点（元素、文本、属性等）的过程。
用一句话来形象地表达：把 HTML 页面看作一栋房子，DOM 就是这栋房子的 “户型图”，DOM 操作就是你根据户型图去改造房子（比如拆一面墙、刷漆、加家具）。
（二）简单例子
<!-- HTML 结构 -->
<div id="box">
<p>Hello DOM</p>
</div>浏览器解析后生成的DOM树简化结构：
Document（根节点）
└── html
├── head
└── body
└── div（id="box"，元素节点）
└── p（元素节点）
└── "Hello DOM"（文本节点）JS 的 DOM 操作，就是对这棵树上的div、p、文本等节点做操作。
（三）DOM Nodes
在HTML文档中所有内容都是节点： 整个文档是一个文档节点、每个HTML元素是元素节点、HTML元素内的文本是文本节点、每个HTML属性是属性节点、注释是注释节点
HTML DOM将HTML文档视作树结构，这种结构被称为节点树，在节点树中的节点批次拥有层级关系：
我们常用父、子、同胞等术语来描述这些关系，父节点拥有子节点，同级的子节点被称为同胞 / 兄弟；
用一个例子来清晰的了解节点
<html>
<head>
<title>DOM 节点教程</title>
</head>
<body>
<h1>DOM 节点课程1</h1>
<p>Hello world!</p>
</body>
</html><html> 节点：没有父节点，它是根节点；且拥有两个子节点：<head> 和 <body>
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点
还有很多关系，大家能看出来即可，就不一一列举了
（四）DOM四大操作
一、查找 / 访问DOM节点
目的：找到页面中想要操作的元素
常用方法：
| 方法 | 作用 | 示例 |
|---|---|---|
document.getElementById(id) |
根据 ID 查找元素（返回单个元素） | let box = document.getElementById("box"); |
document.getElementsByClassName(class) |
根据类名查找（返回伪数组） | let items = document.getElementsByClassName("item"); |
document.getElementsByTagName(tag) |
根据标签名查找（返回伪数组） | let ps = document.getElementsByTagName("p"); |
document.querySelector(selector) |
CSS 选择器查找（返回第一个匹配元素） | let firstItem = document.querySelector(".item"); |
document.querySelectorAll(selector) |
CSS 选择器查找（返回所有匹配元素） | let allItems = document.querySelectorAll(".item"); |
注意：querySelector/querySelectorAll 是 ES5 新增的，语法和 CSS 选择器完全一致，是现在最推荐的写法。
二、修改DOM节点（最常用）
目的：找到节点后，修改它的内容、样式、属性等
1.修改内容
| 方法 / 属性 | 作用 | 示例 |
|---|---|---|
innerText |
修改 / 获取元素的纯文本（忽略 HTML） | box.innerText = "新的纯文本"; |
innerHTML |
修改 / 获取元素的HTML 内容（解析标签） | box.innerHTML = "<span>带标签的内容</span>"; |
2.修改样式
通过style属性操作行内样式，或者通过 classList 操作类名：
// 方式1：直接改行内样式（优先级高，不推荐大量用）
box.style.color = "red";
box.style.fontSize = "20px";
// 方式2：通过类名修改（符合样式分离原则，推荐）
box.classList.add("active"); // 添加类
box.classList.remove("active"); // 移除类
box.classList.toggle("active"); // 切换类（有则删，无则加）3.修改属性
| 方法 / 属性 | 作用 | 示例 |
|---|---|---|
element.getAttribute(attr) |
获取元素属性值 | let src = img.getAttribute("src"); |
element.setAttribute(attr, value) |
设置元素属性值 | img.setAttribute("src", "new-pic.jpg"); |
element.prop（直接操作固有属性） |
操作元素内置属性（如 checked、disabled） | btn.disabled = true; // 禁用按钮 |
三、添加 / 创建DOM节点
目的：往页面中新增元素
核心步骤：创建节点--->把节点添加到DOM树中
| 方法 | 作用 |
|---|---|
document.createElement(tag) |
创建新的元素节点（如 div、li） |
parent.appendChild(child) |
把新节点添加到父节点的最后 |
parent.insertBefore(new, target) |
把新节点插入到目标节点前面 |
// 1. 创建一个新的 li 元素
var newLi = document.createElement("li");
// 2. 给 li 设置内容
newLi.innerText = "新的列表项";
// 3. 找到父节点（ul）
var ul = document.querySelector("ul");
// 4. 把 li 添加到 ul 最后
ul.appendChild(newLi);
// 进阶：插入到第一个 li 前面
var firstLi = ul.querySelector("li");
ul.insertBefore(newLi, firstLi);四、删除DOM节点
目的：移除页面中不需要的元素
| 方法 | 作用 | 示例 |
|---|---|---|
parent.removeChild(child) |
父节点删除子节点（需先找到父节点） | ul.removeChild(firstLi); |
element.remove() |
元素自身删除（ES6 新增，更简洁） | firstLi.remove(); |
（五）DOM操作的实际意义
实现页面动态交互：比如点击按钮显示/隐藏内容、输入框实时校验、加载数据后更新页面；
前端框架的底层基础：Vue/React 看似不用手写 DOM 操作，但框架内部本质还是封装了 DOM 操作（虚拟 DOM 最终还是要映射到真实 DOM）；
所有前端交互的核心：比如表单提交、轮播图、弹窗、下拉菜单，本质都是 DOM 操作。
（六）小舟有话说
定义就记住一句话：DOM 操作是 JS 对 HTML 解析生成的 “DOM 树” 进行查找、修改、添加、删除节点的过程，是前端实现页面交互的基础
在前端系列还会有很多文章，看似只需要学习HTML+CSS+JS，实际上还有更深入的知识，不要着急，我会慢慢更新的
如果喜欢的话，麻烦点点关注，下次找我不迷路~
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
15
0- 0
已为社区贡献1条内容
所有评论(0)