前端学习 | js DOM节点操作

1. DOM节点

• DOM节点
  • DOM树中每一个内容都成为节点
• 节点类型
  • 元素节点
    • 所有的标签 比如body、div
    • html是根节点
  • 属性节点
    • 所有的属性 比如href
  • 文本节点
    • 所有的文本
  • 其他

2. 查找节点

• 父节点查找：
  • parentNode属性
  • 返回最近一级的父节点
    子元素.parentNode
• 子节点查找：
  • childNodes
    • 获得所有子节点、包括文本节点(空格、换行)、注释节点等
    • children 属性 (重点)
  • 仅获得所有元素节点
  • 返回的还是一个伪数组
    父元素.children
• 兄弟关系查找:
  • 下一个兄弟节点
    • nextElementSibling 属性
  • 上一个兄弟节点
    • previousElementSibling 属性

3. 增加节点（※）

比如要在页面中增加元素

1. 创建节点

const div = document.creatElement('div')

2. 增加节点

• 要想在页面中显示，还得插入到某个父元素中
• 插入父元素最后一个子元素中

父元素.appendChild(要插入的元素)

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

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

• 若为true，则代表克隆时会包含后代节点一起克隆
• 若为false，则代表克隆时不包含后代节点
• 默认为false

4. 删除节点

要删除元素要经过父元素删除
语法： 父元素.removeChild(要删除的元素)

父元素.insertBefore(要插入的元素，在哪个元素前面)