前端-js基础-DOM3-节点

#博学谷IT学习技术支持

目录

节点(node)：网页中所有的内容都是节点(标签、属性、文本、注释等)

节点概述

节点层级

父级节点 node.parentNode

子节点

兄弟节点

---

• 节点(node)：网页中所有的内容都是节点(标签、属性、文本、注释等)

• 节点概述

  • 节点至少有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性
  • 元素节点 nodeType 为 1
  • 属性节点 nodeType 为 2
  • 文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）

• 节点层级

  • 父级节点 node.parentNode

    • node.parentNode 返回的是最近的一个父节点
    • 如果指定的节点没有父节点则返回null

      

  • 子节点

    • parentNode.childNodes ——标准 （较少使用）

      

      • 返回包含指定节点的子节点的集合，该集合为及时更新的集合
      • ⚠️ 返回值里面包含了所有的子节点，包括元素节点、文本节点等
      • 如果只想要获得里面的元素节点，则需要专门处理。
      • 一般不使用parentNode.childNodes
    • parentNode.children——非标准

      

      • parentNode.children 是一个只读属性，返回所有的子元素节点，其余节点不返回
      • parentNode.firstChild——返回第一个子节点(包含所有节点)，找不到则返回null
      • parentNode.lastChild——返回最后一个子节点(包含所有节点)，找不到则返回null
      • parentNode.firstElementChild——返回第一个子元素节点，找不到则返回null （有兼容问题）
      • parentNode.lastElementChild——返回最后个子元素节点，找不到则返回null（有兼容问题）
      • parentNode.chilren[0]——获取第一个子元素节点
      • parentNode.chilren[parentNode.chilren.length — 1]——获取最后个子元素节点
    • 案例：下拉菜单

      

  • 兄弟节点

    • node.nextSibling——返回当前元素的下一个兄弟元素节点(包含所有节点)，找不到则返回null
    • node.previousSibling——返回当前元素的上一个兄弟元素节点(包含所有节点)，找不到则返回null

      

    • node.nextElementSibling——返回当前元素的下一个兄弟元素节点，找不到则返回null （兼容性问题）
    • node.previousElementSibling——返回当前元素的上一个兄弟元素节点，找不到则返回null （兼容性问题）