IE10、Chrome与nextSibling

最新推荐文章于 2024-08-30 20:29:15 发布

aitai02286

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量173

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/rellay/p/5228850.html

版权

记录学习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等）则会把这些空白作为文本节点处理。

转载于:https://www.cnblogs.com/rellay/p/5228850.html

aitai02286

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
IE10、Chrome与nextSibling

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

扫一扫