JavaScript进阶——节点操作

1. dom 节点

1.2 节点介绍

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

1.1 节点类型

• 元素节点

所有的标签比如 body 、 div

html 是根节点

• 属性节点

所有的属性，比如 href

• 文本节点

所有的文本

1.2 DOM节点流程图片

2.查找节点

2.1 父节点查找

• parentNode 属性

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

2.2 子节点查找

• childNodes

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

• children 属性（重点）

仅获得所有元素节点

返回的还是一个伪数组

2.3 兄弟关系查找

• 下一个兄弟节点：nextElementSibling 属性
• 上一个兄弟节点：previousElementSibling 属性

3.增加节点

3.1 创建节点

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

3.2 追加节点

• 要想在界面看到，还得插入到某个父元素中
• 插入到父元素的最后一个子元素

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

3.3 特殊情况-克隆节点

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

复制一个原有的节点

把复制的节点放入到指定的元素内部.克隆节点

• 克隆节点

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

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

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

c.默认为 false

4.删除节点

4.1 介绍

• 若一个节点在页面中已不需要时，可以删除它
• 在 JavaScript 原生 DOM 操作中，要删除元素必须通过父元素删除

4.2 语法

注：

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

b.删除节点和隐藏节点（ display : none )有区别的：隐藏节点还是存在的，但是删除，则从 html 中删除节点