当前位置：首页 > article >正文

DOM 基础知识

article 2025/9/12 19:48:57

1. 理解DOM

（1）DOM含义

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

（2）DOM树

DOM树是一种结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可识别的树模型，
有了树模型，就有了层级结构。层级结构指的是元素和元素之间的关系父子、兄弟。
总结：
（1）DOM树（标签--节点，整个网页--节点树）
（2）JS会把整个网页变成一棵节点树，可以通过dom去操作节点树。从而对网页的操作。例如：以下代码的DOM树结构如图所示
<html><head><meta charset="utf-8"><title>标题</title></head><body><a href="#">我的链接</a><h1>我的标题</h1></body>
</html>

（3）DOM节点

节点(Node)的类型
① 文档节点：Document 整个文档
② 元素节点：Element html元素
③ 文本节点：Text 文本
④ 注释节点：Comment 注释
⑤ 属性节点：Attr 属性

节点对象属性：
标记、标记属性、标记内子标记对象或文本子对象等DOM节点对象都具有nodeType节点类型、nodeName节点名称和nodeValue节点值三个通用属性。

注意：
① 文本区域标记（textarea）的文本节点应使用value属性，若用nodeValue属性很容易出错。
② 可以通过直接赋值为任意节点对象添加任意类型的属性

节点类型	nodeValue	nodeType	nodeName
文档节点：Document 整个文档	null	9	#document
元素节点：Element html元素	null	1	大写标签名
文本节点：Text 文本	文本内容	3	#text
注释节点：Comment 注释		8
属性节点：Attr 属性	属性值	2	属性名

2. 获取元素节点

（1）根据id获取

语法规范：document.getElementById(id名称);// 返回的是一个节点对象
注意：获取指定的id，获取的元素是唯一的。代码示例：<body><button id="btn">按钮</button><script>let btn = document.getElementById('btn');console.log(btn);</script></body>

（2）根据name获取

语法规范：document.getElementsByName(name名称);//返回的是一个数组
注意：
（1）这个方法不论获取几个元素都是伪数组的形式。
（2）如果页面没有这个元素，则返回的是空的伪数组代码示例：<body><button  name="btn">按钮</button><script>let btn = document.getElementsByName('btn');console.log(btn);</script></body>

（3）根据className获取

语法规范：document.getElementsByClassName(class名称);// 返回的是一个数组 代码示例：<body><button class="btn">按钮</button><script>let btn = document.getElementsByClassName('btn');console.log(btn);</script></body>

（4）根据tagName获取

语法规范：document.getElementsByTagName(标签名);//返回的是一个数组代码示例：<body><button>按钮</button><script>let btn = document.getElementsByTagName('button');console.log(btn);</script></body>

（5）根据选择器获取

语法规范：document.querySelector()        // 返回一个dom节点对象，没有返回Nulldocument.querySelectorAll()    // 回的是一个数组，没有返回空数组 代码示例1：<body><ul><li>1</li><li>2</li><li>3</li></ul><script>// js获取元素let li = document.querySelector('ul li:last-child');console.log(li);</script></body>代码示例2：
<body><ul><li>1</li><li>2</li><li>3</li></ul><script>// js获取元素let li = document.querySelectorAll('ul li')console.log(li)</script>
</body>

3. 获取元素节点相关的其它节点

（1）获取上一个节点

语法格式：previousSibling: 返回当前节点的上一个节点previousElementSibling:返回当前节点的上一个元素节点代码示例：<body><ul class="list"><li>1</li><li>2</li><li>3</li></ul><script>// js获取元素let list = document.querySelector('.list');// 返回当前节点的上一个节点console.log(list.previousSibling);// 返回当前节点的上一个元素节点console.log(list.children[1].previousElementSibling);   </script></body>

（2）获取下一个节点

语法格式：nextSibling:返回当前的节点下一个节点nextElementSibling:返回当前节点的下一个元素节点代码示例：<body><ul class="list"><li>1</li><li>2</li><li>3</li></ul><script>// js获取元素let list = document.querySelector('.list');// 返回当前节点的下一个节点console.log(list.nextSibling);// 返回当前节点的下一个元素节点console.log(list.children[1].nextElementSibling);</script></body>

（3）获取子节点的方法

语法格式：childNodes:返回当前节点的所有子节点 children:返回当前节点的所有元素子节点firstChild:返回当前节点的第一个子节点lastChild:返回当前节点的最后一个子节点  firstElementChild:返回当前节点的第一个元素子节点lastElementChild:返回当前节点的最后一个元素子节点  代码示例：
<body><ul class="list"><li>1</li><li>2</li><li>3</li></ul><script>// js获取元素let list = document.querySelector('.list');// 返回当前节点的所有子节点console.log(list.childNodes);// 返回当前节点的所有元素子节点console.log(list.children);// 返回当前节点的第一个子节点console.log(list.firstChild);// 返回当前节点的最后一个子节点console.log(list.lastChild);// 返回当前节点的第一个元素子节点console.log(list.firstElementChild);// 返回当前节点的最后一个元素子节点  console.log(list.lastElementChild);</script>
</body>

（4）获取父节点的方法

