慕课网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 代码要做判断的时候往往要用上&&来进行多层筛选,这样才能确保达到我们的目的
