方案一:先通过父元素的子元素找到含自己在内的“兄弟元素”,然后判断剔除自己。
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;
}
分享到:
相关推荐
本文将详细介绍如何使用原生JavaScript以及jQuery这两种方式来获取元素的所有兄弟节点,并给出相关的概念和方法解释。 首先,让我们来理解“兄弟节点”的概念。在DOM树结构中,一个节点的兄弟节点指的是它父节点下...
有两种方法: 方法一: ```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; } ``` 此...
这两个方法都是用来获取给定节点的兄弟节点。`nextElementSibling`用于获取当前节点的下一个元素节点,而`previousElementSibling`则用于获取当前节点的上一个元素节点。这两个方法的主要优势在于它们会忽略非元素...
本篇将详细解释如何使用JavaScript获取某个元素的相邻兄弟节点,并介绍`prev`与`next`方法的实现。 首先,我们需要了解两个重要的属性:`previousSibling` 和 `nextSibling`。这两个属性用于获取当前元素在DOM树中...
通过临近节点获取元素,可以使用`neighbourNode.previousSibling`和`neighbourNode.nextSibling`,分别获取当前元素的前一个和后一个兄弟节点,同样支持递归。 最后,还有`parentObj.getElementsByTagName(tagName)...
获取兄弟元素可以通过以下两个属性: - `nextSibling`:获取下一个兄弟节点。 - `previousSibling`:获取上一个兄弟节点。 若要确保返回的是元素类型的兄弟节点,需要进行额外的判断: ```javascript var element ...
- **定义**:返回节点的下一个兄弟节点。如果没有下一个兄弟节点,则返回`null`。 11. **nodeName** - **定义**:返回节点的名称。对于元素节点,它是标签名;对于属性节点,它是属性名。 12. **nodeType** - *...
如果节点有前一个兄弟节点,这个属性就会返回它。需要注意的是,它也会返回文本节点和注释节点。 #### b) 获取后一个节点 `neighbourNode.nextSibling`: 获取指定节点的后一个节点。与`previousSibling`类似,也会...
在这个实例中,我们深入理解了如何利用JavaScript操作DOM中的节点关系,包括父子节点、兄弟节点等。 首先,`parentNode`属性用于获取当前节点的父节点。在示例中,`divObj.parentNode`获取了拥有ID为`divDemo`的`...
- `previousSibling`:返回当前节点的上一个兄弟节点。 - `previousElementSibling`:返回当前节点的上一个兄弟元素节点。 - **属性操作** - `element.value`:获取或设置表单控件的值。 - `element['value']`:...
- **获取子级节点**:有两种方法: - `childNodes`属性返回一个包含所有子节点的即时更新的NodeList集合,包括元素节点、文本节点等。例如,`ul.childNodes`将返回`ul`元素的所有子节点。 - `children`属性则只...
这两种方法都旨在处理HTML元素的兄弟节点,但需要注意的是,它们都假设了节点的`nextSibling`可能是文本节点,并且需要被忽略,直到找到下一个元素节点。在实际的DOM操作中,理解这种差异对于编写兼容各种浏览器的...
接着,我们需要关注的是获取兄弟节点或元素时的兼容性问题。在JavaScript中,我们常常用到nextSibling和previousSibling这两个属性来获取一个元素的下一个或上一个兄弟节点。但是,这两个属性可能会获取到文本节点,...
- `element.nextSibling`和`element.previousSibling`:获取当前元素的下一个和上一个兄弟节点。 属性结点可以用来操作元素的属性。我们可以直接使用对象的点符号(`.`)来获取和设置属性值,但是这种方法不能获取...
JavaScript是一种广泛用于网页和网络应用开发的脚本语言,它主要应用于前端开发,与ECMAScript标准紧密相关,同时也包含了DOM(Document Object Model)和BOM(Browser Object Model)两个重要组成部分。 1. DOM...
本文将详细介绍如何使用原生JS和jQuery来获取这些DOM元素,并比较这两种技术实现方式的异同。 ### JS获取元素的方法 在原生JavaScript中,获取父级元素、子级元素和兄弟元素可以通过DOM提供的属性和方法来实现。 ...
- `nextSibling`和`previousSibling`属性:获取当前节点的下一个和上一个兄弟节点。 5. **创建和删除元素** - `createElement()`:创建新的HTML元素。 - `createTextNode()`:创建文本节点。 - `appendChild()`...
例如,深度优先搜索(DFS)和广度优先搜索(BFS)是两种常见的遍历方法,它们可以用于获取树的所有节点或特定路径。 dTree可能是用于展示或操作JavaScript树的一个库,它可能提供了丰富的API,如展开、折叠节点,...