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

            }
时间: 2024-10-14 10:40:14

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

JS DOM操作(创建、遍历、获取、操作、删除节点)

创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic

JS+DOM conclusions

Javascript + DOM lessions from Codecademy practice link: http://feraljas.gitee.io/piano-plus/ Basic JS+DOM: 理解如何交互,何为interaction Building interactive website with JS <style> used to embed CSS codes <script> used to embed JS codes 使HTML文件知道如何加载

JS DOM编程艺术的学习—— JS学习笔记2015-7-5(第76天)

由于看高程3卡住了,所以现在在学习JS DOM编程艺术来巩固基础: 一.在看JS DOM 编程艺术的时候,有个作者提到的方法很实用, 就是在JS中变量和函数的命名方法:  变量的命名方法为使用下划线,比如: var temp_color = ['red','blue']; 函数就使用驼峰法,比如: function current_date(){}; 这样的习惯可以帮助理解,提高可读性,在理解变量和函数名的时候就很方便了: 二.还有个收获就是关于“对象”的理解又加深了 之前对于什么对象的属性,对

jqueryui.position.js源码分析

最近要写前端组件了,狂砍各种组件源码,这里分析一款jqueryui中的posistion插件,注意,它不是jqueryui widget,首先看下源码总体结构图 1.看到$.fn.position 是不是很熟悉?嗯,就是将position方法挂载到原型上,然后控件就可以直接调用了, 2.$.ui.position 这个对象是,用来进行冲突判断的,什么冲突?就是元素与父容器所拥有的空间以及当前可用窗口的控件,默认情形下,如果冲突则采用反转方向的方式显示:对这一点不要惊讶,一切都是为了正常显示而用的

js DOM 扩展

1. 选择符API querySelector()          返回匹配的第一个元素,接收一个 CSS 选择符.没有找到返回 null. querySelectorAll()      返回所有匹配的一个 NodeList, 这是一个快照不会动态改变.接收一个 CSS 选择符. mathesSelecttor()      如果调用元素与该选择符匹配,返回true, 否则返回 false. 接收一个 CSS 选择符. 2. 与类相关的扩充 getElementsByClassName()

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

DOM是一种适用于多种环境和多种程序设计语言的通用型API. 如果想要把本书(JS DOM编程艺术)学到的DOM技巧运用在web浏览器以外的应用环境里,严格遵守“第1级DOM”能够让你避免与兼容性有关的任何问题: tips:setAttribute是第1级DOM; 图片切换初级js: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/

JS DOM(文档对象模型)与BOM(浏览器对象模型)

在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTML节点的操作,CSS的操作和HTML事件的监听和处理.BOM不要包括浏览器相关的一些属性和方法. DOM知识点1.改变页面的元素和属性a.获取元素的方法:document.getElementById()document.getElementsByTagName()document.getEleme

JS DOM 编程艺术 随笔

DOM 最大的作用就是将整个文档通过节点树来展现.通过类似方法可以获取特定节点,并绑定js方法实现与人的交互. 1.通过dom方法,获取页面的元素(getElementsByTagName/id,通过class(getAttribute))2.获取元素之后,为他们绑定行为(点击/其他)的处理事件3.最后把所有函数绑定到window.onload()函数上面去 onload = function(){function1function2...} plus 小技巧: <a onclick=>函数

Node.js内存泄漏分析

在极客教育出版了一个视频是关于<Node.js 内存泄漏分析>,本文章主要是从内容上介绍如何来处理Node.js内存异常问题.如果希望学习可前往极客学院: 本文章的关键词 - 内存泄漏 - 内存泄漏检测 - GC分析 - memwatch 文章概要 由于内存泄漏在Node.js中非常的常见,可能在浏览器中应用javascript时,对于其内存泄漏不是特别敏感,但作为服务器语言运行时,你就不得不去考虑这些问题.由于很小的逻辑可能导致服务器运行一天或者一个星期甚至一个月才会让你发现内存不断上涨,而