南大软院大神养成计划实施——第八天

今天是南大软院大神养成计划实施第八天。又是一个星期的开始,今天学习的内容主要是DOM探索之基础详解篇的前3章,因为在上课外加其他事情,这部分的知识也是新知识,所以今天就没有学习完这部分的知识,只是学习了60%,但是这60%的知识也教会了我许多。

在详细讲解DOM之前,讲师先给我们讲了一个热身案例——滑动门,在一些网站的首页,我们常常能看见一些滑动的效果,比如一组图片排列在一起,然后点击某一张图片,某一张图片就会滑动出现,假如网页加上这些效果,那么用户就会给这个网站设计加分。那么滑动门是如何实现的呢?这里我只提到需要用到的知识和思路,实现这个效果需要用到position:relative和position:absolute,将外围的div设置为相对定位,然后里面的图片设置为绝对定位,这样图片的位置就会相对于div进行设置,通过获取相应的元素,然后设置图片的的绝对位置,就可以实现了滑动门效果,其中需要了解一些参数。

javascript 中 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变
你代码弹出为1,可能是图片没有正常加载显示。
clientWidth、offsetWidth、clientHeight区别
IE6.0、FF1.06+:
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
offsetWidth = width
offsetHeight = height
offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width

上面就是我们需要了解到的一些知识。接下来讲师就可以详解DOM了。

首先了解一下什么是DOM。文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的"浏览器大战",双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,计有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。然后我们了解一下web浏览器对DOM的支持


接下来讲师讲到了节点的类型。什么是节点的,我们通常把一个文档划分为多个节点,节点是HTML文件中有效而完整的结构的最小单元。内含标示组的节点,加上必要属性、属性值及内容,便可构成一个元素。节点的标志符<>。然后我们看看节点的类型都有哪些。


通过DOM对象,我们可以获取某一个节点的名称和数值,接下来就是节点获取相关信息的方法:

获取某个元素的节点名称和节点值:nodeName和nodeValue属性值;
获取该节点的属性:ele.attributes; //返回类数组对象的该元素的所有属性
获取该节点的子节点:ele.childNodes;//返回所有子节点的类数组对象
document.doctype; // 获取文档类型

我们只要在上述的代码后面加入".nodeName"或者".nodeValue",就可以获得相关的名称或者数值。接下来我们来看下各类型的节点的名称和数值


.

讲完节点之后,讲师讲到了最重要的内容,就是domReady,什么是domReady呢?对于一些初学者来说,常常会存在这样的误区,HTML标签就是dom节点,这个想法其实是错的,HTML标签首先要通过浏览器解析,然后浏览器会构建一个节点树,当所有节点树构建完成,那么这时候就叫domready。让我们先看看浏览器渲染引擎的基本渲染过程:


这就是大致的渲染过程。那么说了这么多,domready会影响我们的网页显示吗?答案是会的,假如我们编写的JavaScript放在html标签前面,那么假如我们想改变《p》标签里的文字颜色,那么此时是没有用的,因为JavaScript函数在节点树构建完成之前,就进行dom对象操作,肯定会无效。那么如何解决这个问题呢?讲师讲到了三个主要的方法:

1.用settimeout,2window。load;3.实现domready

第一种方法只能勉强解决这个问题,但是用户会发现,因为文字在变幻颜色的时候会闪烁,给用户不好的用户体验。window.load在少量的元素时有效,但是在大量的元素时,网页需要先加载所有的元素,这时候需要消耗大量的用户时间,这个阶段,用户无法进行与js有关的操作,用户有可能就会关闭网页,所以这也不是有效的解决 方法,最有效的解决方法就是实现domready。下面看domready的实现方法:


由于讲师实现的方法比较复杂,所以在这里不做详细的解释。在这里给大家一个博客http://www.cnblogs.com/JulyZhang/archive/2011/02/12/1952484.html

这个博客里详细讲解了各个主流框架的domready实现方案。

今天的学习就是这么多,欢迎大家进行学习交流,期待明天的学习。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值