节点操作

  • 节点操作已关闭评论
  • 12 次浏览
  • A+
所属分类:Web前端
摘要

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


一、节点概述

  • 网页中的所有内容都是节点(标签、属性、文本、注释等),使用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,是深度拷贝,会复制节点本身以及里面所有的子节点。