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

曾经终败给现在 2022-08-14 05:34 137阅读 0赞

今天是南大软院大神养成计划实施第八天。又是一个星期的开始，今天学习的内容主要是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的支持

![Image 1][]

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

![Image 1][]

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

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

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

![Image 1][]

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

![Image 1][]

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

1.用settimeout，2window。load；3.实现domready

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

![Image 1][]

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

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

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

[Image 1]: