JavaScript起步(十九-DOM节点一)| 一起学系列

127 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第16天,点击查看活动详情

  • DOM节点

image.png

  • nodeType

    • 属性值为数字,表示不同的节点类型,共12种(只需掌握3种),只读

    • 属性值为1:元素节点(比如div这些标签)

    • 属性值为2:属性节点(比如类名、宽高这些属性)

    • 属性值为3:文本节点()

  • nodeName

    • 节点的名称(标签名称),只读
  • nodeValue

    • 节点值,返回或设置当前节点的值

    • 元素节点的nodeValue始终是null

  • 父子节点常用属性

    • childNodes 只读属性,获取一个节点所有子节点(包含换行的text文本节点)的实时的集合,集合是动态变化的

    • children 只读属性,返回一个节点所有的子元素节点(只包含标签)集合,是一个动态更新的HTML元素集合,较为常用

    • firstChild 只读属性,返回该节点的第一个子节点,如果该节点没有子节点则返回null

    • lastChild 只读属性,返回该节点的最后一个子节点,如果该节点没有子节点则返回null

    • parentNode 返回一个当前节点的父节点,如果没有这样的节点,比如说像这个节点是树结构的顶端或者没有插入一颗树中,这个属性返回null,较为常用

    • parentElement 返回当前节点的父元素节点,如果该元素没有父节点,或者父节点不是一个DOM元素,则返回null

 

  • 兄弟节点常用属性

    • nextSibling     只读属性,返回该节点同级的下一个节点,如果没有返回null

    • previousSibling     只读属性,返回该节点同级的上一个节点,如果没有返回null

    • nextElementSibling      只读属性,返回该节点同级的下一个元素节点,如果没有返回null

    • previousElementSibling     只读属性,返回该节点同级的上一个元素节点,如果没有返回null

    • 注意:nextElementSibling和previousElementSibling有兼容问题,IE9以后支持