读书笔记:JavaScript DOM 编程艺术(第二版本)

读了要能够模拟到充分多之基础知识,这里记录下,方便回顾及这查。

内容呢生温馨的局部加。

JavaScript DOM 编程艺术(第二版)

1、JavaScript简史

JavaScript由Netscape公司及Sun公司合作开发,在JavaScript之前,web浏览器只是显示文本文档的软件,JavaScript之后,网页内容不再局限为单调的文本,交互性显著改进。在JavaScript的率先个本子,即JavaScript
1.0版,出现在1995年产的Netscape Navigator 2浏览器被。

当JavaScript 1.0揭晓时,浏览器市场重点是Netscape
Navigator,后来IE开始追,微软以IE3时颁了和睦的VBScript语言,同时因为JScript为叫发布了JavaScript的第一只版本,并火速赶超上了Netscape的步子。面对微软的竞争,Netscape与Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript语言进行了标准化,于是起了ECMAScript语言,这是一律栽语言的另一个名字。

至了1996年,JavaScript、ECMAScript、JScript–随便怎么叫,已经站稳了本子,Netscape与微软的老三版本浏览器还不比程度之支撑JavaScript
1.1言语。

每当JavaScript最初版本为程序员提供了询问以及操控Web文档某些内容的手段,比如:

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

本人们便将这种考查性质的初级DOM称为“第0层DOM”(DOM level
0),在尚非形成统一标准的初级阶段,“第0层DOM”的周边用途是扭曲图片以及认证表单数据。

在1997年6月,Netscape Navigator
4发布,10月,IE4发布。这片个早由版本都指向她们的浏览器进行了改良,大幅扩张了DOM,同时也接触到一个新名词:DHTML。

噩运之凡,NN4和IE4浏览器采用了少数种不匹配的DOM。程序员要写少仿代码。

NN4中DOM元素呢层,层产生唯一的ID:

document.layers['myElement']

万一微软的DOM需要这样引用:

document.all['myElement']

便于DOM产生分歧,浏览器厂商大战时,W3C推出了一个准的DOM,令人欣慰的转业,Netscape与微软和任何浏览器制造商还领了初的正式,并于1998年10月得了“第1层DOM”(DOM
Level 1)。

二、JavaScript语法

三、DOM

DOM:Document Object Model 文档对象模型

JavaScript中的目标分为三栽:

1、用户定义对象:由程序员创建的目标
2、內建对象:内修筑在JavaScript语言中之对象,如Array、Math以及Date等
3、宿主对象:由宿主环境(浏览器)提供的靶子,如window、document

window对象对诺在浏览器窗口本身,这个目标的性质和措施一般号称BOM(浏览器文档模型)。

3.4 节点

先期看三栽:元素节点、文本节点、属性节点

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

标签的讳便是因素的名字,这中来一个要素节点p,一个文书节点“my name is
Gavin”,以及一个性质节点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”出现前,还可据此另外一个艺术设置大部分元素的性能,这个方式及本照例有效。

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属性

假如要反一个文书节点的价,那便实用DOM提供的nodeValue属性,它因此来取得(和安装)一个节点的价。

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:私协议可以于咱们经过一个链接来调用JavaScript函数。

由此伪协议来调用JavaScript函数的做法特别不好,不是超级实践。

六、案例研究:图片库改进版本

6.6 键盘访问

对于视力残疾的用户往往看无彻底屏幕上的鼠标指针,他们累更爱好下键盘。众所周知,不行使鼠标也堪浏览web。键盘上之tab键可以吃咱于之链接移动至另外一个链接,然后按照下转车键启用时链接。

每当键盘事件中生一个onkeypress事件,按下键盘的其余一个键都会触发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出现异常漫长之前就已也人们所熟悉了。

大部状况下,同样的操作即可以动用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()主要出些许种植使方法:

首先栽:当页面加载成功后,浏览器输出流自动关闭,此时进展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对象的花样实现了一个名叫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的价,它产生5独或价值:

  • 0 代表未初始化
  • 1 表示着加载
  • 2 表示加载了
  • 3 表示正相互之间
  • 4 表示完成

假使readyState属性值变成了4,则说明服务器都作回了数码。

访服务器发送回来的数量要通过个别只属性,一个凡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,并定义了一个初MIME
Type:application/xhtml+xml,W3C的初衷是针对之MIME
TYPE的浏览器实行强制错误检查,如果页面有误,就要显示错误。很多开发者拒绝利用这MIME
TYPE,W3C不得已,在XHTML1.0后附加了一个附录C。允许开发者使用XHTML来形容页面,同时用原来的MIME
TYPE:application/html。这个MIME TYPE不会见硌浏览器的强制错误检查。

W3C就于XHTML1.1受取消了附录C,即采取XHTML1.1正式的页面必须以新的MIME
TYPE。但连没有多少人用。

起了XHTML的训,WHATWG和W3C在制定下一代HTML标准,也就算是HTML5的时刻,就以朝后相当作为一个老关键的规格。HTML5投入了累累特色,但不过要之风味是,不见面break已有些网页。你可用网页的首先尽改吧<!DOCTYPE html>,他即成为了一个HTML5页面,可以照常在浏览器中显得。

<!DOCTYPE html>总计才15个字符,这个宣称又也支持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维持了朝后相当,就算写代码很不标准,也并未问题。

参照链接:

  • HTML5
  • HTML5 交互性演示
  • HTML5 相关的PPT、代码、示例和学科

十二、综合示范

附录 JavaScript库

所谓库,就是可选用的代码包,具有如下的一部分长:

  • 库代码经过了汪洋底用户之测试与认证
  • 仓库能够非常易之同已有些开框架集成
  • 可是也多数常见琐碎的DOM变成工作提供了方便,简洁之方案,每个函数都能够省去成千上万行代码
  • 库房很好的缓解了跨越浏览器的题材,让你更简便

库也设有问题:

  • 仓库是他人写的,不是友善修的,不了解中机制,很不便调试bug或由于它导致的题目
  • 假如用库,就设管它们汇集到下面论被,增加页面加载负担
  • 掺杂使用多独仓库或者会见导致冲突,同时也会招致职能浪费

A1:选择合适的库

每当挑时,建议考虑如下问题:

  • 它们具备你要的富有机能也?
  • 她的功用是否比你想只要之尚差不多?
  • 它是模块化的为?
  • 她的支持情况怎么样?
  • 其发文档吗?
  • 它们的许可合适为?

A1.2 内容分发网络

肯定要是硬着头皮想艺术减少网页文档的轻重,并吃浏览器缓存文件。除此之外,当然还要给用户尽可能的加载到页面。

内容分发网络(CDN,Content Delevery
Network)可以化解分布共享库的问题。CDN是一个由于服务器构成的网,这个网络的用户就分流储存一些公的情。CND的诸令服务器都富含库底同样份副本,这些服务器分布在世界上不同之国度同地面,以便达到与采用带富和加速下载的目的。

浏览器访问库的时利用一个公共的URL,而CDN的地层则透过地理位置最近、速度极抢的服务器提供对应的文书,从而化解了合系统被的瓶颈问题。

这些文件是共享的,当用户从一个站点超过到任何一个站点,他们不怕甭还重的下载相同之文件了。