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

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

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title></title>

     <script type="text/javascript">

         window.onload = function () {

             var _body = document.getElementsByTagName("body")[0];

             for (var i = 0; i < _body.childNodes.length; i++) {

                 console.log("第"+i+"个标签："+_body.childNodes[i].nodeName);

             }

         }

     </script>

 </head>

 <body>

     <input type="text" name="txt" value="" /><!--注释-->

     <a href="http://www.baidu.com">content</a><span></span>

     <div style="border:solid red 1px;"></div>

 </body>

 </html>

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

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

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

如下图

此时用IE打开查看html结构

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

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

值得注意的是：

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

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

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

html代码：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title></title>

     <script type="text/javascript">

         window.onload = function () {

             var _body = document.getElementsByTagName("body")[0];

             for (var i = 0; i < _body.childNodes.length; i++) {

                 console.log("第"+i+"个标签："+_body.childNodes[i].nodeName);

             }

         }

     </script>

 </head>

 <body><a href="#"></a><br /></body>

 </html>

 <script></script>

 <!--注释-->

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);

                }

            }

js Dom树结构分析的更多相关文章

  1. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  2. JS DOM属性+JS事件

    DOM属性 console.log(ele.attributes) 获取ele元素的属性集合 ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值 e ...

  3. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  4. 货架工程项目之js dom实现项目工程进度图

    笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...

  5. js DOM优化相关探索

    我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...

  6. basket.js 源码分析

    basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此 ...

  7. js DOM的几个常用方法

    <div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...

  8. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  9. Js DOM 详解

    DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...

随机推荐

  1. Android Monkey

    adb shell "monkey -c android.intent.category.LAUNCHER -c android.intent.category.MONKEY -c andr ...

  2. Ubuntu修改源

    linux里的源,简单理解就是你用 apt-get 命令去下载安装软件时,系统去哪里找这个软件.去的那个位置就是源. linux默认的源是国外的,下载速度比较慢,可以修改为国内的一些好的源地址,例如网 ...

  3. 论在Repository中使用EF框架

    最近在思考框架的事情,从Petshop的传统三层框架过渡到目前的DDD模式. 目前纠结的几个节点是: 1,EF这个ORM框架,有没有必要在 Repository 层封装一下,或者直接在 Service ...

  4. Unity 中关于 BuildSetting 中 “Optimize Mesh Data” 选项的“坑”

    Unity 在底层默认希望为你做尽可能多的优化,降低使用门槛,比如 BuildSetting 中的 Optimize Mesh Data 选项就是一个典型的例子. 这个选项到底有什么用呢?文档描述为: ...

  5. SLua 中继承 C# 类接口 Slua.Class 的一个 Bug。

    由于目前要把大量的代码移植到 lua 中(真是够虐心的),面向对象肯定少不了,项目的代码都是这么设计的,于是就测试 Slua.Class 接口来扩展 C# 的类,发现有点问题,给作者提交了一个 Iss ...

  6. Web---HTTP请求、重定向、转发和数据压缩

    HTTP常用的请求方式包括: GET-最为常见,但发送的数据量很小,发送的数据直接包含到url的后面. POST-可以包含大量数据,数据在请求正文中通过表单进行提交. HEAD,PUT,DELETE. ...

  7. ldr指令总结

    LDR/STR字和无符号字节加载/存储 1,LDR Rd,[Rn]   2, LDR Rd,[Rn,Flexoffset] 3, LDR Rd,[Rn],Flexoffset 4, LDR Rd,la ...

  8. Keepass 2.x 的一些新发现

    近期将 Keepass 从 1.22 升级到了 2.24,经过一番折腾,发现有了很多新功能,也有一些之前被忽视的地方.再一次感叹这个软件的强大,向作者的无私奉献致敬! 其实,这个软件一直有 1.x 和 ...

  9. 各种jee服务器的比较,tomcat, jboss, glassfish, websphere, weblogic

    tomcat, 开源,只是一个 servlet jsp 容器. jboss, 开源,是一个j2ee 应用服务器,容器支持 servlet, jsp, ejb,jms等. 稳定且实现了全部j2ee ap ...

  10. Java分布式优秀资源集合

    这里充分尊重原作者的版本,学习了知识要感激原博主 Runnable.Callable.Executor.Future.FutureTask关系解读 http://blog.csdn.net/zhang ...