语法格式： parentNode:返回当前节点的父节点;代码示例：<body><ul class="list"><li>1</li><li>2</li><li>3</li></ul><script>// js获取元素let list = document.querySelector('.list');// 返回当前节点的父节点console.log(list.children[1].parentNode);</script></body>

4. 创建节点

语法格式：1，生成节点的方法：document.createElement("div");2，插入节点：父元素.appendChild(新节点);　　//在父元素的子节点后面插入新节点3，在指定位置插入新的节点父元素.inSertBefore(新节点;谁的前面)　　//将新节点插入指定元素前面4，删除元素节点：父元素.removerChild();

5. 设置/修改DOM元素内容

（1）document.write()方法

注意：只能将文本内容追加到</body>前面的位置；文本中包含的标签会被解析。代码示例：// 永远都只是追加操作，而且只能在位置</body>前<script>document.write('hello world');document.write('<h3>你好，世界！</h3>');</script>

（2）元素.innerText属性

注意：将文本内容添加/更新到任意标签位置；文本中包含的标签不会被解析。代码示例：<div>粉红色的回忆</div><script>// 获取标签(元素)let box = document.querySelector('div')// 修改标签(元素)内容  box是对象 innerText是属性// 语法格式：对象.属性 = 值box.innerText = '<h1>有点儿意思~</h1>'// innerText不识别标签</script>

（3）元素.innerHTML属性

注意：将文本内容添加/更新到任意标签位置；         文本中包含的标签会被解析。代码示例：<div>粉红色的回忆</div><script>// 获取标签(元素)let box = document.querySelector('div')// 修改标签(元素)内容  box是对象 innerHTML是属性// 语法格式：对象.属性 = 值box.innerHTML = '<strong>我很棒</strong>'// innerHTML可以识别标签</script>

（4）综合案例

// 随机抽取的名字显示到指定的标签内部
抽中的选手是：<span></span><script>//   获取元素let box = document.querySelector('span')// 得到随机数function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}// 声明一个数组let arr = ['张云', '黄总', '卢布', '马超', '刘恩', '冠宇', '张飞']// 生成一个随机数 作为数组的索引号let random = getRandom(0, arr.length - 1)// 写入标签内部box.innerHTML = arr[random]//删除已经点到名字的同学名字arr.splice(random, 1)</script>

6. 设置/修改DOM元素内容

（1）设置/修改元素常用属性

注意：还可以通过JS设置/修改标签元素属性，比如通过src更换图片最常见的属性比如: href、title、src等语法格式：对象.属性 = 值代码示例：<img src="../image/1.jpg" alt=""><script>// 获取图片元素let pic = document.querySelector('img')// 修改元素属性  srcpic.src = '../image/2.jpg'pic.title = '我的最爱'</script>

（2）设置/修改元素样式属性

注意：还可以通过JS设置/修改标签元素的样式属性；比如通过轮播图小圆点自动更换颜色样式；点击按钮可以滚动图片，这是移动的图片的位置left等。

① 通过 style 属性操作CSS

语法格式：对象.style.样式属性 = 值
注意：修改样式通过style属性引出；如果属性有 - 连接符，需要转换为小驼峰命名法；赋值的时候，需要的时候不要忘记加css单位。代码示例：<div> </div><script>// 获取元素let box = document.querySelector('div')//改变背景颜色 样式 stylebox.style.backgroundColor = 'hotpink'// 改变盒子宽度box.style.width = '200px'</script>

② 操作类名(className) 操作CSS

语法格式：元素.className = 'active'     // active是一个CSS类名
注意：由于class是关键字，所以使用className代替；className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名；如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。代码示例：
<head>  <style>div {width: 10px;height: 10px;background-color: pink;}.active {width: 100px;height: 100px;background-color: skyblue;}</style>
</head><body><div></div><script>let box = document.querySelector('div')box.className = 'active'</script>
</body>

③ 通过 classList 操作类控制CSS

语法：追加一个类：元素.classList.add('类名')删除一个类：元素.classList.remove('类名')切换一个类：元素.classList.toggle('类名')
注意：为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。代码示例：
<body><div>粉红色的回忆</div><script>// 获取元素let box = document.querySelector('div')// add是个方法 添加 追加box.classList.add('active')// remove() 移除 类box.classList.remove('one')// 切换类  有就删除 没有就添加box.classList.toggle('one')</script>
</body>

（3）设置/修改表单元素属性

语法格式：获取：DOM对象.属性名设置：DOM对象.属性名=新值代码示例：<input type="text" value="请输入你的密码："><script>// 获取元素let input = document.querySelector('input')// 修改属性值input.value = '小米手机'// 设置属性值input.type = 'password'</script>

表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示。
如果为true代表添加了该属性，如果是false代表移除了该属性。
比如: disabled、 checked、selected。代码示例：
<body><button disabled>确定</button><input type="text" value="请输入文字："><input type="checkbox" class="agree"><script>// 获取元素let btn = document.querySelector('button')// 让按钮启用btn.disabled = false// 勾选复选框let checkbox = document.querySelector('.agree')checkbox.checked = true</script>
</body>