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