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树:

posted @ 2017-05-28 20:17  沉江、小鱼  阅读(646)  评论(0编辑  收藏  举报