节点操作之兄弟节点

简介: 节点操作之获取兄弟节点前面我们了解了如何获取元素,我们通过document.getElementById等等来获取元素,但是这样的方法有很大的局限性,我们只能一个一个的去获取元素,很不方便。

节点操作之获取兄弟节点

前面我们了解了如何获取元素,我们通过document.getElementById等等来获取元素,但是这样的方法有很大的局限性,我们只能一个一个的去获取元素,很不方便。

那么有没有一种更方便的方式呢?

下面我们就开始学习节点操作。

兄弟节点

  1. nextSibling:获取下一个兄弟节点
    node.nextSibling

nextSibling属性返回当前节点的下一个兄弟节点,如果没有则返回null。

这个方法是返回当前元素的下一个兄弟元素的节点,包括文本节点,元素节点,样式节点等等。

  1. previousSibling:获取上一个兄弟节点
    node.previousSibling

previousSibling属性返回当前节点的上一个兄弟节点,如果没有则返回null。同样也是包含所有的节点:元素节点,文本节点,样式节点等等。

前面两个获取范围太广了,我们要是只要获取到元素怎么办呢?

  1. nextElementSibling:获取下一个兄弟元素
    node.nextElementSibling

nextElementSibling属性返回当前节点的下一个兄弟元素节点,如果没有则返回null。

  1. previousElementSibling:获取上一个兄弟元素
    node.previousElementSibling

prviouseElementSibling属性返回当前节点的上一个兄弟元素节点,如果没有则返回null。

其中:3.4有兼容性问题,只有ie9以上才能实现


相关文章
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
|
2月前
获取节点2-20
获取节点2-20
34 3
30_删除二叉搜索树中的节点
30_删除二叉搜索树中的节点
|
3月前
|
Kubernetes 调度 容器
在K8S中,"节点亲和性"和"节点选择器"的区别在哪里?
在K8S中,"节点亲和性"和"节点选择器"的区别在哪里?
|
4月前
|
JavaScript
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
js 解析和操作树 —— 获取树的深度、提取并统计树的所有的节点和叶子节点、添加节点、修改节点、删除节点
117 0
|
5月前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
59 0
38zTree - 冻结根节点
38zTree - 冻结根节点
45 0
JavaWeb - 查询任意节点的所有子节点(包括孙子节点)
JavaWeb - 查询任意节点的所有子节点(包括孙子节点)
348 0
|
JavaScript
节点操作之创建节点
节点操作之创建节点 在实际开发中,我们经常会遇到在用户使用过程中,我们需要动态创建一个文本框,也就是用户在点击某些按钮之后,我们要给这个页面添加一个新的节点。这种操作在节点操作里面叫做创建节点。那么创建节点有哪些方式呢?
|
JavaScript 前端开发 索引
节点操作介绍
网页中所有的内容都叫做节点(标签,属性,文本,注释等),在DOM中,节点使用的是 node 表示。
133 0
节点操作介绍