childNodes与nodeValue

最新推荐文章于 2020-09-13 21:25:10 发布

白云生海上

最新推荐文章于 2020-09-13 21:25:10 发布

阅读量2.2k

点赞数 2

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/qq_34391038/article/details/52098106

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

childNodes

childNodes的w3school定义为

childNodes 属性返回节点的子节点集合，以 NodeList 对象。

childNodes以list方式返回节点的所有子节点集合，所有子节点包括哪些呢。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="container">
            <p>something</p>
            after
        </div>
        <button id="button">
            this is a button
        </button>
        <p id="conTxt">something</p>
        <script>
                var body = document.body;
                var nodes = body.childNodes;
                var txt = "";
                var conTxt = document.getElementById("conTxt");
                for(var i=0; i<nodes.length; i++){
                    var node = nodes[i];
                    txt += node.nodeName + " : "+node.nodeValue +"<br/>";
                }
                conTxt.innerHTML = txt;
        </script>
    </body>

</html>

上文的代码会在p#conTxt中输出上文中的body包含的所有子节点的名称和值，结果如下。

#text : 
DIV : null
#text : 
BUTTON : null
#text : 
P : null
#text : 
SCRIPT : null

结果非常奇怪

body元素包含了八个子节点，四个元素节点，div,button,p,script,四个元素节点
四个元素节点的值全都是null

这说明在body标签的每一个元素标签之前都会含有一个文本节点，但是在最后一个元素节点之后没有文本节点，为了验证文本节点的存在，在body的开始和结束分别加入一段文字

    <body>
        this is at the start
        <div id="container">
        ......
        ......
        ......
        </script>
        this is at the end
    </body>

刷新网页，显示结果如下

#text : this is at the start 
DIV : null
#text : 
BUTTON : null
#text : 
P : null
#text : 
SCRIPT : null

第一个文本节点的值变成了this is at the start，而最后一个节点的值没有显示。
同理输入div#container的子节点，结果如下

#text : 
P : null
#text : after

这说明body标签的子节点包含元素节点和文本节点，其他类型节点未测试。但是最后一个元素节点之后没有文本节点，即使存在文本也没有。而普通的元素节点内部如果还存在其它元素节点，在元素节点之前和之后都会存在一个文本节点，即至少存在三个节点。

nodeValue

上文的结果中还有一个奇怪的地方是元素节点的值都是null，这是因为元素节点的文本值都保存在元素节点的子文本节点中，如果元素节点没有包含其它元素节点，那么元素节点的会有一个子节点，是一个文本节点，保存着元素节点的值即nodeValue，修改上文script代码如下

        <script>
                var body = document.body;
                var nodes = body.childNodes;
                var txt = "";
                var conTxt = document.getElementById("conTxt");
                for(var i=0; i<nodes.length; i++){
                    var node = nodes[i];
                    if(node.nodeType == 1){
                        txt += node.nodeName +" : "+ node.firstChild.nodeValue+"<br/>";
                    }else{
                        txt += node.nodeName + " : "+node.nodeValue +"<br/>";
                    }
                }
                conTxt.innerHTML = txt;
        </script>

刷新页面，显示结果如下

#text : this is at the start 
DIV : 
#text : 
BUTTON : this is a button 
#text : 
P : something
#text : 
SCRIPT : var body = document.body; var nodes = body.childNodes; var txt = ""; var conTxt = document.getElementById("conTxt"); for(var i=0; i"; }else{ txt += node.nodeName + " : "+node.nodeValue +"
"; } } conTxt.innerHTML = txt;