序
W3C推出的标准化DOM,几乎没有浏览器不支持。这对网页设计者意味着可以用简单的“对象检测”代码来取代那些复杂的浏览器嗅探代码,而按照DOM编写出来的javascript页面不像过去那样容易出问题。
只要运用得当,并且注意避开那些“经典的”javascript陷阱,DOM编程技术就可以成为Web开发工具箱里又一件功能强大甚至是不可或缺的好东西。
永远不要假设Ajax(或javascript等)一定可用。
javascript解释器(对web应用而言就是浏览器)。
归根结底,代码都是思想和概念的体现。所以,重要的是理解这些代码背后的“如何”和“为什么”。平稳退化、渐进增强、以用户为中心的设计对任何前端Web开发工作都非常重要。
JavaScript简史
我们可以利用DOM给文档增加交互能力、就像利用CSS给文档添加各种样式一样。
javascript是一种脚本语言,通常只能通过Web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行。因为需要web浏览器进行解释和执行,所以javascript脚本不像Java和C++等编译型程序设计语言那样用途广泛。
什么是DOM?简单说,DOM就是一套对文档的内容进行抽象和概念化的方法。在现实世界中,人们对所谓的“世界对象模型”都不会陌生。例如,当用“汽车”,“房子”和“树”等名词来称呼日常生活环境里的事物时,我们可以百分百肯定对方知道我们说的是什么,这是因为人们对这些名词所代表的东西有这同样的认识。这个道理对网页也同样适用。javascript的早期版本向程序员提供了查询和操控web文档某些实际内容(主要是图像和表单)的手段。
现在人们通常把这种试验性质的初级DOM称为“第0级DOM”。在还未完成统一标准的初期阶段,“第0级DOM”的常见用途就是翻转图片和验证表单数据。
DOM是一种API(应用编程接口)。简单说,API就是一组已经得到有关各方共同认可的基本约定。在现实世界中,相当于API的例子包括摩尔斯马、国际时区、化学元素周期表。以上这些都是不同科学领域的标准,它们使得人们能够更方便的交流与合作。
在前面对javascript发展简史的介绍中,笔者特别提到,不同的浏览器采用了不同的办法来完成同样的任务。
关联数组
var lennon=Array(); lennon["name"]="john"; lennon["year"]=1940; lennon["living"]=false; 这样的数组叫关联数组。
由于可以使用字符串来代替数字值,因而代码更具有可读性,但不推荐大家使用。本质上,在创建关联数组时,你创建的是Array对象的属性。在javascript中,所有的变量实际上都是某种类型的对象。比如,一个布尔值就是一个Boolean类型的对象,一个数组就是一个Array类型的对象。
函数
函数的真正威力体现在,你可以把不同的数据传递给它们,而它们将使用这些数据去完成预定的操作。我们把传递给函数的数据称为参数。
函数的真正价值体现在,我们还可以把它们当做一种数据类型来使用,这意味着可以把一个函数的调用结果赋值给一个变量。
请记住,函数在行为方面应该像一个自给自足的脚本,在定义一个函数时,我们一定要把它内部的变量全都明确的声明为局部变量。如果你总是在函数里使用var关键字来定义变量,就能避免任何形式的二义性隐患。
对象
对象: 对象是自包含的数据集合,包含在对象里的数据可以通过两种形式访问--属性和方法。与某个特定对象相关联的变量被称为这个对象的属性;只能通过某个特定对象去调用的函数被称为这个对象的方法。
内建对象: javascript提供了一系列的预先定义好的对象,这些可以拿来就用的对象称为内建对象。例如:Array、Math、Date对象等。
宿主对象: 除了内建对象,javascript还可以使用一些已经预定义好的其他对象。这些对象不是由js语言而是由它的运行环境提供的。具体点web应用,这个环境就是浏览器。由浏览器提供的预定义对象被称为宿主对象。例如:window对象、Form、Image、Elemnt等。另一种宿主对象也能用来获得网页上的任何一个元素的信息,它就是document对象。
DOM
当创建了一个网页并把它加载到Web浏览器中时,DOM就在幕后悄然而生。它把你编写的网页文档转换为一个文档对象。document对象的主要功能就是处理网页内容。DOM代表着加载到浏览器窗口的当前网页。浏览器提供了网页的地图(或者说模型),而我们可以通过javascript去读取这张地图。
节点: 元素节点、文本节点、属性节点 文档中的每个元素节点都是一个对象。
继承: 类似于DOM,CSS也把文档的内容视为一颗节点树,节点树上的各个元素将继承其父元素的样式属性。
获取元素节点: 有3中DOM方法,getElementById、getElementsByTagName、getElementsByClassName
总结: DOM提供的五个方法getElementById、getElementsByTagName、getElementsByClassName、getAttribute、setAttribute;以及DOM提供的其它属性和方法:nodeName、nodeValue、childNodes、nextSibling和parentNode。
最佳实践
如果要使用javascript,就要确认:这么做会对用户的浏览体验产生怎样的影响?还有个更重要的问题:如果用户的浏览器不支持javascript该怎么办?
平稳退化: 可以让用户在它们的浏览器不支持javascript的情况下仍能顺利的浏览你的网站,这就是平稳退化。就是说,虽然某些功能无法使用,但最基本的操作仍能顺利的完成。
渐进增强: 所谓“渐进增强”就是用一些额外的信息层去包裹原始数据。按照“渐进增强”原则创建出来的网页,基本都符合“平稳退化”原则。
对象检测: 检测浏览器对javascript的支持程度。
浏览器嗅探技术: “浏览器嗅探”是指通过提取浏览器供应商提供的信息来解决向后兼容问题。现在,充满风险的浏览器嗅探技术正在被更简单也更健壮的对象检测技术所取代。
减少请求数量通常都是在性能优化时首先要考虑的。一般来说,根据HTTP规范,浏览器每次从同一个域名中最多只能同时下载两个文件。
不管什么时候,只要是查询DOM中的某些元素,浏览器都会搜索整个DOM树,从中查找尽可能匹配的元素。另一个需要注意的地方,就是尽量减少文档中的标记数量。过多不必要的元素只会增加DOM树的规模,进而增加遍历DOM树以查找特定元素的时间。