DOM节点的相关操作

---

前言

提示：

---

提示：以下是本篇文章正文内容

一、DOM的节点操作

1.创建dom节点

代码如下（示例）：

var img=document.createElement('img')
	img.src='img/1.png'
	console.log(img)

2.末尾插入dom节点

代码如下（示例）：

document.body.appendChild(img)
document.querySelector('.box1')appendChild(img)

3.参照之前插入dom节点

代码如下（示例）：

document.querySelector('.box1')..insertBefore(img,document.querySelector)
document.body.insertBefore(img,document.querySelector('h1')))

4.末尾插入dom节点

代码如下（示例）：

document.body.appendChild(img.cloneNode(ture))
document.body.insertBefore(img,document.querySelector('h1'))

Ture 深度拷贝每层都克隆 默认浅度 ,浅克隆只克隆第一层标签

5.删除dom节点

代码如下（示例）：

document.querySelector('h1').remove()

6.替换dom节点

代码如下（示例）：

document.body.replaceChild(img,document.querySelector())
document.querySelector('h1').replaceChild()

7.获得一个父dom节点

代码如下（示例）：

document.body.appendChild(img)
document.querySelector('.box1')appendChild(img)

8.获得子节点

代码如下（示例）：

获得所有孩子
document.querySelector('box1').children
获得第一个直接孩子
document.querySelector('box1').firstElementChild
获得最后一个孩子			
document.querySelector('box1').lastElementChild
下一个兄弟节点
document.querySelector('box1').nextElementSibling
前一个兄弟节点
document.querySelector('box1').previousElementSibling

---