5.5 前端学习笔记--domReady，元素节点

HTML DOM 即文本对象模型

HTML标签必须通过浏览器解析后才会成为DOM

CSS

HTML--->渲染引擎--->浏览器显示

图片

 

渲染流程（结构的渲染）：

解析HTML 构建DOM树-->构建渲染树（解析样式信息）-->布局渲染书（布局DOM节点）-->绘制渲染书 绘制DOM节点

 

实现策略：

1.使用计时器 setTimeout()超时

2. window.onload=function(){...}

页面所有元素都加在完毕才出发函数更安全。但是仅仅只限于在资源少的时候可以使用，如果外部资源过多，要等所有元素加载完成，会影响用户体验

3. ready回调（jQuery实现） 分两种情况

$(document).ready(function()){...}

3.1 支持DOMContentLoaded事件的浏览器使用DOMContentLoaded

3.2 低版本IE，使用hack兼容

原理：通过IE中的document.documentElement.doScroll('left')来判断DOM树是否创建完毕

 

HTML元素节点

使用数值常量来判断节点类型（IE浏览器不兼容其他形式），使用数值常量作为返回类型。

判断元素节点的类型。

isElement、isHTML、isXML、contains（节点的包含关系）

判断包含关系时，只能用元素节点，否则低版本的浏览器可能不支持

 

 

HTML 制作页面（心得体会）

1. 重置页面样式 normalise.css reset.css

2. 将页面分成页头、内容、页脚。每做一张网页，有限考虑结构，再做样式。布局的顺序由大到小。

3. 引入的文件越多，浏览器的请求越多，速度越慢。

4. 根据功能划分模块。

5. 一旦子元素开始浮动，它的父元素就会开始坍缩，并坍缩到一个合适的值。

6. 字体不同容易造成行高不同，并且很难找到原因。