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

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

首先你要了解浏览器渲染的顺序:
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
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值