读书笔记:JavaScript DOM 编制程序艺术(第叁版)

读完还是可以学到很多的基础知识,那里记录下,方便回顾与当时查看。

内容也有友好的部分互补。

JavaScript DOM 编制程序艺术(第3版)

1、JavaScript简史

JavaScript由Netscape集团与Sun集团合作开发,在JavaScript此前,web浏览器只是突显文本文书档案的软件,JavaScript之后,网页内容不再局限于单调的文本,交互性明显改革。在JavaScript的率先个版本,即JavaScript
1.0本子,出现在1994年出产的Netscape Navigator 2浏览器中。

在JavaScript 1.0文告时,浏览器市场重点是Netscape
Navigator,后来IE初步追逐,微软在IE3时公布了和睦的VBScript语言,同时以JScript为名公布了JavaScript的率先个版本,并神速追上了Netscape的步履。面对微软的竞争,Netscape与Sun公司联合ECMA(南美洲总括机创立商协会)对JavaScript语言进行了尺度,于是应运而生了ECMAScript语言,那是相同种语言的另叁个名字。

到了一九九七年,JavaScript、ECMAScript、JScript–随便怎么称呼,已经站稳了剧本,Netscape与微软的第2版浏览器都差别水平的支撑JavaScript
1.1语言。

在JavaScript早期版本向程序员提供了询问和操控Web文书档案某个内容的手法,比如:

document.images[2]
dodument.forms['details']

至今人们平日把那种试验性质的起码DOM称为“第0级DOM”(DOM level
0),在还未形成统一标准的初级阶段,“第0级DOM”的普遍用途是扭曲图片和表达表单数据。

在一九九七年2月,Netscape Navigator
4公布,3月,IE4公布。那八个早起版本都对他们的浏览器实行了革新,大幅度增加了DOM,同时也触发到二个新名词:DHTML。

噩运的是,NN4和IE4浏览器选择了三种不包容的DOM。程序员要写两套代码。

NN4中DOM成分为层,层有唯一的ID:

document.layers['myElement']

而微软的DOM须要如此引用:

document.all['myElement']

就在DOM发生分裂,浏览器厂商大战时,W3C推出了1个原则的DOM,令人欣慰的事,Netscape与微软以及其余浏览器创设商都接受了新的标准,并于一九九八年7月做到了“第壹级DOM”(DOM
Level 1)。

二、JavaScript语法

三、DOM

DOM:Document Object Model 文书档案对象模型

JavaScript中的对象分为两种:

一 、用户定义对象:由程序员创造的目的
二 、內建对象:内建在JavaScript语言中的对象,如Array、Math和Date等
三 、宿主对象:由宿主环境(浏览器)提供的靶子,如window、document

window对象对应着浏览器窗口自个儿,这一个目的的属性和办法一般号称BOM(浏览器文书档案模型)。

3.4 节点

先看三种:成分节点、文本节点、属性节点

<p class="info">my name is Gavin</p>

标签的名字就是因素的名字,那当中有贰个成分节点p,一个文本节点“my name is
加文”,以及三个属性节点class=”info”。

属性节点总是被含有在要秋日点中,并不是有着的因秋日点都有总体性节点,在富有的习性都被成分包罗。

3.5 获取成分

  • getElementById()
  • getElementsByTagName()
  • getElementsByClassName() — HTML5 DOM

内部getElementById()再次回到贰个对象,getElementsByTagName()与getElementsByClassName()重返二个对象数组。

各类节点都以三个指标。

3.6 获取和装置属性

  • object.getAttribute( attribute )
  • object.setAttribute( attribute, value )

④ 、案例研商:JavaScript图片库

setAttribute方法是“第拔尖DOM”(DOM level
1)的组成都部队分,能够设置任意成分的节点的任意属性。在“第一流DOM”出现在此以前,仍可以用其它3个格局设置抢先5分之安慕希素的性能,这么些主意到现行反革命照旧有效。

img.src = 'xxx'

// 等价
img.setAttribute( 'src', 'xxx' );

使用“第叁流DOM”的优势是:

  • 不用专门纪念哪些属性能够用DOM从前的办法设置
  • 可移植性好,DOM用于其它一种标志语言,通用API。

4.4.1 childNodes

node.childNodes 获取别的二个因素的具有子元素

4.4.2 nodeType属性

nodeTyoe总共有12种可取值,但里边仅有3个颇具实用价值。

  • 要秋天点的nodeType属性值是1
  • 质量节点的nodeType属性值是2
  • 文件节点的nodeType属性值是3

