一、浏览器工作的基本流程

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详解的更多相关文章

  1. 虚拟DOM详解

    虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变 ...

  2. Day04 dom详解及js事件

    day04 dom详解 DOM的基础 Document对象 Element对象 Node对象 innerHTML 事件处理 表单验证   上次课内容回顾: JS中ECMAScript用法: JS定义变 ...

  3. 虚拟Dom详解 - (二)

    第一篇文章中主要讲解了虚拟DOM基本实现,简单的回顾一下,虚拟DOM是使用json数据描述的一段虚拟Node节点树,通过render函数生成其真实DOM节点.并添加到其对应的元素容器中.在创建真实DO ...

  4. 虚拟Dom详解 - (一)

    随着Vue和React的风声水起,伴随着诸多框架的成长,虚拟DOM渐渐成了我们经常议论和讨论的话题.什么是虚拟DOM,虚拟DOM是如何渲染的,那么Vue的虚拟Dom和React的虚拟DOM到底有什么区 ...

  5. JavaScript(2)---DOM详解

    JavaScript(2)---DOM详解 一.DOM概念 什么是DOM DOM全称为文本对象模型(Document Object Model),它定义了所有HTML元素的对象和属性,以及访问他们的方 ...

  6. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

  7. XML解析之DOM详解及与SAX解析方法的比较

    XML解析(DOM) XML文件解析方法介绍 我们所用到的NSXMLParser是采用SAX方法解析 SAX(Simple API for XML) 只能读,不能修改,只能顺序访问,适合解析大型XML ...

  8. HTML,javaScript,DOM详解

    HTML DOM 教程 DOM 教程 DOM 简介 HTML DOM 定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构. HTML DOM 树 HTML DOM 简 ...

  9. BOM和DOM详解

    DOM介绍 D(文档)可以理解为整个Web加载的网页文档,O(对象)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,M(模型)可以理解为网页文档的树形 ...

随机推荐

  1. donet体系结构

    一.C#与.NET的关系 1.粗略地説,.net是一种在Windows平台上的编程架构----一种API.2.C#编译器专门用于.net,这表示用C#编写的所有代码总是使用.NET Framework ...

  2. linux常用脚本

    转载于http://justcoding.iteye.com/blog/1943504 我们在运维中,尤其是linux运维,都知道脚本的重要性,脚本会让我们的 运维事半功倍,所以学会写脚本是我们每个l ...

  3. 浅析 Jndi / DataSource / ConnectionPool 三者

    最近有个用户量 5W-10W 的 web 应用,频繁导致 weblogic 崩溃,让运维组很难受. 通过几天跟踪系统日志和 weblogic 运行状况,发现报错的姿势有很多,其中对定位问题比较关键的报 ...

  4. (转)使用string.Format需要注意的一个性能问题

    今天,我在写C#代码时,突然发现一个最熟悉的陌生人 —— string.Format.在写C#代码的日子里,与它朝夕相伴,却没有真正去了解它.只知道在字符串比较多时,用它比用加号进行字符串连接效率更高 ...

  5. VirtualBox实现内外网络互访问的配置

    作者 jrl137824675 来源地址:http://www.2cto.com/os/201205/133370.html   环境: 宿主机操作系统            Windows XP s ...

  6. VS2017使用 SQL Localdb问题两则

    VS2017使用 SQL  Localdb问题两则 来博客园不算短了,总是索取者.最近使用VS2017,遇到一些问题,在解决时总是找不到拿来就能用的解决方案,在多方寻找,自行探索下,总算圆满解决,在这 ...

  7. Spring+SpringMvc+Mybatis 框架的搭建（二）

    4.4 mybatis-config.xml 这部分可以配置也可以不配置. <?xml version="1.0" encoding="UTF-8" ?& ...

  8. Java IO最详解

    初学java,一直搞不懂java里面的io关系,在网上找了很多大多都是给个结构图草草描述也看的不是很懂.而且没有结合到java7 的最新技术,所以自己来整理一下,有错的话请指正,也希望大家提出宝贵意见 ...

  9. 在SCIKIT中做PCA 逆运算 -- 新旧特征转换

    PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取数据的主要特征分量,常用于高维数据的降 ...

  10. percona-xtrabackup安装

    二进制包安装(推荐安装方式,不用安装依赖包,非常方便): 1.下载安二进制包:      wget https://www.percona.com/downloads/XtraBackup/Perco ...