zoukankan html css js c++ java

nextSibling和previousSibling

　　在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;
        }

测试代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript" >
        window.onload = function () {
            var oUl = document.getElementsByTagName("UL");
            var nodeLi = oUl[0].childNodes[3];

            var nextListItem = nodeLi.nextSibling;
            var preListItem = nodeLi.previousSibling;

            alert(nextListItem.tagName + " " + preListItem.tagName);

            nextListItem = nextSibling(nodeLi);
            preListItem = prevSibling(nodeLi);

            alert(nextListItem.tagName + " " + preListItem.tagName);
           
        }

        //下一个兄弟节点
        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;
        }    

    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>JQuery</li>
            <li>Dom</li>
        </ul>
        <ul>
            <li>ASP.NET</li>
            <li>JSP</li>
            <li>PHP</li>
            <li>VB.NET</li>
        </ul>
    </div>
    </form>
</body>
</html>

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

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

查看全文

相关阅读:
基础MYSQl技巧集锦
 C MySQL float类型数据用 printf()打印
 1Tomcat+Axis+Eclipse实例讲解 2自己做的一个可以用的webservice,只是开始（WebService好文）
信号量进程 (m个生产者,n个消费者,容量为r的缓冲区)
信号量和同步互斥
 C语言 wait()信号量部分 signal()信号量部分代码
 Tomcat+Axis+Eclipse实例讲解
 MySQL 集合补集
 SELECT DocID, SUM(a.Score + B.Score) AS TOTAL Itemset_ONE a LEFT Join Itemset_Two b ON a.DocID=b.DocID 太慢
 Yii AR Model 查询

原文地址：https://www.cnblogs.com/Dannier/p/2456839.html