《JavaScript_DOM编程艺术第二版（中文）》整书笔记

目录

第3章：DOM

第4章：案例研究

第5章：最佳实践

第6章：案例改进

第7章：动态创建标记

第8章：充实文档的内容

第9章：CSS-DOM

第3章：DOM

文档：DOM中的“D”

当创建了一个网页并把它加载到Web浏览器中时，DOM就产生了，它把你编写的网页文档转换为一个文档对象。

对象：DOM中的“O”

JavaScript语言里的对象可以分为三种类型：

用户自定义对象：由程序员自行创建的对象

内建对象：内建在JavaScript语言里的对象，如 Array、Math 和 Date 等

宿主对象：由浏览器提供的对象，如 window、document

window对象对应着浏览器窗口本身，这个对象的属性和方法统称为BOM（浏览器对象模型）

模型：DOM中的“M”

DOM 把一份文档表示为一棵树（家谱树）。

节点

元素节点：DOM 的原子，即标签的名字，如 html、p、ul、li

文本节点：总是被包含在元素节点的内部，但并非所有的元素节点都包含文本节点

属性节点：用来对元素做出更具体的描述，如 title 属性，并非所有的元素都包含属性，但所有的属性都被元素包含。

CSS：除了DOM与网页结构打交道，还可以通过CSS告诉浏览器如何显示一份文档的内容。

获取元素

getElementById

：是 document 对象特有的函数

document.getElementById(id)

getElementsByTagName

：返回一个对象数组

element.getElementsById(tag)

getElementsByClassName

：可以查找那些带有多个类名的元素，可以指定多个类名，用空格分隔

element.getElementsByClassName(class)

盘点知识点

一份文档就是一颗节点树

节点分为不同的类型：元素节点、属性节点和文本节点等

getElementById

将返回一个对象，该对象对应着文档里的一个特定的元素即诶但

getElementsByTagName

和

getElementsByClassName

将返回一个对象数组，它们分别对应着文档里的一组特定的元素节点。

获取和设置属性

getAttribute：获取元素的各个属性

getAttribute 方法不属于 document 对象，所以不能通过 document 对象调用。它只能通过元素节点对象调用。

object.getAttribute(attribute)

setAttribute：更改属性节点的值

object.getAttribute(attribute, value)

小结

本章介绍了DOM提供的五个基础方法：

getElementById

getElementsByTagName

getElementsByClassName

getAttribute

setAttribute

第4章：案例研究

几个 DOM 提供的新属性：

childNodes

、

nodeType

、

nodeValue

、

firstChild

、

lastChild

childNodes

：用来获取任何一个元素的所有子元素，它包含这个元素全部子元素的数组。

nodeType

：nodeType 属性共有12种取值，但其中仅有3种具有实用价值：

元素节点的 nodeType 属性值是1

属性节点的 nodeType 属性值是2

文本节点的 nodeType 属性值是3

nodeValue

：获取文本节点的值，而非元素本身的值。

第5章：最佳实践

性能考虑

尽量少访问DOM和尽量减少标记

访问DOM会搜索整个DOM树

文档中的过多不必要的元素（标记数量）会增加DOM树的规模，进而增加遍历DOM树以查找特定元素的时间

合并和放置脚本

将多个脚本文件合并到一个脚本文件中，这样，可以减少加载页面时发送的请求数量。而减少请求数量通常是性能优化时首要考虑的。

脚本在标记中的位置对页面的初次加载时间也有很大影响。将脚本放在之前，可以让页面变得更快。这样，在加载脚本时，window 对象的 load 事件依然可以执行对文档进行的各种操作。



压缩脚本

压缩脚本，即把脚本文件中不必要的字节，如空格和注释，统统删除，从而达到“压缩”文件的目的。

第6章：案例改进

优化

if(variable)

代替

if (variable !== null)

有判断的情况下，用三元操作符取值

var variable = condition ? if true : if false;

links[i].onclick = function() {
if (showPic(this)) {
return false;
} else {
return true;
}
}

改为：

links[i].onclick = function() {
return showPic(this) ? false : true;
}

DOM Core 和 HTML-DOM

像

getElementById

、

getElemntsByTagName

、

getAttribute

、

setAttribute

这些方法都是 DOM Core 的组成部分。它们并不专属于 JavaScript，支持 DOM 的任何一种程序设计语言都可以使用它们。它们的用途也并非仅限于处理网页，它们可以用来处理任何一种标记语言（如XML）编写出来的文档。

使用 JavaScript 语言和 DOM 为 HTML 文件编写脚本时，有许多属性可供选择，如

onclick

、

form

、

src

、

href

等，这些属性术语 HTML-DOM。

document.getElementsByTagName('form')

等价于

document.forms

element.getAttribute('src')

等价于

element.src

第7章：动态创建标记

传统技术

documnet.write()

innerHTML

DOM 方法

createElement

：创建元素节点

document.createElement(nodeName);

createTextNode

：创建文本节点

document.createTextNode(text);

appendChild

parent.appendChild(child);

重回图片库

insertBefore

parentElement.insertBefore(newElement, targetElement);

编写

insertAfter

函数

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

var child2 = document.createElement('div');
var child2Txt = document.createTextNode('I am child2');
child2.appendChild(child2Txt);

// 刷新 child2Txt 的文本值
child2Txt.nodeValue = 'I am child2 new';

var child3 = document.createElement('div');
/*var child3Txt = document.createTextNode('I am child3');
child3.appendChild(child3Txt);*/

// 替代方式
child3.innerText = 'I am child3';

var child1 = document.getElementsByClassName('child1')[0];
var parent = document.getElementsByClassName('parent')[0];
parent.insertBefore(child2, child1);

insertAfter(child3, child2);

Ajax

Ajax 的主要优势：对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求，它会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。你的脚本则可以按需加载和创建页面内容，而不会打断用户的浏览体验。

XMLHttpRequest 对象

Ajax 技术的核心，该对象充当着浏览器中的脚本（客户端）与服务器之间的中间人的角色。以往的请求都由浏览器发出，而 JavaScript 通过这个对象可以自己发送请求，同时也自己处理响应。

var xmlhttp;
if (window.XMLHttpRequest) {
//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// 发起一个请求
xmlhttp.open('GET', './test.txt', true);

// 事件处理函数
// 在服务器给 XMLHTTPReqest 对象送回响应时被触发执行
xmlhttp.onreadystatechange = function() {

// readyState 属性为4，表示完成，status 为 200，表示响应已就绪
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var para = document.createElement('p');
var txt = document.createTextNode(xmlhttp.responseText);
para.appendChild(txt);
document.getElementById('new').appendChild(para);
}
};

// 发送请求
xmlhttp.send(null);

注意：当使用 async=false 时，请不要编写 onreadystatechange 函数，把它放到 send() 语句后面即可。

Ajax 应用的一个特色就是减少重复加载页面的次数。但这种缺少状态记录的技术会与浏览器的一些使用惯例产生冲突，导致用户无法使用后退按钮或者无法为特定状态下的页面添加书签。

渐进增强的 Ajax

Ajax 应用主要依赖于服务器端处理，而非客户端处理。

第8章：充实文档的内容

不应该做什么

渐进增强

原则：应该总是从最核心的部分，即内容开始。应该根据内容使用标记实现良好的结构；然后再逐步加强这些内容。这些增强工作既可以通过 CSS 改进呈现效果，也可以是通过 DOM 添加各种行为。

平稳退化

渐进增强的实现必然支持平稳退化。如果你按照渐进增强的原则去充实内容，你为内容添加的样式和行为就自然支持平稳退化，那些缺乏必要的 CSS 和 DOM 支持的访问者仍可以访问到你的核心内容。

内容

某些浏览器要根据 DOCTYPE 来决定是使用标准模式，还是使用兼容模式来呈现页面。

兼容模式：浏览器要模仿某些早期浏览器的“怪异行为”，并容许那些不规范的页面在新浏览器也能正常工作。

一般来说，我们都应该坚持使用标准模式，避免出发兼容模式。HTML5 DOCTYPE 默认对应的就是标准模式。

第9章：CSS-DOM

分离

使用 (X)HTML 去搭建文档的结构；

使用 CSS 去设置文档的呈现效果；

使用 DOM 脚本去实现文档的行为。

这三种技术之间存在着一些重叠区域，用DOM可以改变网页的结构，DOM样式可以给元素设定样式，CSS也能使用伪类走进DOM的领地。

style 属性

一些属性，如

parentNode

、

previousSibling

、

childNodes

、

firstChild

和

lastChild

等，告诉我们文档中各节点之间的关系信息。

一些属性，如

nodeType

和

nodeValue

包含元素本身的信息；

style

属性包含元素的样式，查询该属性将返回一个对象而不是简单的字符串，样式都存放在这个 style 对象的属性里：

element.style.property

不仅文档里的每个元素都是一个对象，每个元素都有一个 style 属性，它们也是一个对象。


不管 CSS 样式属性的名字里有多少个连字符，DOM 一律采用驼峰命名法来表示它们，因为 JavaScript 会把连字符看成减号，而减号和加号之类的操作符是保留字符，不允许用在函数或变量的名字里，即也不能用在方法或属性的名字里。

▉ 注意：style 属性只能返回内嵌样式，只有把 CSS style 属性插入到标记里，才可以用 DOM style 属性去查询那些信息。即 DOM style 属性不能用来检索在外部 CSS 文件里声明的样式。

☞ 解决方案：style 对象的各个属性都是可读写的，不仅可以通过某个元素的 style 属性去获取样式，还可以通过它去更新样式。

element.style.property = value

选择 CSS 还是 DOM 来设置样式？考虑两点：

这个问题最简单的解决方案是什么；

哪种解决方案会得到更多浏览器的支持。

className 属性

改变样式的方案：

setAttribute

elem.setAttribute('class', 'intro');

style

element.style.property = value

className

element.className = value

把新的 class 设置值追加到 className 属性上去：

elem.className += " intro"

addClass 函数：

function addClass(element, value) {
if (!element.className) {
element.className = value;
} else {
var newClassName = element.className;
newClassName += ' ';
newClassName += value;
element.className = newClassName;
}
}

小结

style 属性的最大限制是它不支持获取外部的 CSS 设置的样式，但你仍可以利用 style 属性去改变各种 HTML 元素的呈现效果。

只要有可能，就应选择 className 属性，而不是去直接更新 style 对象的有关属性。