DOM详解
一、浏览器工作的基本流程
1、浏览器开始解析 html 文档，构建 DOM树(DOM tree)，DOM 树的节点由文档的标签、属性、文本等组成；
2、解析外部 CSS 文件及 style 标签中的样式信息，这些样式信息将结合 DOM 树中可见的部分构建另一棵树——渲染树(render tree)，DOM 树和渲染树并不是一一对应的，例如DOM 树中的 head 节点以及 display 属性为 none 的节点就不会显示在渲染树中，但是 visibility 属性值为 hidden 的节点仍会显示；
3、渲染树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标；
4、然后就是绘制，即遍历渲染树，并使用 UI 后端层绘制每个节点；
二、DOM 节点类型
在 DOM 文档对象模型中，一共有12种节点类型，它们分别是元素节点、属性节点、文本节点 、CDATA节点 、实体引用名称节点、实体名称节点 、处理指令节点、注释节点、文档节点 、文档类型节点 、文档片段节点 、DTD声明节点
使用 nodeType 属性可以查看节点的常数值，这12种类型分别对应1到12的常数值；
使用 nodeName 属性可以查看节点的名称；
使用 nodeValue 属性可以查看或设置节点的值，格式为字符串；
例如：
//html
<div id="tt">测试文本</div>
//javascript
var tt = document.getElementById("tt");
var te = document.getElementById("tt").firstChild;
alert(tt);//HtmlDIVElement
alert(te);//Text
alert(tt.nodeType+","+tt.nodeName+","+tt.nodeValue);//1,DIV,null
alert(te.nodeType+","+te.nodeName+","+te.nodeValue);//3,#text,测试文本
下图列举出了部分节点之间的关系：
处于右边的节点继承了左边节点的属性和方法，至于每类节点拥有哪些属性和方法可以查参考手册。
例如：tt 是一个 HTMLDivElement 对象，它可以调用 HTMLElement 对象（父节点）的 innerHTML 属性，即 tt.innerHTML = "<p>123</p>"，它也可以调用 Element 对象（祖父节点）的 firstChild、lastChild 等属性，或者 getAttribute() 等方法，它还可以调用 Node 对象（祖先节点）的 nodeType、nodeName、nodeValue 等属性...
三、举例
<!DOCTYPE html>
<html>
<body>
<p>Hello DOM</p>
<div><img src="example.png" /></div>
</body>
</html>
将会被转换为下面的DOM树：
DOM详解的更多相关文章
- 虚拟DOM详解
虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变 ...
- Day04 dom详解及js事件
day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证 上次课内容回顾: JS中ECMAScript用法: JS定义变 ...
- 虚拟Dom详解 - (二)
第一篇文章中主要讲解了虚拟DOM基本实现,简单的回顾一下,虚拟DOM是使用json数据描述的一段虚拟Node节点树,通过render函数生成其真实DOM节点.并添加到其对应的元素容器中.在创建真实DO ...
- 虚拟Dom详解 - (一)
随着Vue和React的风声水起,伴随着诸多框架的成长,虚拟DOM渐渐成了我们经常议论和讨论的话题.什么是虚拟DOM,虚拟DOM是如何渲染的,那么Vue的虚拟Dom和React的虚拟DOM到底有什么区 ...
- JavaScript(2)---DOM详解
JavaScript(2)---DOM详解 一.DOM概念 什么是DOM DOM全称为文本对象模型(Document Object Model),它定义了所有HTML元素的对象和属性,以及访问他们的方 ...
- JavaScript进阶内容——DOM详解
JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...
- XML解析之DOM详解及与SAX解析方法的比较
XML解析(DOM) XML文件解析方法介绍 我们所用到的NSXMLParser是采用SAX方法解析 SAX(Simple API for XML) 只能读,不能修改,只能顺序访问,适合解析大型XML ...
- HTML,javaScript,DOM详解
HTML DOM 教程 DOM 教程 DOM 简介 HTML DOM 定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构. HTML DOM 树 HTML DOM 简 ...
- BOM和DOM详解
DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形 ...
随机推荐
- Kafka0.10.2.0分布式集群安装
一.依赖文件安装 1.1 JDK 参见博文:http://www.cnblogs.com/liugh/p/6623530.html 1.2 Scala 参见博文:http://www.cnblogs. ...
- Python3.5爬虫统计AcFun所有视频,并按各个类别进行Top100排序展示
前(b)言(b): 前段时间对Python产生了浓厚的兴趣,所以决定入门学习了1个多月,后来某时我需要对tomcat做一个压力测试,于是我想到了用Python写一个压力测试的脚本吧!最后捣鼓出了一个脚 ...
- druid 连接kafuk
java -Xmx256m -Duser.timezone=UTC -Dfile.encoding=UTF-8 -Ddruid.realtime.specFile=examples/indexing/ ...
- bigdecimal更精确的浮点处理方式
Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位内有效数,超过16位,double可能会出现内存 ...
- Swift中枚举的总结以及使用
枚举定义了一组具有相关性的数据,是开发者可以再带吗中以一个安全的方式来使用这些值,以又助于提供代码的可读性. 在Swift中,枚举可以分成两种:任意类型的枚举和指定类型的枚举,结构如下: //任意类型 ...
- Android学习探索之运用MVP设计模式实现项目解耦
前言: 一直致力于提高开发效率降低项目耦合,今天想抽空学习一下MVP架构设计模式,学习一下如何运用到项目中. MVP架构设计模式 MVP模式是一种架构设计模式,也是一种经典的界面模式.MVP中的M代表 ...
- openresty源码剖析——lua代码的加载
##Openresty是什么 OpenResty是一个基于 Nginx 与 Lua 的高性能 Web 平台,通过把lua嵌入到Nginx中,使得我们可以用轻巧的lua语言进行nginx的相关开发,处理 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇（十三）数据层优化-表规范、索引优化
本文提要 最近写的几篇文章都是关于数据层优化方面的,这几天也在想还有哪些地方可以优化改进,结合日志和项目代码发现,关于数据层的优化,还是有几个方面可以继续修改的,代码方面,整合了druid数据源也开启 ...
- JS实现排序
排序算法可以分为内部排序和外部排序.内部排序是数据记录在内存中进行排序,外部排序是因排序的数据很大,一次不能够容纳全部的排序记录,在排序中需要访问外存.常见的内部排序算法有插入排序,选择排序,冒泡排序 ...
- 进程间通信系列 之 消息队列函数(msgget、msgctl、msgsnd、msgrcv)及其范例
进程间通信系列 之 概述与对比 http://blog.csdn.net/younger_china/article/details/15808685 进程间通信系列 之 共享内存及其实例 ...