js Dom树结构分析
对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树结构分析的更多相关文章
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- JS DOM属性+JS事件
DOM属性 console.log(ele.attributes) 获取ele元素的属性集合 ele.attributes.getNamesItem(attr).nodeValue 获取指定属性值 e ...
- JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- 货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示 由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- basket.js 源码分析
basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此 ...
- js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- Js DOM 详解
DOM事件类 基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...
随机推荐
- UIWebview 禁止某个方向滚动
Enable Horizontal scrolling and disable Vertical scrolling: myWebView.scrollView.delegate = self; [m ...
- 七个你必须重视的 Git 使用技巧
与其他技术相比,Git应该拯救了更多开发人员的饭碗.只要你经常使用Git保存自己的工作,你就一直有机会可以将代码退回到之前的状态,因此就可以挽回那些你深夜里迷迷糊糊犯下的错误. 尽管这么说,Git的命 ...
- 【转】【阮一峰的网络日志】Git 使用规范流程
作者: 阮一峰 日期: 2015年8月 5日 团队开发中,遵循一个合理.清晰的Git使用流程,是非常重要的. 否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护. 下面是Th ...
- Shell until循环
until 循环执行一系列命令直至条件为 true 时停止.until 循环与 while 循环在处理方式上刚好相反.一般while循环优于until循环,但在某些时候,也只是极少数情况下,until ...
- C语言 小游戏之贪吃蛇
还记得非常久曾经听群里人说做贪吃蛇什么的,那时候大一刚学了C语言,认为非常难,根本没什么思路. 前不久群里有些人又在谈论C语言贪吃蛇的事了,看着他们在做,我也打算做一个出来. 如今大三,经过了这一年半 ...
- web配置nagios工具
Nagios是一款开源的免费网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报警第一时间通知网站运维人员, ...
- linux shell less 命令---转
less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...
- mysql 导入excel 或 .csv
第一步 导出excel 去掉列头,设置文本里面格式
- java转义xml中的多余尖括号
xml中的敏感字符是尖括号,如果xml的值中含有尖括号,那么在解析的时候就会报错,如: <?xml version="1.0" encoding="UTF-8&qu ...
- 路E施工管理ERP系统
前 景 目前公路工程由于点多.线长.面广.周期久.投资大等原因,管理很难到位,施工过程中存在着大量问题: 规章制度欠缺或不健全,即便是有好的规章制度,在施工过程中也往往形同虚设,不能与现场施 ...