IE10Chrome与nextSibling

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了IE10Chrome与nextSibling相关的知识,希望对你有一定的参考价值。

记录学习JavaScript中遇到的知识点


1、在使用nextSibling获取ul下三个li标签中第二个节点Id时,发现IE10、Chrome均不忽略换行、空格及Tab键。

技术分享
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>javascript Exercises.</title>
    </head>
    <body>
        <h1>This is my first exercise.</h1>
        <ul>
            <li id="item1">item1</li>
            <li id="item2">item2</li>
            <li id="item3">item3</li>
        </ul>
    </body>
</html>
<script tyoe="text/JavaScript">
    var nodeItem=document.getElementById("item1");
    alert(nodeItem.id);
    alert(nodeItem.nextSibling.nodeType);
    alert(document.getElementsByTagName("ul")[0].childNodes.length);
</script>
View Code

ie10、Chrome中运行结果均为:item1,3,7。即("item1").nextSibling.nodeType=3为文本类型节点,也就是没有忽略节点"item1"后面的空文本节点(空格、回车和Tab键)。<ul></ul>标签内共有4个换行,3个<li></li>节点,共7个。

然后将<ul></ul>标签内的换行删除,ie10、Chrome中运行结果则为:item1,1,3。

2、现在改变策略使用函数getNextNode(node)来获取下一个Element节点,以达到忽略换行、空格及Tab键。

技术分享
<script tyoe="text/JavaScript">
//获取节点ID
    function getNextNode(node){
        node=typeof node=="string" ? document.getElementById(node):node;
        var nextNode=node.nextSibling;
        if(!nextNode)
            return null;
        while(true){
            //访问到下一个Element节点
            if(nextNode.nodeType==1){
                break;
            }
            else{
                //访问到非Element类型节点
                if(nextNode.nextSibling){
                    nextNode=nextNode.nextSibling;
                }
                else{
                    break;
                }
            }
        }
        return nextNode;
    }
    var nextNode=getNextNode("item1");
    alert(nextNode.id);
    
    var nodeItem=document.getElementById("item1");
    alert(nodeItem.nextSibling.id);
</script>
View Code

ie10、Chrome中运行结果均为:item2,undefined。函数getNextNode(node)按意愿实现正确获取了"item1"的下一个Element节点,网络说法是(本人未测试):IE8.0及其以下版本的浏览器会忽略节点间的空白节点,遵循W3C规范的浏览器(Chrome、FireFox、Safari等)则会把这些空白作为文本节点处理。

 

以上是关于IE10Chrome与nextSibling的主要内容,如果未能解决你的问题,请参考以下文章

调用 jQuery next() 不返回 nextSibling 对象

我的 Windows 10 上的 Chrome 83/IE 中出现奇怪的轮廓

输入范围样式 IE11/Firefox 与 Chrome 相同

Chrome读取XML一片空白,怎么处理

为甚么我的网页IE打开就乱跳 Chrome就能正常执行css动画代码

nextElementSibling 与 nextSibling 有啥区别