慕课网dom深入浅出

• Dom的前提要求是文档全部加载进来后,所有节点对象产生完毕,才操作,这才是正确的dom运行模式
  //所以有的时候为了保险起见,会使用下面代码
  window.onload = function (){}
  //这就是要等所有东西加载完毕在运行代码的意思

但是onload是有缺陷,比如说一个网站的请求是很多图片造成长时间的卡顿不就完了?解决办法是什么?

QQ截图20180422223115.png

认识dom

• dom把整个页面模拟成节点,除此之外还提供接口函数让JavaScript来对html页面进行操作
  //有了dom这个API,JavaScript就可以对html页面做增删改查了
• dom产生的原因:
  在dom之前有DHTML来做这样的工作,因为浏览器厂商之间的竞争,导致两种DHTML标准出现,因此W3c推出DOM
• dom几个版本
  //DOM1/2/3

DOM探索基础

//文档类型与节点类型
文档类型发展历史
GML SGML HTML XMl
//前两个是标准通用语言,W3c在此基础上发明了HTML,随着发展又衍生出了xml
//html侧重于显示数据,以及如何更好低显示数据
//XML侧重于描述数据,什么是数据?如何存储数据(存放格式化数据)

节点的类型

QQ截图20180422220526.png

DOMready

html页面元素成为节点是有一个过程的,这个过程就是要浏览器来转化
//标签和节点是两回事,你要通过操作DOM来让浏览器把相应的元素包装成节点
//浏览器中进行这样的工作的就是浏览器的渲染引擎

浏览器的渲染引擎是如何工作的呢?

1.通过浏览器发送请求获取内容
2.解析html以构建DOM树(构建DOM节点)
3.构建渲染树(解释样式信息)
4.布局渲染树(布局DOM节点)
//就是确定每个节点在浏览器窗口上的每个坐标
5.绘制渲染树(绘制DOm节点)
//就是给每个节点具体上色

webkit引擎如何渲染的?

QQ截图20180422222204.png

意外收获

!!el&&el.NodeType ===1
//为什么要这样写代码来判断是否是元素节点呢?
//因为JavaScript是动态语言,类型可以转换,再加上,使用xxx.NodeType这些挂载在对象属性上的方法,是可以伪造的

var a = {
NodeType:1
}

//如上所示,这样是不是把a也当做一个元素啦?
所以基于这些原因,当JavaScript 代码要做判断的时候往往要用上&&来进行多层筛选,这样才能确保达到我们的目的