DOM节点(耗时3小时整理的细节，从入门到放弃)

目录

1节点操作

目标：能说出DOM节点的类型

DOM节点：

DOM树里每一个内容都称之为节点

节点类型：

元素节点

1.所有的标签 比如body，div

2.html是根节点

属性节点

所有的属性 比如href

文本节点

所有的文本

其他

问答：

1.什么是节点？

答：dom树里每一个内容都称为节点

2.DOM节点的分类？

元素节点 比如 div

属性节点 比如class

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

3.我们重点记住那个节点？

元素节点

可以更好的让我们理清标签元素之间的关系

案例讲解

关闭二维码案例：

点击关闭按钮，关闭的是二维码的盒子，还要获取erweima的盒子

思考：

关闭按钮和erweima是什么关系？

父子关系：

所以我们可以这样做：

点击关闭按钮，直接关闭它的爸爸，就无需获取erweima元素了

节点关系：

父节点

子节点

兄弟节点

父节点查找：

parentNode 属性

返回最近一级的父节点 找不到返回null

子节点查找：

childNodes:

获得所有子节点，包括文本节点（空格，换行），注释节点等

children（重点）

仅获得元素节点

返回的是一个伪数组

兄弟节点查找：

1.下一个兄弟节点

nextElementSibling 属性

2.上一个兄弟节点

previousElementsibling 属性

答问：

1.查找父节点用哪个元素?

答：parentNode属性2.查找所有子节点用
那个属性？

增加节点

很多情况下，我们需要在页面中增加元素：

比如，点击发布按钮，可以新增一条消息

一般情况下，我们新增节点，按照如下操作：

创造一个新的节点

把创造的新的节点放入指定的元素内部

1.创造节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后再插入节点

创建元素节点的方法

2.追加节点

要想在页面看到，我们还得插入到某个父元素当中

插入到父元素的最后一个子元素：

插入到父元素中某个子元素的前面

---

增加节点

特殊情况下，我们新增节点，按照如下操作：

复制一个原有的节点

把复制的节点放入指定的元素内部

cloneNode 会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆

若为false ，则代表克隆时不包含后代节点

默认false

删除节点

若一个节点在页面中已经不需要的时候，可以删除它

在javascript原生dom操作中，要删除元素必须通过父元素删除

语法

注：

如不存在父子关系则删除不成功

删除节点和隐藏节点（display:none）有区别的；隐藏节点还是存在的，但是删除，则从html删除节点