前端学习笔记-8-关于DOM节点的理解

开门见山

什么是DOM节点？

DOM树里每一个内容都是DOM节点

DOM分类

元素节点：div、a、p、span等标签

属性节点：class属性

文字节点：比如标签里的文字

DOM树节点图示：

注：HTML是根节点，document不是

怎么操作节点？

查找节点

父节点查找

子元素.parentNode

子节点查找(获取到的是个伪数组)

父元素.children

兄弟节点查找

上一个兄弟节点：

兄弟节点.previousElementSibling

下一个兄弟节点：

兄弟节点.nextElementSibling

添加节点

添加节点有两步：先创建节点，再添加入DOM树中

那怎么创建节点呢

使用以下代码：

document.createElement('标签名')

创建好后就要添加到DOM树中了

使用以下代码：

//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

//插入到某个子元素的前面
父元素.insertBefor(要插入的元素，在哪个元素前面)

注意：查询不到时返回null

学了添加节点就可以用js写HTML了

甚至可以动态更改哦

克隆节点

当我们需要许多相似的节点时，可以使用克隆加快工作效率

使用以下代码：

//获取列表
const ul = document.querySelector('ul')
//克隆列表项
const li1 = ul.children[0].cloneNode(true)
//添加列表项
ul.appendChild(li1)

这串代码我们可以给它简化以下：

//获取列表
const ul = document.querySelector('ul')
//克隆列表项的同时添加列表项
ul.appendChild(ul.children[0].cloneNode(true))

这样就简洁多了

在代码中我们发现cloneNode方法中有一个布尔类型的参数，这个参数的意义是当它为true的时候连同标签内的文字一起克隆（深拷贝），而当它为false的时候只克隆标签（浅拷贝）

那么问题就来了，如果只是克隆标签我们又为什么要调用这个方法呢？？？

然而很不幸，它的默认值就是false

所以这里的true要注意不要落下

删除节点

注意：要删除节点必须要有父节点

使用以下代码：

父元素.removeChild(要删除的元素)

谢谢学习，欢迎交流