DOM节点
回顾之前我写过元素节点的相关操作，但都是关于元素节点的属性或者文本的，今天是关于元素节点本身的操作。
插入节点
在已有的DOM节点中插入新的DOM节点时，有两个需要关心的问题：一个是先得到新的节点，然后把新的节点插入到哪里。分为两种情况
appendChild在末尾（结束标签前）插入节点insertBefore在父节点中任意子节点之前插入新节点cloneNode复制现有的DOM节点，传入参数true会复制所有子节点 首先创建一个节点，然后通过appendChild或insertBefore插入到父元素里面去。
<body>
<input type="button" value="点击">
<div>
<h1>123</h1>
</div>
<script type="text/javascript">
// 点击按钮，创建p放到div里面
const btn = document.querySelector('input');
const div = document.querySelector('div');
const h1 = document.querySelector('h1');
btn.addEventListener('click', function () {
// 创建：document.createElement('标签名')
const newP = document.createElement('p');
// 追加节点：
// 父.appendChild(子);
// div.appendChild(newP);
// newP.innerHTML = '新的内容';
// 插入节点：
// 父.insertBefore(新, 旧);
div.insertBefore(newP, h1);
newP.innerHTML = '哇哈哈';
});
</script>
</body>
- 注意
appendChild和insertBefore可以移动元素节点。
<body>
<ul>
<li><a href="#">111</a></li>
</ul>
<div>
<em>222</em>
</div>
<script>
const a = document.querySelector('a')
const div = document.querySelector('div')
const em = document.querySelector('em')
// div.appendChild(a)
div.insertBefore(a, em)
</script>
</body>
删除节点
删除现有的DOM节点，同时是两个因素：通过父节点来删除子节点，其次是要删除哪个子节点。
removeChild通过父节点来删除子节点
<body>
<input type="button" value="点击">
<div>
<img src="course02.png">
</div>
<p>
</p>
<script type="text/javascript">
// 删除元素：父.removeChild(子);
const btn = document.querySelector('input');
const img = document.querySelector('img');
btn.addEventListener('click', function () {
img.parentNode.removeChild(img);
// document.querySelector('p').appendChild(img)
});
</script>
</body>
查找节点
DOM树中的节点都是相关联的，比如上下级之间的父子关系和同级之间的兄弟关系，我们可以依据节点之间的关系来查找节点。
- 父子关系
childNodes获取全部的子节点，回车换行会被认为是空白的文本节点children只获取元素类型节点
<body>
<div>
<p>段落</p>
<span>哇哈哈</span>
<h1>标题</h1>
</div>
<script type="text/javascript">
const div = document.querySelector('div');
// 查找子节点
// 所有子节点
// console.log( div.childNodes );
// console.log( div.childNodes[0] )
// console.log( div.childNodes[1] )
// 所有元素子节点
console.log( div.children )
</script>
</body>
parentNode获取父节点，通过相对位置查找节点
<body>
<div>
<p>段落</p>
<span>哇哈哈</span>
<h1>标题</h1>
</div>
<script type="text/javascript">
const span = document.querySelector('span');
// 找父节点
console.log( span.parentNode.parentNode.parentNode.parentNode );
</script>
</body>
- 兄弟关系
previousSibling获取前一个节点nextSibling获取后一个节点
<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>
