节点操作

一、节点概述

• 网页中的所有内容都是节点(标签、属性、文本、注释等)，使用node表示。HTML、DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。
• 利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
• 一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性。在实际开发中，节点操作主要操作的是元素节点。
  • 元素节点nodeType为1。
  • 属性节点nodeType为2。
  • 文本节点nodeType为3（文本节点包含文字、空格、换行等）。

二、获取父节点

1.子元素.parentNode

返回某节点的父节点，得到的是离元素最近的父级节点(即亲爸爸)。如果找不到父节点，就返回为null。

三、获取子节点(伪数组)

1.父节点.children

返回所有的子元素节点，只返回子元素节点，其余节点不返回。

返回第一个子元素节点的写法：父节点.children[0]

返回最后一个子元素节点的写法是：父节点.children[parentNode.children.length - 1]

四、获取兄弟节点

• 获取下一个兄弟节点：元素.nextElementSibling
  • 返回当前元素的下一个兄弟元素节点，如果找不到则返回null。
• 获取上一个兄弟节点：元素.previousElementSibling
  • 返回当前元素的上一个兄弟元素节点，如果找不到则返回null。

五、创建节点/添加节点

• 步骤：先创建节点再添加节点。
• 创建节点语法格式：document.createElement('标签名')
• 添加节点：
  • 在最后面追加节点：父元素.appendChild(子元素)
  • 在某个子元素的前面追加节点：父元素.insertBefore(要插入的元素, 在哪个元素前面)

六、删除节点

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

删除节点必须通过父元素删除。

七、复制节点

1.元素.cloneNode(布尔值)

• 默认是fales，是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
• 若为true，是深度拷贝，会复制节点本身以及里面所有的子节点。