• ChildNodes详解及其兼容性处理方式


    写在前面:在做insertBefore插入节点练习时发现一个问题,插入childNodes[0]和childNodes[1]时插入的位置是一样的!于是有了childNodes的了解,有了这篇文章,欢迎交流,欢迎拍砖。

    本文包括如下:

    1、DOM 常用节点类型说明

    2、childNodes.Length详解

    3、节点中取值问题

    4、childNodes兼容性处理

    说明:本文综合网上其它博文对于childNodes的详解。

    1、DOM 常用节点类型说明:

    NodeType  NodeName 
    1 ELEMENT_NODE 元素节点
    2 ATTRIBUTE_NODE 属性节点
    3 TEXT_NODE 文本节点
    4 COMMENT_NODE 注释节点
    5 DOCUMENT_NODE 文档节点

    对于元素节点、属性节点、文本节点的理解请戳这里

    2、childNodes.Length详解

    我们都知道js操作document时,使用childNodes取得节点的子节点个数时,在IE6、7、8下时完全没有问题的,但是在其它浏览器下使用childNodes获取节点,它会将空格符、回车符、换行符也看做一个文本节点,使得节点长度不是我们想要的,我们看一下如下示例:

    代码部分:

        <div id="div1">
            <p id="fg">1</p>
            <p>2</p>
        </div>
    
    js
    var c=document.getElementById("div1");
                alert(c.childNodes.length);
                alert(c.childNodes[0].nodeName);
                alert(c.childNodes[1].nodeName);
                alert(c.childNodes[2].nodeName);
                alert(c.childNodes[3].nodeName);
                alert(c.childNodes[4].nodeName);
                alert(c.childNodes[5].nodeName);

    获取到的childNodes长度及其nodeName如下图所示,通过下图我们可以了解到换行符被看成文本节点,如果是在IE6,7,8中则为(2、p、p);

     如果我们把HTML代码改成如下,则结果为:

    <div id="div1"><p id="fg">1</p><p>2</p></div>

    所以就如我们前面所说在浏览器中childNodes连一个回车符都不放过!

    3、节点中取值问题

        <div id="div1">
            <p id="fg">1</p>
            <p>2</p>
        </div>

    我们把上个小节中代码nodeName换成NodeValue,看一下结果如图

    不科学啊!为什么<p>的nodeValue值会为空!

    原因在于<p>1</p>,元素节点 <p>,拥有一个值为 "1" 的文本节点。1并不是元素节点p的值

    那么我们若想取到<p>中的数字1怎么办,我们需要获得的是<p>的childNodes的nodeValue值

    var divNodes=document.getElementById("div1").getElementsByTagName("p");
    alert(divNodes[0].childNodes[0].nodeValue); 或者 var pp=document.getElementById("fg"); alert(fg.childNodes[0].nodeValue);

    4、childNodes兼容性处理

    我们可以通过判断div子节点的个数是否等于子节点元素节点的个数,若等于,继续操作,若不等于,可通过新建一个数组,找出div子节点的元素节点填入数组,然后对数组进行操作,我们以insertBefore()插入节点为例,代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="">
    </head>
    <body>
        <div id="div1">
            <p id="fg">1</p>
            <p>2</p>
        </div>
    
    <button onclick="test()">插入节点</button>
        <script>
            function test()
            {
                var a=document.createElement("p");
                var textNodes=document.createTextNode("我是将要插入的节点");
                a.appendChild(textNodes);
                var c=document.getElementById("div1");
                var divNodes=document.getElementById("div1").getElementsByTagName("p");//计算子节点<p>的个数
                if(c.childNodes.length!=divNodes.length)
                { 
                    var rows=[];
                    for(var i=0;i<c.childNodes.length;i++)
                    {
                        if(c.childNodes[i].nodeType==1)//类型为1表示为元素节点
                        {
                            rows.push(c.childNodes[i]);//填入数组
                        }
                    }
                    c.insertBefore(a,rows[0]);
                }
                else{                
                c.insertBefore(a,c.childNodes[0]);//适用于IE6、7、8
                }
    }</script>
    </body>
    </html>

    这样插入时childNodes[0]和childNodes[1]插入的位置就不一样啦。

  • 相关阅读:
    POJ_2184_Cow_Exhibition_(动态规划,背包)
    POJ_2392_Space_Elevator_(动态规划,背包)
    POJ_2914_Minimum_Cut_(Stoer_Wagner)
    POJ_3068_Shortest_pair_of_paths_(最小费用流)
    POJ_3666_Making_the_Grade_(动态规划)
    BZOJ_1565_[NOI2009]_植物大战僵尸_(Tarjan+最大流+最大权闭合图)
    POJ_2987_Firing_(最大流+最大权闭合图)
    BZOJ_1497_[NOI2006]_最大获利_(最大流+最大权闭合图)
    BZOJ_1798_&_Codevs_2216_[AHOI_2009]_行星序列_(线段树)
    Codevs_1690_开关灯_(线段树)
  • 原文地址:https://www.cnblogs.com/a67cm/p/4625938.html
Copyright © 2020-2023  润新知