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

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. 实现一个竖直的显示表头的表格(vue版本)

    今天遇到一个问题,实现这样一个竖直的显示表头的表格,如下图.默认显示两列. vue实现代码如下:   tableComponent.vue:   <template> <table ...

  2. c# 逆波兰式实现计算器

    语文不好,不太会组织语言,希望不要太在意. 如题,先简要介绍一下什么是逆波兰式  通常我们在写数学公式的时候  就是a+b+c这样,这种表达式称为中缀表达式,逆波兰式又称为后缀表达式,例如a+b 后缀 ...

  3. Intellij Idea 用Maven 创建Hibernate 项目

    第一步:创建maven项目 2. 3. 4.第三步保存之后进行下一步 到此点击finish maven项目创建成功,点击完成后会进行一系列jar包的下载 maven 仓库的默认存储位置 第二步:连接数 ...

  4. 一个web应用的诞生(11)--在探首页

    就要面对本章的一个难点了,说是难点可能仅仅对于我来说,毕竟我是一个js渣,既然首页打算使用动态加载的形式,那么与后台交互的方式就要进行选择,目前比较流行的为RESTful的形式,关于RESTful的文 ...

  5. 使用charles抓取htpps的方法

    自己整理的步骤做个记录 1.下载证书,官方地址:http://www.charlesproxy.com/ssl.zip 可直接点击链接下载:http://charlesproxy.com/getssl ...

  6. 读书笔记 effective c++ Item 54 让你自己熟悉包括TR1在内的标准库

    1. C++0x的历史渊源 C++标准——也就是定义语言的文档和程序库——在1998被批准.在2003年,一个小的“修复bug”版本被发布.然而标准委员会仍然在继续他们的工作,一个“2.0版本”的C+ ...

  7. Javascript使用克隆的原型模式

    ECMAScript 5中提供了Object.create()方法. 使用这个方法很容易克隆一个一模一样的对象. var animal=function(){ this.blood=100; this ...

  8. ssh整合时报出的异常及解决办法

    com.opensymphony.xwork2.inject.DependencyException: com.opensymphony.xwork2.inject.ContainerImpl$Mis ...

  9. Markdown - 语法简介

    标题 在文字里书写不同数量的“#”可以完成不同的标题,如下: # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 列表 无序列表的使用,在 ...

  10. Codeforces Round #410 (Div. 2)C题

    C. Mike and gcd problem time limit per test 2 seconds memory limit per test 256 megabytes input stan ...