js Dom树结构分析

对Dom数结构的理解，对用js操作html元素有很大的意义

先来看一下下面这段html代码：（这里就以分析body中的元素来解释，因为我们基本所有的操作基本都围绕body标签来做的）

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5 <title></title>
 6     <script type="text/javascript">
 7         window.onload = function () {
 8             var _body = document.getElementsByTagName("body")[0];
 9             for (var i = 0; i < _body.childNodes.length; i++) {
10                 console.log("第"+i+"个标签："+_body.childNodes[i].nodeName);
11             }
12         }
13     </script>
14 </head>
15 <body>
16     <input type="text" name="txt" value="" /><!--注释-->
17     <a href="http://www.baidu.com">content</a><span></span>
18     <div style="border:solid red 1px;"></div>
19 </body>
20 </html>
复制代码

 

第一眼的感觉，body中只有四个标签<input> <a> <span> <div>

而我们用firefox浏览器打开这个html页面，F12开发工具查看页面得元素信息也正是我们所看到的 其他浏览器看到的也基本类似（除IE）

但控制台中打印的内容发现却跟我们想象的并不一样，打印结果是9个元素 其中#text为文本 #comment为注释

如下图

此时用IE打开查看html结构

针对上面的浏览器在解析html元素后可用用下图来解释

由此可以得出结果，浏览器会将 文本 注释也会解释为一个元素节点 

  值得注意的是：

1、浏览器解析后，</body>之前必有一个#text节点

2、写在body标签后面的所有标签（包括文本及注释），浏览器解析后都会将这些标签放入body中。

用IE开发人员工具来解释以上注意的两点

html代码：

复制代码
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5 <title></title>
 6     <script type="text/javascript">
 7         window.onload = function () {
 8             var _body = document.getElementsByTagName("body")[0];
 9             for (var i = 0; i < _body.childNodes.length; i++) {
10                 console.log("第"+i+"个标签："+_body.childNodes[i].nodeName);
11             }
12         }
13     </script>
14 </head>
15 <body><a href="#"></a><br /></body>
16 </html>
17 <script></script>
18 <!--注释-->
复制代码

IE输出结果

 

但是开发中我们一般会忽略文本元素节点和注释元素节点，简单介绍下过滤掉这些标签的一种方式：

Dom对象中，每个标签元素对象都有一个nodeType属性，分别对应的值如下

标签节点的类型： 1
文本节点的类型： 3
注释节点的类型： 8

code：

复制代码
var _body = document.getElementsByTagName("body")[0];
            for (var i = 0; i < _body.childNodes.length; i++) {
                if (_body.childNodes[i].nodeType == 1) {
                    console.log("第" + i + "个标签：" + _body.childNodes[i].nodeName);
                }
                
            }
复制代码

 

posted @   酒香逢  阅读(5932)  评论(7)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示