nextSibling和previousSibling

本文轉載自查看原文 2012-04-19 11:45 10238 JavaScript

　　在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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js firstChild 、nextSibling、lastChild、previousSibling、parentNode javascript 中的nextSibling和previousSibling使用注意事項【踩坑】nextSibling 和nextElementSibling的區別 js：nextSibling兄弟節點的使用 JS——DOM操作（首尾子節點、兄弟節點【firstChild、previousSibling...】）