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的值主要有以下几种:

    1. 元素节点的nodeType值为1
    2. 属性节点的nodeType值为2
    3. 文本节点的nodeType值为3
  • 相关阅读:
    【转】 Shiro 核心功能案例讲解 基于SpringBoot 有源码
    【转】 SpringData 基于SpringBoot快速入门
    【转】 Dubbo整合SpringBoot
    【转】 SpringBoot war包部署到Tomcat服务器
    【转】 SpringBoot使用Redis缓存
    【转】 SpringBoot统一异常处理
    【转】 SpringBoot创建定时任务
    【转】 SpringBoot 多环境配置
    js小数运算出现误差
    vue中组件的data为什么是一个函数
  • 原文地址:https://www.cnblogs.com/Dannier/p/2456839.html
Copyright © 2011-2022 走看看