JavaScript DOM编程艺术--笔记

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树以查找特定元素的时间。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容