插入节点
怎么插？如何插？
通过创建一个新的节点进行插入 我们通过代码来解释
<body>
<h3>插入节点</h3>
<p>在现有的dom结构基础上插入新的元素节点</p>
<hr>
<div class="box"></div>
<button class="btn">插入节点</button>
<script>
// 插入
const btn = document.querySelector('.btn');
btn.addEventListener('click',function () {
// 获取元素节点
const p = document.createElement('p')
p.innerText = 'P标签';
p.className = 'info'
// 复制原有的dom节点
const p1 = document.querySelector('p')
p1.cloneNode(true)
p1.style.color = 'red';
// 插入该盒子
document.querySelector('.box').appendChild(p);
document.querySelector('.box').appendChild(p1);
})
</script>
</body>
小结：
-
createElement() 动态创建任意的DOM节点
-
cloneNode() 该方法复制现有的DOM节点，通过传入参数true会复制所有子节点
-
appendChild() 在末尾也就是标签结束前插入节点
-
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');
// 获取li的所有节点
let lis = document.querySelectorAll('li')
// 删除节点
ul.removeChild(lis[0])
})
</script>
小结
-
removeChild() 该方法删除节点时一定存在父子关系
查找结点
<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 只获取元素类型节点
