nextSibling和lastSibling

在FireFox中包含众多空格作为文本节点,因此在我们使用nextSibling和previousSibling时就会出现问题。因为FireFox会把文本节点误当做元素节点的兄弟节点来处理。我们可以添加nodeType来判断。当上一节点或者是下一节点为文本节点时,就继续寻找,直到找到下一个元素节点。以下代码仅供参考,在fireFox中测试通过:

        //下一个兄弟节点
        function nextSibling(node) {
            var tempLast = node.parentNode.lastChild;
            if (node == tempLast) return null;
            var tempObj = node.nextSibling;
            while (tempObj.nodeType != 1 && tempObj.nextSibling != null) {
                tempObj = tempObj.nextSibling;
            }
            return (tempObj.nodeType==1)? tempObj:null;
        }
        //前一个兄弟节点
        function prevSibling(node) {
            var tempFirst = node.parentNode.firstChild;
            if (node == tempFirst) return null;
            var tempObj = node.previousSibling;
            while (tempObj.nodeType != 1 && tempObj.previousSibling != null) {
                tempObj = tempObj.previousSibling;
            }
            return (tempObj.nodeType==1)? tempObj:null;
        }    

测试代码

其中nodeType的值主要有以下几种:

  1. 元素节点的nodeType值为1
  2. 属性节点的nodeType值为2
  3. 文本节点的nodeType值为3

nextSibling和lastSibling

时间: 2024-08-01 06:36:28

nextSibling和lastSibling的相关文章

【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用

这几天看书看到这几个属性做几个笔记 parentNode:顾名思义,就是获取某元素的父元素等同于jq的parent(). lastChild:获取最后一个子元素. appendChild:在某元素内最后面添加一个子元素. insertBefore:在某元素外的 前面添加一个元素. 此函数有两个参数insertBefore(newelem,targetelem),newelem是要插入的元素,targetelem是与newelem相对的 元素,调用此方法必须用 targetelem的父元素调用 即

nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中)。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>nextSibling</title></head><body><ul id="u1"> <li id="a"&g

关于dom元素的nextSibling的属性使用注意点

博主在进行某次前端开发过程中,使用dom元素的nextSibling属性,用于获取下一个同辈元素,但是却得到非预期结果.代码片段如下 <!DOCTYPE html> <html> <body> <ul> <li id="Coffee">Coffee</li> <li id="Tea">Tea</li> </ul> <button onclick=&quo

IE10、Chrome与nextSibling

记录学习JavaScript中遇到的知识点 1.在使用nextSibling获取ul下三个li标签中第二个节点Id时,发现IE10.Chrome均不忽略换行.空格及Tab键. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript Exercises.</title> </head> <body> <

js的nextSibling属性用法简单介绍

js的nextSibling属性用法简单介绍:此属性可以返回当前节点的下一个同级节点.如果下一个同级节点不存在,则此属性返回值是null.语法结构: elementNode.nextSibling 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softw

js nextSibling属性和previousSibling属性概述及使用注意

1:nextSibling属性 该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别):如果其后没有与其同级的节点,则返回null. 需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示: 先来看一个例子: 该对象的结构表面上看,div的nextSibling只有2项——两个input节点.但实际上有5项——/n,input,/n,input,/n.这是因为input作为创建各种表单输入控件的标签,无论是生成button.checkbox.radio...等或其他

nextSibling属性用法简单介绍

js的nextSibling属性用法简单介绍:此属性可以返回当前节点的下一个同级节点.如果下一个同级节点不存在,则此属性返回值是null.语法结构: elementNode.nextSibling 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softw

利用父子级来修改数据:previousSibling,parentNode,nextSibling

function adit(obj) { //var demoA = document.getElementById("operation"); var demoA = obj; var a = demoA.parentNode.previousSibling;//这个parentNode找到的是<td>标签的同一级父级点, //也就是其他两个<td>加空白, //previousSibling(这个是向上找同一父级点的子节点) while(a != null)

JS-firstChild,firstElementChild,lastChild,firstElementChild,nextSibling,nextElementSibling

<body> <ul id="ul1"> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> </ul> </body> 1,firstChild:第一个子节点. 标准下:firstChild会包含文本类型的节点 非标准下(IE7以下):fistChild只包含元素节点 var