body代码
<div class="box">
<p>我是通过 HTML 手写出来的 P 标签</p>
</div>
操作 DOM 节点,常规意义上 '增删改查'
在向页面增加一个节点, 首先, 你应该先 有一个节点
操作分类:
- 在 JS 中创建一个节点
语法:
document.createElement('要创建的标签名')
2. 向页面增加一个节点 语法1:
元素.appendChild(要添加的节点)
作用: 向元素的末尾追加一个节点 语法2:
元素.insertBefore(要插入的节点, 插入到那个节点的前面)
注意: 两个参数都是必填项
第二个参数传递正常节点时, 代表插入到这个节点的前面
第二个参数传递的是 null 时, 表示插入到 "元素" 的末尾
0. 获取元素
var myDiv = document.getElementsByClassName('box')[0]
var oP = document.querySelector('p')
1.1 创建一个元素节点
var oDiv = document.createElement('div')
var oSpan = document.createElement('span')
1.2 创建一个文本节点 (了解)
var oText = document.createTextNode('我是通过 JS 创建出来的文本节点')
1.3 将刚才创建的文本节点, 添加到元素节点内 元素.appendChild(要添加的节点)
oDiv.appendChild(oText)
oSpan.innerText = '我是通过 innerText 直接赋值的字符串'
2. 向页面中增加一个节点
2.1 元素.appendChild(要添加的节点)
myDiv.appendChild(oDiv)
myDiv.appendChild(oSpan)
2.2 元素.insertBefore(要插入的节点, 插入到那个节点的前面)
myDiv.insertBefore(oDiv, oP) // 将我们通过 JS 创建的 div 标签, 插入到页面的 P 标签前边
myDiv.insertBefore(oSpan, null) // 第二个参数传递 null 代表插入到 '元素' 的末尾
body代码
<div class="box">
<p>我是第一个 P 标签</p>
<p>我是第二个 P 标签</p>
</div>
0. 获取节点
var box = document.querySelector('.box')
var oP = document.querySelector('p') // 满足条件的第一个 p 标签
3. 删除页面某一个节点
语法1:
父节点.removeChild('要删除的子节点')
语法2:
节点.remove()
代码
box.removeChild(oP)
box.remove()
4. 修改页面的某一个节点
语法:
父节点.replaceChild('新节点', '旧节点/要被修改的节点')
作用: 将页面中的某一个节点 做一个替换
var oSpan = document.createElement('span') // 创建一个 span 标签
oSpan.innerText = '我是通过 JS 创建出来的 SPAN 标签' // 给 span 标签添加文字
box.replaceChild(oSpan, oP) // 用刚刚创建出来的 span 标签, 替换 原本的 p 标签
5. 获取页面的某一个节点
之前获取元素的方法
6. 克隆一个节点 (把一个节点复制出一个一摸一样的)
语法:
节点.cloneNode(参数)
参数: 默认是 false, 表示不克隆后代节点
选填是 true, 表示克隆后代节点
var cloneP = oP.cloneNode() // 克隆出来一个和 oP 这个节点 一摸一样的 新节点 不包含后代节点
var cloneP = oP.cloneNode(true) // 克隆出来一个和 oP 这个节点 一摸一样的 新节点 包含后代节点
box.appendChild(cloneP)
延申扩展
box.appendChild(oP)
错误理解: 将 oP 这个节点, 添加到 box 的末尾, 然后页面就有 3 个 P标签了
正确理解: 将 oP 这个节点, 添加到 box 的末尾
因为 DOM 节点在页面中只会具有一个(核心)
所以这一步相当于将 原本排列在 box 内部第一个的 p 标签, 移动到了 box 内部的 最后一个
