html中childNodes节点属性

红太狼 2021-03-22 13:30 508阅读 0赞

之前看html后对节点这个东西的盖帘一直很模糊，so在网上找了一本《DOM编程艺术》的PDF文档来看，编程试验了下

<body>
        <div id="box" οnclick="console.log(this)">
            this
            <h2 style="width: 200px" class="123" id="wrap">
                here
                <span class="1234">here</span> where
            </h2>
            that
        </div>
    </body>
    <script type="text/javascript">
        // var div = document.getElementById('box').childNodes[1].childNodes[0].nodeValue;
        var div = document.getElementById('box').childNodes;
        console.log(div);
    </script>

在chrome中运行

![1018159-20170220113140476-1238307869.png][]

显示有6个节点，我们依次来看看这6个节点是什么

1.  text:this  
2.  h2\#wrap.123:here<span class="1234">here</span> where
3.  text:that

可以看出，childNodes是当前元素的第一代子节点，而且顺序是有以下几种节点组合

1.  text 
2.  text element text
3.  text element text element text

当.box中只纯在text时，或者为空时，也会有一个text节点，也就是第一种情况

当.box中存在一个element时，则在element前后都会存在一个text节点，不管text是否为空，也就是第二种情况

依次类推即可

[1018159-20170220113140476-1238307869.png]: /images/20210322/1616419837925.png

发表评论取消回复

表情：

评论列表（有 0 条评论，508人围观）

还没有评论，来说两句吧...

相关阅读

相关 html 属性中使用变量_如何使用HTML属性

html 属性中使用变量 [How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Website

太过爱你忘了你带给我的痛/ 2022年11月28日 15:20/ 0 赞/ 546 阅读

相关 html dom节点源码,HTML DOM children 属性

HTML DOM children 属性元素对象实例获取 body 元素的子元素集合： var c = document.body.children; 定义和用

Dear 丶/ 2022年10月09日 15:18/ 0 赞/ 200 阅读

相关 html 提示属性,HTML 属性

HTML 属性属性是为 HTML 元素提供的附加信息。 HTML 属性属性总是以名称/值对的形式出现，比如：name="value"。 HTML 元素可以设置属性属

迈不过友情╰/ 2022年10月06日 05:59/ 0 赞/ 353 阅读

相关 DOM节点属性

1.getAttribute("属性") 2.setAttribute ("属性"，"属性值") 属性可视为元素节点的子节点 3.c

末蓝、/ 2022年06月14日 05:36/ 0 赞/ 317 阅读

相关 JS childNodes属性和想象中不一样，空白节点的处理

关于childNodes属性 childNodes返回的是所有的孩子节点，但是当我实际尝试的时候发现，孩子节点的长度并不是我想要的那样，于是我便展开了探索示例代码：

ゞ浴缸里的玫瑰/ 2022年05月22日 08:24/ 0 赞/ 151 阅读

相关元素节点属性节点文本节点文档节点

（1）元素节点：一般是拥有一对开闭合标签的元素整体，例如上图中的<ul>...</ul>这一部分都属于一个元素节点。（2）属性节点：一般是元素节点的属性，比如上图中的“宽度

水深无声/ 2022年04月23日 10:50/ 0 赞/ 322 阅读

相关解决HTML节点属性为display:none的问题

写了一个简单的例子，单击按钮会调用js中的change()函数使得div的display的属性边成none，效果就是使得图片被隐藏了。源码如下： <!DOCTYPE

爱被打了一巴掌/ 2021年09月20日 15:54/ 0 赞/ 828 阅读

相关封装函数，解决childNodes兼容性问题解决高级浏览器中节点中空白符问题

function getChildNodes(dom) { / 步骤: 1: 循环查看dom的所有子节点，查看有没有文

Love The Way You Lie/ 2021年09月02日 06:28/ 0 赞/ 190 阅读

相关 JS--JavaScript访问节点（childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling）

访问节点通过节点之间的树形关系，可以定位文档中的每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。 ownerD

矫情吗；*/ 2021年08月13日 16:28/ 0 赞/ 447 阅读

相关 html中childNodes节点属性

之前看html后对节点这个东西的盖帘一直很模糊，so在网上找了一本《DOM编程艺术》的PDF文档来看，编程试验了下

红太狼/ 2021年03月22日 13:30/ 0 赞/ 509 阅读