Dom树 CSS树渲染树(render树) 规则、原理

最新推荐文章于 2024-05-06 10:57:36 发布

m0_67391518

最新推荐文章于 2024-05-06 10:57:36 发布

阅读量395

点赞数

分类专栏：前端 html 文章标签： npm node.js 前端

本文链接：https://blog.csdn.net/m0_67391518/article/details/123344580

版权

前端不可不学的浏览器渲染机制，阿里年年问，去一个栽一个。听说百度也在考这个，你还不准备学吗？

首先你要了解浏览器渲染的顺序：
1.构建dom 树
2.构建css 树
3.构建渲染树
4.节点布局
5.页面渲染

什么是dom 树？

浏览器将HTML解析成树形的数据结构，简称DOM。
DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。解析树的根节点是Document对象。
在这里插入图片描述

那我们就可以这样操作 dom 树：

<html> 
<head> 
<title>never-online'swebsite</title> 
<script> 
	functionchangedivText(strText){  
	varnodeRoot=document;//这个是根结点  
	varnodeHTML=nodeRoot.childNodes[0];//这个是html结点  
	varnodeBody=nodeHTML.childNodes[1];//body结点  
	varnodeDiv=nodeBody.childNodes[0];//DIV结点  
	varnodeText=nodeDiv.childNodes[0];//文本结点'  
	nodeText.data=strText;//文本节点有data这个属性，  
	因此我们可以改变这个属性，也就成功的操作了DOM树中的一个结点了  
}  
</script> 
</head> 
<body> 
	<div>tutorialofDHTMLandjavascriptprogramming</div> 
	<input onclick="changedivText('change?')" type="button" value="change"/> 
</body> 
</html>

注：
1.跨域除外，跨域通常是在操作frame 上，简单的说，就是两个frame 不属于同一域名。
2.上面的操作为了演示，采用的方法是从根结点一直到文本结点的遍历，在DOM 方法上，有更简洁的方法，这些以后会有更多示例加以说明。

你还可以这样理解 dom 树：
1.DOM树揭示了DOM对象之间的层次关系，这样就方便动态地对html文档进行增删改查。
2.增删改查必须要遵循层次关系
3.文本对象是最底层的节点
4.获取对象的值 .value

什么是CSS树？

在这里插入图片描述
看着有点像 less 写法（less这种预处理语言，就是借用DOM树的思想，来将less这种语法结构，转译成普通的css语法，最终我们用的还是普通的css语法构成的css文件）。

什么是渲染树(render树)？

浏览器在构造DOM树的同时也在构造着另一棵树-Render Tree,与DOM树相对应暂且叫它Render树。我们知道DOM树为javascript提供了一些列的访问接口（DOM API），但这棵树是不对外的。它的主要作用就是把HTML按照一定的布局与样式显示出来，用到

最低0.47元/天解锁文章

m0_67391518

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Dom树 CSS树渲染树(render树) 规则、原理

前端不可不学的浏览器渲染机制，阿里年年问，去一个栽一个。听说百度也在考这个，你还不准备学吗？首先你要了解浏览器渲染的顺序：1.构建dom 树2.构建css 树3.构建渲染树4.节点布局5.页面渲染什么是dom 树？浏览器将HTML解析成树形的数据结构，简称DOM。DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。解析树的根节点是Document对象。
复制链接

扫一扫