DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML 文档交互的 API。DOM 是载入到浏览器中的文档模型,以节点树的形式来表现文档,每个节点代表文档的构成部分(例如:页面元素、字符串或注释等等)。
DOM 是万维网上使用最为广泛的 API 之一,因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建,移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。
DOM 并不是天生就被规范好了的,它是浏览器开始实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在,WHATWG 维护 DOM 现存标准。
一、插入和复制
在已有的 DOM 节点中插入新的 DOM 节点时,需要关注两个关键因素:首先要得到新的 DOM 节点,其次在哪个位置插入这个节点。
如下代码演示:
<body>
<h3>插入节点</h3>
<p>在现有 dom 结构基础上插入新的元素节点</p>
<hr>
<!-- 普通盒子 -->
<div class="box"></div>
<!-- 点击按钮向 box 盒子插入节点 -->
<button class="btn">插入节点</button>
<script>
// 点击按钮,在网页中插入节点
const btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
// 1. 获得一个 DOM 元素节点
const p = document.createElement('p')
p.innerText = '创建的新的p标签'
p.className = 'info'
// 复制原有的 DOM 节点
const p2 = document.querySelector('p').cloneNode(true)
p2.style.color = 'red'
// 2. 插入盒子 box 盒子
document.querySelector('.box').appendChild(p)
document.querySelector('.box').appendChild(p2)
})
</script>
</body>
结论:
-
createElement
动态创建任意 DOM 节点 -
cloneNode
复制现有的 DOM 节点,传入参数 true 会复制所有子节点 -
appendChild
在末尾(结束标签前)插入节点 -
再来看另一种情形的代码演示:
<body>
<h3>插入节点</h3>
<p>在现有 dom 结构基础上插入新的元素节点</p>
<hr>
<button class="btn1">在任意节点前插入</button>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<script>
// 点击按钮,在已有 DOM 中插入新节点
const btn1 = document.querySelector('.btn1')
btn1.addEventListener('click', function () {
// 第 2 个 li 元素
const relative = document.querySelector('li:nth-child(2)')
// 1. 动态创建新的节点
const li1 = document.createElement('li')
li1.style.color = 'red'
li1.innerText = 'Web APIs'
// 复制现有的节点
const li2 = document.querySelector('li:first-child').cloneNode(true)
li2.style.color = 'blue'
// 2. 在 relative 节点前插入
document.querySelector('ul').insertBefore(li1, relative)
document.querySelector('ul').insertBefore(li2, relative)
})
</script>
</body>
结论:
-
createElement
动态创建任意 DOM 节点 -
cloneNode
复制现有的 DOM 节点,传入参数 true 会复制所有子节点 -
insertBefore
在父节点中任意子节点之前插入新节点
二、删除节点
关注两个因素:首先由父节点删除子节点,其次是要删除哪个子节点。
<body>
<!-- 点击按钮删除节点 -->
<button>删除节点</button>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Web APIs</li>
</ul>
<script>
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
// 获取 ul 父节点
let ul = document.querySelector('ul')
// 待删除的子节点
let lis = document.querySelectorAll('li')
// 删除节点
ul.removeChild(lis[0])
})
</script>
</body>
结论:removeChild
删除节点时一定是由父子关系。
三、查找节点
DOM 树中的任意节点都不是孤立存在的,它们要么是父子关系,要么是兄弟关系,不仅如此,我们可以依据节点之间的关系查找节点。
父子关系
<body>
<button class="btn1">所有的子节点</button>
<!-- 获取 ul 的子节点 -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript 基础</li>
<li>Web APIs</li>
</ul>
<script>
const btn1 = document.querySelector('.btn1')
btn1.addEventListener('click', function () {
// 父节点
const ul = document.querySelector('ul')
// 所有的子节点
console.log(ul.childNodes)
// 只包含元素子节点
console.log(ul.children)
})
</script>
</body>
结论:
-
childNodes
获取全部的子节点,回车换行会被认为是空白文本节点 -
children
只获取元素类型节点<body> <table> <tr> <td width="60">序号</td> <td>课程名</td> <td>难度</td> <td width="80">操作</td> </tr> <tr> <td>1</td> <td><span>HTML</span></td> <td>初级</td> <td><button>变色</button></td> </tr> <tr> <td>2</td> <td><span>CSS</span></td> <td>初级</td> <td><button>变色</button></td> </tr> <tr> <td>3</td> <td><span>Web APIs</span></td> <td>中级</td> <td><button>变色</button></td> </tr> </table> <script> // 获取所有 button 节点,并添加事件监听 const buttons = document.querySelectorAll('table button') for(let i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', function () { // console.log(this.parentNode); // 父节点 td // console.log(this.parentNode.parentNode); // 爷爷节点 tr this.parentNode.parentNode.style.color = 'red' }) } </script> </body>
结论:
parentNode
获取父节点,以相对位置查找节点,实际应用中非常灵活。
兄弟关系
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript 基础</li>
<li>Web APIs</li>
</ul>
<script>
// 获取所有 li 节点
const lis = document.querySelectorAll('ul li')
// 对所有的 li 节点添加事件监听
for(let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function () {
// 前一个节点
console.log(this.previousSibling)
// 下一下节点
console.log(this.nextSibling)
})
}
</script>
</body>
结论:
-
previousSibling
获取前一个节点,以相对位置查找节点,实际应用中非常灵活。 -
nextSibling
获取后一个节点,以相对位置查找节点,实际应用中非常灵活。