渲染引擎的渲染过程解析html、构建dom树构建渲染树(解析样式信息)布局渲染树(布局dom节点)绘制渲染树(绘制dom节点)
特点
1.1课程介绍
1.DOM是Docunment、object、Model的缩写,直译过来就是文档对象模型。
2.DOM的地位和作用
1.HTML→CSS(定义样式)
2.HTML→JavaScript(赋予行为)
通过JavaScript实现页面的交互和动画效果等等。
3.那么JavaScript通过什么来实现的呢?
1.通过ECMAScript标准,我们可以编写程序让浏览器来解析
2.利用ECMAScript我们可以通过BOD对象来操作浏览器窗口、
浏览器导航对象、屏幕分辨率、浏览器历史、Cookies等等
3.但是通过BOD来实现的交互远远不够,要实现页面的动态交互
和效果,操作HTML才是核心。
4.那么如何操作HTML呢,那就是DOM。简单来说,DOM给我们提
供了用程序来动态控制HTML的接口,也就是早期的DHTML的
概念。
5.因此DOM处在JavaScript赋予HTML具备动态交互的核心地位
上。
注:BOM(Browser Object Model) 是指浏览器对象模型
cookies (从客户端的硬盘读取数据的一种技术)
3.DOM探索系列课程要点
1.想要安全的操作DOM必须等到页面上所有的HTML都解析成DOM节点,
才能进行操作,因此了解DOMReady是第一步。
2.接着我们来探究节点,学习文档和节点的类型,元素节点的判断、
元素节点的继承层次、以及节点的分类等内容。
3.然后学习节点的操作,比如节点创建与删除、节点查找与筛选等。
4.接着学习表格与表单的操作
5.最后我们探讨属性系统和样式设置
6.顺序图
1.DOMReady→2.节点探究→节点创建与删除→节点查找与筛选→
表单与表格操作→属性系统→样式设置
4.基础详解篇课程要点
1.首先通过滑动门特效课堂案例感性认识DOM在开发中是如何运用的
2.其次,了解什么DOM以及与DOM相关的基础概念
3.重新认识HTML与XHTML文档类型,以及文档的各种节点类型
4.接着详细的实现DOMReady
渲染流程。
nodeName与nodeValue
DOM -- document object model 文档对象模型
<!DOCTYPE html>
<html>
<head>
<meeta charset="utf-8">
<title>nodeType</title>
</head>
<body>
<div id="contaiainer">这是一个元素节点</div>
<script>
var divNode=document.getElementById("container");
if (divNode.nodeType==Node.ELEMNT_NODE){
}
</script>
</body>
</html>
在这种幸存者
(function(){ /* code */ }()); // 老道推荐写法(function(){ /* code */ })(); // 当然这种也可以
(function(test){
alert(test);
}(123));
offsetWidth: 获取的是盒子最终的宽 offsetHeight: 获取的是盒子最终的高
li内可以包含div标签
块级元素与块级元素并列,内联元素与内联元素并列
最严谨的判断方法 是否区分大小写
DOM级别
DOM0级
IE4.0和Netscape1支持的
DOM1级
DOM Core/DOM HTML
DOM2级
DMO Views/DOM Events/DOM Style/DOM Traversal and Range
DOM3级
DOM Load And Save/DOM Validation
此案例对dom作用的体现值得好好学习。其它比如用for循环为不同的集合元素赋予事件属性也值得学习。
表格设置系列
热点链接系列
块状元素与内联元素嵌套规则
块状元素与内联元素
isElement 是否是元素节点
isHTML 是否是HTML的元素节点
isXML 是否是XML的元素节点
contains 是否是包含关系
元素节点类型的Number
domReady实现策略:
window.onload // 所有资源都加在完毕后才会调用(不适用图片过多的页面)
DOMContentLoaded事件 //可以通过Jquery的 $(document).ready(function(){})实现原理解释用了DOMContentLoaded ;
html标签元素经过html解析,依据dom标准,生成dom树,css样式代码经过css解析成样式规则,webkit使用Attachment来连接dom节点和可视化信息,来构建渲染树。 渲染树由渲染对象来组成,并使用layout来表示元素的布局,接着遍历渲染树,最后在浏览器绘制出页面。
这四步仅仅是HTML的渲染过程,①解析HTML,构建DOM树(将标签转化为节点) ——>
②解析样式信息,构建渲染树(外部css文件、style标签) ——>
③布局渲染树,即布局DOM节点(确定每个节点在屏幕上的确切坐标) ——>
④绘制渲染树,即绘制DOM节点(遍历渲染树,使用UI后端层绘制每个节点)
节点的nodeName与nodeValue
节点的类型
文档类型:<br> 1.超文本标记语言,HTML(Help Text Markup Language)W3C万维网联盟维护<br> -用来显示数据,重点是如何显示数据<br> -使用定义的标准标签,html标签作为根元素<br> 2.可扩展标记语言,XML(Extensable Markup Language)<br> -用来描述数据,重点是什么是数据,如何存放数据<br> -与HTML一样,由标签、属性和子节点组成<br> -标签名可根据描述数据的语义进行定义,可以是英文或者汉字
DOM文档对象模型
reset.css链接地址:
http://meyerweb.com/eric/tools/css/reset/
object适用于IE浏览器,embed适用于非IE浏览器
11:07