首页 > 代码库 > DOM详解

DOM详解

2024-09-27 04:59:01   217人阅读

浏览器工作的基本流程

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详解


联系
我们