节点操作
一、节点概述
- 网页中的所有内容都是节点(标签、属性、文本、注释等),使用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,是深度拷贝,会复制节点本身以及里面所有的子节点。
当前文章:节点操作
网站链接:http://scyanting.com/article/dsojidd.html