API节点操作

---

节点操作

DOM节点

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

节点类型：

• 元素节点
  所有的标签，比如body、div等等
  html是根节点
• 属性节点
  所有属性，比如href
• 文本节点
  所有的文本
• 其他

查找节点

• 父节点查找
  属性名：parentNode
  作用：返回最近一级的父节点，找不到返回为null
  语法：子元素.parentNode
• 子节点查找
  属性名：childrenNode
  作用：获得所有子节点，包括文本节点（空格、换行）、注释节点等
  属性名：children
  作用：仅获得所有元素节点，返回的还是一个伪数组
  语法：父元素.children
• 兄弟关系查找
  下一个兄弟节点，属性名：nextElementSibling
  上一个兄弟节点，属性名：previousElementSibling

增加节点

• 创建节点
  即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
  语法：document.createElement('标签名')
• 追加节点
  1.插入到父元素的最后一个子元素
  语法：父元素.appendChild(要插入的元素)
  2.插入到父元素中某个子元素的前面
  语法：父元素.insertBefore(要插入的元素,在哪个元素前面)
• 克隆节点
  复制一个原有的节点，把复制的节点放入到指定的元素内部
  语法：元素.cloneNode(布尔值)
  若为true，则代表克隆时会包含后代节点一起克隆
  若为false，则代表克隆时不包含后代节点（只克隆标签）
  默认为false

删除节点

在JavaScript原生DOM操作中，要删除元素必须通过父元素删除
语法：父元素.removeChild(要删除的元素)
删除节点与隐藏节点（display:none）的区别：隐藏节点还是存在的，但是删除节点是从html中彻底删除