`

javascript获取兄弟节点的两种方法

阅读更多
方案一:先通过父元素的子元素找到含自己在内的“兄弟元素”,然后判断剔除自己。
function siblings(elem) {
    var a = [];
    var b = elem.parentNode.children;
    for(var i =0,i<b.length;i++) {
        if(b[i] !== elem) a.push(b[i]);
    }
    return a;
}

方案二:jquery 1.2.2 里的实现方法,先通过父元素的第一个子元素,然后不断往下找下一个紧邻元素,判断剔除自己。
siblings: function(elem){return jQuery.sibling(elem.parentNode.firstChild,elem);}

jQuery.sibling = function(n, elem){
var r = [];

for ( ; n; n = n.nextSibling ) {
if ( n.nodeType == 1 && n != elem )
r.push( n );
}

return r;
};
转换成可用的独立函数:
function sibling(elem) {
var r = [];
var n = elem.parentNode.firstChild;
for ( ; n; n = n.nextSibling ) {
    if ( n.nodeType === 1 && n !== elem ) {
        r.push( n );
    }
}
return r;
}
分享到:
评论

相关推荐

    js 获取元素所有兄弟节点的实现方法

    本文将详细介绍如何使用原生JavaScript以及jQuery这两种方式来获取元素的所有兄弟节点,并给出相关的概念和方法解释。 首先,让我们来理解“兄弟节点”的概念。在DOM树结构中,一个节点的兄弟节点指的是它父节点下...

    JS获取子、父、兄节点方法小结

    有两种方法: 方法一: ```javascript function sibling(elem) { var arr = []; var b = elem.parentNode.children; for (var i = 0; i ; i++) { if (b[i] !== elem) arr.push(b[i]); } return arr; } ``` 此...

    javascript获取dom的下一个节点方法

    这两个方法都是用来获取给定节点的兄弟节点。`nextElementSibling`用于获取当前节点的下一个元素节点,而`previousElementSibling`则用于获取当前节点的上一个元素节点。这两个方法的主要优势在于它们会忽略非元素...

    JavaScript实现获取某个元素相邻兄弟节点的prev与next方法

    本篇将详细解释如何使用JavaScript获取某个元素的相邻兄弟节点,并介绍`prev`与`next`方法的实现。 首先,我们需要了解两个重要的属性:`previousSibling` 和 `nextSibling`。这两个属性用于获取当前元素在DOM树中...

    JS获取父节点方法

    通过临近节点获取元素,可以使用`neighbourNode.previousSibling`和`neighbourNode.nextSibling`,分别获取当前元素的前一个和后一个兄弟节点,同样支持递归。 最后,还有`parentObj.getElementsByTagName(tagName)...

    JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法

    获取兄弟元素可以通过以下两个属性: - `nextSibling`:获取下一个兄弟节点。 - `previousSibling`:获取上一个兄弟节点。 若要确保返回的是元素类型的兄弟节点,需要进行额外的判断: ```javascript var element ...

    javascript节点操作

    - **定义**:返回节点的下一个兄弟节点。如果没有下一个兄弟节点,则返回`null`。 11. **nodeName** - **定义**:返回节点的名称。对于元素节点,它是标签名;对于属性节点,它是属性名。 12. **nodeType** - *...

    javascript 获取HTML DOM父、子、临近节点

    如果节点有前一个兄弟节点,这个属性就会返回它。需要注意的是,它也会返回文本节点和注释节点。 #### b) 获取后一个节点 `neighbourNode.nextSibling`: 获取指定节点的后一个节点。与`previousSibling`类似,也会...

    Javascript节点关系实例分析

    在这个实例中,我们深入理解了如何利用JavaScript操作DOM中的节点关系,包括父子节点、兄弟节点等。 首先,`parentNode`属性用于获取当前节点的父节点。在示例中,`divObj.parentNode`获取了拥有ID为`divDemo`的`...

    javascript学习笔记1

    - `previousSibling`:返回当前节点的上一个兄弟节点。 - `previousElementSibling`:返回当前节点的上一个兄弟元素节点。 - **属性操作** - `element.value`:获取或设置表单控件的值。 - `element['value']`:...

    Web前端开发技术-节点和节点的操作.pptx

    - **获取子级节点**:有两种方法: - `childNodes`属性返回一个包含所有子节点的即时更新的NodeList集合,包括元素节点、文本节点等。例如,`ul.childNodes`将返回`ul`元素的所有子节点。 - `children`属性则只...

    DOM 脚本编程中的兄弟节点

    这两种方法都旨在处理HTML元素的兄弟节点,但需要注意的是,它们都假设了节点的`nextSibling`可能是文本节点,并且需要被忽略,直到找到下一个元素节点。在实际的DOM操作中,理解这种差异对于编写兼容各种浏览器的...

    浅析JavaScript中浏览器的兼容问题

    接着,我们需要关注的是获取兄弟节点或元素时的兼容性问题。在JavaScript中,我们常常用到nextSibling和previousSibling这两个属性来获取一个元素的下一个或上一个兄弟节点。但是,这两个属性可能会获取到文本节点,...

    了解javascript中的Dom操作

    - `element.nextSibling`和`element.previousSibling`:获取当前元素的下一个和上一个兄弟节点。 属性结点可以用来操作元素的属性。我们可以直接使用对象的点符号(`.`)来获取和设置属性值,但是这种方法不能获取...

    javascript测试题.pdf

    JavaScript是一种广泛用于网页和网络应用开发的脚本语言,它主要应用于前端开发,与ECMAScript标准紧密相关,同时也包含了DOM(Document Object Model)和BOM(Browser Object Model)两个重要组成部分。 1. DOM...

    js与jquery获取父级元素,子级元素,兄弟元素的实现方法

    本文将详细介绍如何使用原生JS和jQuery来获取这些DOM元素,并比较这两种技术实现方式的异同。 ### JS获取元素的方法 在原生JavaScript中,获取父级元素、子级元素和兄弟元素可以通过DOM提供的属性和方法来实现。 ...

    JavaScript DOM 高级程序设计

    - `nextSibling`和`previousSibling`属性:获取当前节点的下一个和上一个兄弟节点。 5. **创建和删除元素** - `createElement()`:创建新的HTML元素。 - `createTextNode()`:创建文本节点。 - `appendChild()`...

    javaScript树

    例如,深度优先搜索(DFS)和广度优先搜索(BFS)是两种常见的遍历方法,它们可以用于获取树的所有节点或特定路径。 dTree可能是用于展示或操作JavaScript树的一个库,它可能提供了丰富的API,如展开、折叠节点,...

Global site tag (gtag.js) - Google Analytics