4.4.5 nodeValue属性

要是要转移2个文书节点的值,那就实用DOM提供的nodeValue属性,它用来收获(和设置)2个节点的值。

element.nodeValue

只顾,文本节点只怕是其余节点的子节点,在获取时越发令人瞩目:

<p>my name is Gavin.</p>

<script>
var oP = document.getElementsByTagName('p');
oP[0].nodeValue; // null
op[0].childNodes[0].nodeValue; // my name is Gavin.
</script>

4.4.6 firstChild 和 lastChild

node.childNodes[0] === node.firstChild
node.childNodes[ node.childNodes.length - 1 ] === node.lastChild

补给:nextSibling、previousSibling:兄弟节点

五 、最佳实践

  • 安静退化
  • javascript:伪协议
  • 布局与体制分离
  • 渐进增强
  • 分离JavaScript
  • 向后卓殊

    • 对象检查和测试

      if ( !xxx ) return false;
      
    • 浏览器嗅探

  • 特性考虑

    • 尽量少访问DOM和尽量减弱标记
      • 文书档案标记少,则DOM树规模少,遍历查找更敏捷
    • 联合和停放脚本:脚本放到body最终,能够让页面更快
    • 削减脚本

“真”协议用来在因特网上的处理器之间传输数据包,如HTTP协议(http://)、FTP协议(ftp://)等,伪协议是贰个非标的合计javascript:伪协议得以让大家经过3个链接来调用JavaScript函数。

经过伪协议来调用JavaScript函数的做法尤其不好,不是最佳实践。

六 、案例探讨:图片库创新版

6.6 键盘访问

对于视力残疾的用户往往看不清荧屏上的鼠标指针,他们一再更爱好使用键盘。人人皆知,不应用鼠标也得以浏览web。键盘上的tab键能够让我们从那么些链接移动到另1个链接,然后按下回车键启用当前链接。

在键盘事件中有一个onkeypress事件,按下键盘的其余1个键都会触发onkeypress事件,但以此键很简单出现难题,因为正是按下tab键也会触发该事件!

onclick事件更智慧,用tab键移到链接上,按下回车键,链接也能访问。

6.8 DOM Core 和 HTML – DOM

  • getElementById
  • getElementsByTagName
  • getAttribute
  • setAttribute

那些都以DOM
Core的组成都部队分,他们并不依附于JavaScript,任何帮助DOM的次第设计语言都得以运用它们。

而对于

  • element.onclick
  • element.forms
  • element.src

那一个属性属于HTML DOM,在DOM Core出现很久此前就曾经为人们所了解了。

绝超越50%景观下,同样的操作即能够行使DOM Core实现也能够用HTML DOM完结。HTML
DOM通过进一步简明,只好用来处理HTML文书档案。

七 、动态创造标记

7.1 一些价值观方法

  • document.write()
  • innderHTML

MIME类型application/xhtml+xml与document.write()不包容,浏览器呈现那种XHTML文书档案时不会实行document.write()方法。

其它,document.write()最大的标题是无法开始展览布局与表现分开。

备考:关于document.write()主要有二种采纳方法:

第2种:当页面加载成功后,浏览器输出流自动关闭,此时拓展document.write()方法将开辟七个新的输出流,它将免去当前页面内容。

其次种:调用document.write()方法在窗口中打开窗口,框架中生出新文书档案,那种格局必须用document.close()关闭,并且一连行使document.write()写入的始末不会免去文书档案,而是继续加码。

element.innerHTML
方法可以读写成分的内容。差不多拥有的浏览器都支持innerHTML,但以此本性不是W3C
DOM的规范属性,以后已经在HTML5正经中,始于IE4浏览器。

和document.write()类似,innerHTML也是HTML专有属性,不能够用于其余标志语言文书档案,在MIME类型为application/xhtml+xml的XHMLT文书档案中,该属性会被忽视。

7.2 DOM 方法

  • createElement( nodeName ) — 创制元秋天点
  • createTextNode( text ) — 成立文本节点
  • appendChild( child ) — 把成立的节点插入到文书档案节点树中

由此createElement与createTextNode只是创制文档碎片,唯有执行appendChild才会插入到文书档案中。

appendChild除了能够把文书档案碎片插入到文书档案树中,仍是能够接连文书档案碎片。

比如:

var p = document.createElement('p');
var text = document.createTextNode('my name is Gavin.');
p.appendChild( text );
document.body.appendChild( p );
  • insertBefore — 在存活元素前插入元素

    parentElement.insertBefore( newElement, targetElement );
    

平素不insertAfter方法,能够整合insertBefore来完结

function insertAfter ( newElement, targetElement ) {
    var parent = targetElement.parentNode;
    if ( parent.lastChild == targetElement ) {
        parent.appendChild( newElement );
    } else {
        parent.insertBefore( newElement, targetElement.nextSiblings );
    }
} 

7.4 ajax

ajax的技术大旨是XMLHttpRequest。在微软较早的IE5中以ActiveX对象的款型完毕了3个叫作XMLHTTP的目的,在较早IE中,创设对象的法门为:

var request = new ActiveXObject("Msxml2.XMLHTTP.3.0");

在别的浏览器上的成立格局为:

var request = new XMLHttpRequest();

更烦的是,不一致IE版本中应用的XMLHTTP对象大有不同,为了同盟全数浏览器,需求这样写:

function getHttpObject() {
    if ( typeof XMLHttpRequest == 'undefined ) {
        XMLHttpRequest = function () {
            try {
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
            } cache ( e ) {}

            try {
                return  new ActiveXObject("Msxml2.XMLHTTP.3.0");
            } cache ( e ) {}

            try {
                return  new ActiveXObject("Msxml2.XMLHTTP");
            } cache ( e ) {}        
        }
    }
    return new XMLHttpRequest();
}

XMLHttpRequest对象由众多措施,最有效的是open方法,该措施有四个参数,第四个是伸手类型:GET\POST\SEND,第三个是伸手地址,第④个代表是或不是异步请求。

request.open( 'GET', 'xxx.json', true );
request.onreadystatechange = function () {}
request.send();

onreadystatechange事件XMLHttpRequest再次回到响应时接触。

归来响应时,浏览器会在分歧等级更新readyState的值,它有陆个大概值:

  • 0 代表未开头化
  • 1 表示正在加载
  • 2 表示加载实现
  • 3 表示正在互相之间
  • 4 表示完毕

如果readyState属性值变成了4,则印证服务器已经发回了数码。

访问服务器发送回来的数额必要通过多少个特性,1个是responseText,这些用于保存文本字符串方式的多少,另贰个是responseXML属性,用于保存Content-Type底部中钦命为“text/xml”的数据,那事实上是贰个DocumentFragment对象。你能够使用各类办法来操作那个DOM对象,这也是XMLHttpRequest中有XML的由来。

捌 、充实文书档案的内容

渐进增强则必定支持平稳退化

8.3.1 选用HTML、XHTML还是HTML5

任由选择哪类标志,必供给与DOCTYPE评释保持一致。

XHMLT比HTML的平整更严苛。比如在写属性时,HTML允许行使大写字母,也能够选取小写字母,XHTML却供给有所的标签名和性质名都必须使用小写字母。

备注:关于HTML、XHTML、HTML5的区分,能够看那篇文书档案:

HTML4,HTML5,XHTML
之间有哪些分别?

在HTML早起,W3C创制在此以前,基本没有专业,标准都在在完成中定义的。一贯从HTML2.0到4.0、4.01,那种情状下,HTML标准不是很正规,浏览器也对HTML页面包车型客车荒唐非凡宽容。导致HTML笔者也出了众多荒唐的HTML页面。

新生W3C意识到那一个题材,开端制定规范,为了规范HTML,W3C结合XML制定了XHTML1.0规范,根据XML的渴求规范HTML,并定义了3个新MIME
Type:application/xhtml+xml,W3C的初衷是对这些MIME
TYPE的浏览器进行强制错误检查,假如页面有荒唐,就要展现错误。很多开发者拒绝利用那些MIME
TYPE,W3C不得已,在XHTML1.0后附加了一个附录C。允许开发者使用XHTML来写页面,同时采用原来的MIME
TYPE:application/html。那几个MIME TYPE不会接触浏览器的劫持错误检查。

W3C随后在XHTML1.第11中学收回了附录C,即采纳XHTML1.1行业内部的页面必须运用新的MIME
TYPE。但并没有几人利用。

有了XHTML的训诫,WHATWG和W3C在制订下一代HTML标准,也正是HTML5的时候,就将向后非常作为二个很重庆大学的规范。HTML5投入了累累特征,但最要害的特色是,不会break已有的网页。你能够将网页的首先行改为<!DOCTYPE html>,他就成了贰个HTML5页面,能够照常在浏览器中展现。

<!DOCTYPE html>一共才1五个字符,这几个宣称同时也扶助HTML与XHTML标记。

或多或少浏览器要根据DOCTYPE来控制采用正式情势,依旧分外方式来表现页面,包容格局表示浏览器要效仿早起浏览器的“怪异行为”,并同意不专业的页面也能平常干活。一般的话,大家都应该坚韧不拔选取正式格局,制止接触包容方式,HTML5的DOCTYPE暗中认可正是正经方式。

其它还有XHTML5,即用XML的条条框框来编排HTML5。

九、CSS-DOM

9.2 Style属性

文书档案中的每一个成分都以三个对象,每一个对象都有丰盛多采的质量,比如:parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling等,表示节点的关心消息。

还有一些性质:nodeName、nodeValue、nodeType,表示节点的类型信息。

除开,还有二个style属性,表示节点的体制新闻。

9.2.1 获取样式

element.style.color

对于font-family,在获得的时候会出错,原因为:JavaScript中连字符-为减法运算,所以会分晓为博得font属性,然后对family做减法运算,而family此时为变量,但我们并从未申明那个变量,继而引发错误。

// 错误写法!!
element.style.font-family;

当引用两其中等带减号的CSS属性时,DOM供给选拔驼峰命名法:

// 正确写法
element.style.fontFamily;

甭管有多有连字符,一律使用驼峰写法:比如magrin-top-width,写为:marginTopWidth。

style属性只可以回到内联样式。

9.2.2 设置样式

element.style.property = value;

9.3 用DOM解耦本设置样式

:first-child,:last-child选用器是CSS2中的
:nth-child()和:nth-of-type()是CSS3中的

在运用CSS时,不要人云亦云的觉得表格都以不好的,就算用表格布局不是好主意,但运用表格来呈现数据却是理所当然的。

9.4 className 属性

// 读
element.className

// 写
element.className = value

className在设置的时候是替换(而不是增多)。能够运用字符串拼接,达到增添的成效

element.clssName += ' info';

⑩ 、用JavaScript完毕动画效果

十一、HTML5

HTML5是HTML语言当前及现在的新专业,HTML规范从HTML4到XHTML,再到Web
Apps1.0,最终又回到HTML5,整个经过充满了辛勤与争议。

在结构层,HTML5添加了重重新的标记成分,如<section><article><header><footer>等。

HTML5还提供了更加多的竞相即媒体成分,如<canvas><audio><video>

表单也展开了增长,新增了颜色选择器数据选择器滑动条进度条等。

还有不少新的JavaScript
API,比如:GeolocationStorageDrag-and-DropSocket以及多线程等。

其余,通过新的MIME
TYPE,HTML5保证了向后非凡,就算写代码很不正规,也没难点。

参考链接:

十二 、综合示范

附录 JavaScript库

所谓库,正是可选择的代码包,具有如下的有的亮点:

  • 库代码经过了大气的用户的测试和验证
  • 库能够很不难的与已有的开发框架集成
  • 可为当先三分之一数见不鲜琐碎的DOM变成工作提供了便利,简洁的方案,每一种函数都能节约熟视无睹行代码
  • 库很好的消除了跨浏览器的难点,让您更省心

库也设反常:

  • 库是外人写的,不是团结编排的,不了然当中机制,很难调节和测试bug或由它导致的题材
  • 要运用库,就要把它集聚到脚本中,增加页面加载负担
  • 错落使用四个库只怕会造成冲突,同时也会导致职能浪费

A1:选拔适合的库

在挑选时,指出考虑如下难点:

  • 它装有你要求的具备功用吗?
  • 它的功效是还是不是比你想要的还多?
  • 它是模块化的啊?
  • 它的支撑意况怎么着?
  • 它有文书档案吗?
  • 它的许可合适吗?

A1.2 内容分发网络

一定要尽量想方法收缩网页文书档案的轻重缓急,并让浏览器缓存文件。除此之外,当然还要让用户尽可能的加载到页面。

情节分发互联网(CDN,Content Delevery
Network)能够消除分布共享库的标题。CDN是3个由服务器构成的网络,那一个网络的用户就是分流储存一些集体的内容。CND的每台服务器都蕴涵库的一份副本,那个服务器分布在世界上分化的国度和所在,以便达到和平运动用带宽和加速下载的指标。

浏览器访问库的时候使用三个公共的UGL450L,而CDN的地层则经过地理地方近日、速度最快的服务器提供相应的文件,从而解决了全部类别中的瓶颈难题。

这几个文件是共享的,当用户从叁个站点跳到另三个站点,他们就不要再重复的下载相同的文件了。