第1页 / 共17页
第2页 / 共17页
第3页 / 共17页
第4页 / 共17页
第5页 / 共17页
第6页 / 共17页
第7页 / 共17页
第8页 / 共17页
JavaScript_DOM_编程艺术读书笔记.doc
JavaScript DOM 编程艺术读书笔记
一、JavaScript简史
XHTML：可扩展的超文本标记语言
DHTML：动态的HTML，是HTML、CSS和JavaScript三种技术相结合的产物
CSS：层叠样式表
DOM：由W3C（万维网联盟）批准并由所有与标准相兼容的Web浏览器支持的第三方技术称为DOM（文
档对象模型）。简单的说，DOM是一套对文档的内容
进行抽象和概念化的方法。DOM是一种API（应用编程接口）。
W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态
地对文档的内容、结构和样式进行访问和修改。”
目前使用的95%以上的浏览器都具备对DOM的内建支持。
二、JavaScript语法
1、把JavaScript编写的代码必须嵌入在一份HTML/XHTML文档中才能得到执行。方法有二：
一是将JavaScript代码插入文档部分的
2、JavaScript中的变量和其他语法元素的名字都是区分字母大小写的；
JavaScript语法不允许变量的名字中包含空格或标点符号（但美元符号"$"除外）；
JavaScript变量名允许包含字母、数字、美元符号和下划线字符
3、数据类型
字符串：
由零个或多个字符构成。字符可包括字母、数字、标点符号和空格。字符串必须放在引号里----
单引号或者双引号均可。但最好根据字符串所
包含的字符来加以选择（看字符串里包含是单引号还是双引号）。但若用双引号就一直用双引号。保
持一致性
转义字符"\".如var mood = 'don\'t ask'; 转义后为don't ask 双引号也如此。
布尔值：
千万不要把布尔值用引号括起来。false和'false'、"false"完全是两码事
数组：
除了Array的一般用法外，数组还可以包含数组！数组中的任何一个元素都可以把一个数组作为
它的值。如：
var lennon = Array("John",1940,false);
var beatles = Array();
beatles[0] = lennon;
那么beatles数组的第一个元素的值是另外一个数组。此时beatles[0][0] == "John",beatles[0][1] ==
1940, beatles[0][2] == false
关联数组
用关联数组来代替上面的数值数组。如：
var lennon = Array();
lennon["name"] = "John";
lennon["year"] = 1940;
lennon["living"] = false;
var beatles = Array();
beatles[0] = lennon;
那么访问元素时就可以用：beatles[0]["name"] == "John",beatles[0]["year"] == 1940等。
当然beatles数组也可以填充为关联数组而不是数值数组
4、变量的作用域
如果在某个函数中使用了var关键字，那个变量就将被视为一个局部变量，它将只存在于这个函数的上
下文。反之，如果没有使用var，那个变量就被视
为一全局变量。如果你的脚本里已经存在一个与之同名的变量，这个函数将覆盖那个现有变量的值。
5、对象
内建对象：内建在JavaScript语言里的对象。Math、Date、Array等
宿主对象：由浏览器提供的对象，如Form、Element、Image等
用户定义对象：由程序员自行创建的对象。定义一Person对象等。
document对象
三、DOM
DOM节点分为不同的类型：元素节点、属性节点和文本节点等
DOM四个非常有用的方法：getElementById、getElementsByTagName、getAttribute、setAttribute
1、document.getElementById("id")返回的类型是一个对象Object，该对象对应着文档里的一个特定的元素节
点
2、document.getElementsByTagName("TagName")返回的是一个数组，他们分别对应着文档里的一个特定的
元素节点.getElementsByTagName()方法允许我们把
一通配符当为它的参数.上面说到的节点每个都是一个对象
3、getAttribute()方法是一个函数，它只是一个参数----你打算查询的属性的名字。不过getAttribute()方法不
能通过document对象调用，它只能通过一个
元素节点对象调用它。
4、setAttribute()方法类似于getAttribute()方法，也是一个只能通过元素节点对象调用的函数，但setAttribute()
方法需要我们向它传递两个参数
object.setAttribute(attribute,value)
5、DOM其他属性
childNodes:此属性让我们可以从给定文档的节点树里把任何一个元素的所有子元素检索出来。
childNodes属性将返回一个数组，这个数组包含给定元素节
点的全体子元素
element.childNodes
nodeValue属性：如果想改变某个文本节点的值，就使用DOM提供的nodeValue属性。它的用途就是检
索和设置节点的值
node.nodeValue
但需要注意的细节是:在用nodeValue属性检索description对象的值时，得到的不是包含在这个段落里的
文本。而是返回一null值。所以需要检索它的第一
个子节点的nodeValue属性值 如description.childNodes[0].nodeValue 和node.firstChild.nodeValue等价。
象对应的有node.lastChild.nodeValue(最后一个值)
四、JavaScript编程原则和良好习惯
要点
预留退路：确保网页在没有JavaScript的情况下也能正常工作
分离JavaScript：把网页的结构和内容与JavaScript脚本的动作行为分开
向后兼容：确保老版本的浏览器不会因为你的JavaScript脚本而死机
1、预留退路
1> 注意：应该只在有绝对必要的情况下才使用弹出窗口，因为这将牵涉到网页的可访问性问题：
浏览器不支持弹出窗口，浏览器的弹出窗口支持功能已被用户禁用，用户使用的屏幕读取软件无法向
用户说明弹出了窗口，等等。
因此，如果网页上的某个链接将弹出新窗口，最好在这个链接本身的文字中予以说明
window.open(url,name,features) 第三个参数要掌握一原则：新窗口的浏览功能要少而精
2> "javascript:"伪协议的做法非常不好 如新浪网
3> 内嵌的事件处理函数如新浪网
href="#"只是为了创建一个空链接。实际工作全部由onclick属性负责完成。这种技巧与"javascript:"
伪协议做法一样糟糕。若用户禁用了浏览器的
JavaScript功能，这样的链接将毫无用处。
上面第2点和第3点的解决方法为
新浪网
2、分离JavaScript
正如CSS机制中的class或id属性那样，把JavaScript代码调用行为与HTML文档的结构和内容分离开，
这样网页就会健壮得多
1> 我们可以在外部JavaScript文件里把一个事件添加到HTML文档中的某个元素上：element.event =
action...
2> 若想把一个事件添加到某个带有特定id属性的元素上，用getElementById()方法就可以解决问题：
getElementById(id).event = action
如果事情涉及到多个元素，我们可以用getElementsByTagName()和getAttribute()方法把事情添加
到有着特定属性的一组元素上，具体步骤如下
（以onclick()事件和popUp()事件为例）
<1> 把文档里的所有链接全放入一个数组里
<2> 遍历数组
<3> 如果某个链接的class属性等于popup,就说明这个链接在被电击时将调用popUp()函数。
于是：
A. 把这个链接的href属性值传递给popUp()函数
B. 取消这个链接的默认行为，不让这个链接把访问者带离当前窗口
上面的JavaScript实现代码如下:
var links = document.getElementsByTagName("a");
for(var i=0;i
if(links[i].className == "popup") {
links[i].click = function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
此种情况要加载window.onLoad事件 这样就昂这些代码在HTML文档全部加载到浏览器之后才
开始执行。如下:
window.onLoad = prepareLinks;
function prepareLinks(){
var links = document.getElementsByTagName("a");
for(var i=0;i
}
4、其他注意事项
若加载页面时出现 window.onload = firstFunction; window.onload = secondFunction; 此时最后的
secondFunction函数才会被实际执行
若要把多个JavaScript函数绑定到onload事件处理函数上，有两种方法
1> window.onload = function() {
firstFunction();
secondFunction();
}
2> 使用函数AddLoadEvent(),其完成的操作为：
A. 把现有的window.onload事件处理函数的值存入变量oldonload
B. 如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它
C. 如果在这个处理函数上已经邦定理一些函数，就把新函数追加到现有指令的末尾
实现方法为：AddLoadEvent(firstFunction); AddLoadEvent(secondFunction);
其中:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
五、动态创建HTML内容
要点
用来动态创建HTML内容的“老”技巧：document.write()方法和innerHTML属性
深入剖析DOM方法：createElement()、createTextNode()、appendChild()和insertBefore().
1、document.write()方法：方便快捷的把字符串插入到文档里
2、innerHTML 属性可以用来读、写某给定元素里的HTML内容,innerHTML属性是一项专利技术，不是一
项业界标准。
3、createElement()方法：创建一个新的元素。用法为：document.createElement(nodeName)
4、appendChild()方法：把新建的节点插入某个文档的节点数的最简单的办法是，让它成为这个文档的某个
现有节点的一个子节点。
appendChild()方法的用法为： parent.appendChild(child) 例如要实现元素P成为testDiv元素的一个子节
点
var para = document.createElement("P");
//新创建一P元素
var testDiv = document.getElementById("testDiv");
testDiv.appendChild(para);
//把元素P成为testDiv元素的子节点
//提取出来testDiv节点
5、createTextNode()方法：创建一个文本节点
用法为：document.createTextNode(text) 如：document.createTextNode("Hello world"); //创建一个内容
为"Hello world"的文本节点
//新创建一P元素
//提取出来testDiv节点
//把元素P成为testDiv元素的子节点
用appendChild()方法把文本节点插入为某个现有元素的子节点
接4：
var para = document.createElement("P");
var testDiv = document.getElementById("testDiv");
testDiv.appendChild(para);
var txt = document.createTextNode("Hello world");
para.appendChild(txt);
也可以把上面的步骤交换下位置，变为：
var para = document.createElement("P");
var txt = document.createTextNode("Hello world");
para.appendChild(txt);
var testDiv = document.getElementById("testDiv");
testDiv.appendChild(para);
//把元素P成为testDiv元素的子节点
//新创建一P元素
//用appendChild()方法把txt这个文本节点插入为现有元素P的子节点上去
//创建一个内容为"Hello world"的文本节点
//用appendChild()方法把txt这个文本节点插入为现有元素P的子节点上去
//创建一个内容为"Hello world"的文本节点
//提取出来testDiv节点
6、insertBefore()方法：将把一个新元素插入到一个现有元素的前面
调用语法为：
parentElement.insertBefore(newElement,targetElement);
其中：newElement是想插入的元素；targetElement是想把新元素newElement插入到哪个现有元素
(targetElement)的前面；
parentElement是上面两元素newElement、targetElement共同的父元素（这儿的父元素一般是
targetElement元素的parentNode属性）如：
gallery = document.getElementById("imagegallery");
var
gallery.parentNode.insertBefore(placeholder,gallery); //把placeholder元素插入到图片清单的前面
gallery.parentNode.insertBefore(description,gallery); //把description元素插入到图片清单的前面
但DOM中没有insertAfter()方法。自身定义insertAfter()方法。如下：
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
//把目标元素的parentNode属性值提取到变量parent里
//检查目标元素是不是parent的最后一个子元素
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
//targetElement.nextSibling为目
标元素的下一个子元素即目标元素的下一个兄弟节点
}
}
7、程序代码
1> showPic.js代码如下
//showPic()方法
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
return false;
}
//此函数负责处理有关的事件。将遍历imagegallery清单里的每个链接，并给它加上一个onclick事
件处理函数。当用户点击这个链接中的某一个时
//就会调用showPic()函数
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for ( var i=0; i < links.length; i++) {
links[i].onclick = function() {
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}
//通用型函数，在很多场合都能派上用场
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
//通用型函数，在很多场合都能派上用场
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
//把目标元素的parentNode属性值提取到变量parent
里
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
//检查目标元素是不是parent的最后一个子元素
parent.insertBefore(newElement,targetElement.nextSibling);
//targetElement.nextSibling为目标元素的下一个子元素即目标元素的下一个兄弟节点
}
}
//实现 
Choose an image.
的功能 //创建一个img元素和一个p元素。这个函数将把这些新创建的元素插入到5_BackGallery.htm文 档的节点树里----当然，新元素会被插入到imagegallery清单的后面 function preparePlaceholder() { if(!document.createElement) return false; if(!document.createTextNode) return false; if(!document.getElementById) return false; if(!document.getElementsByTagName) return false; var placeholder = document.createElement("img"); placeholder.setAttribute("id","placeholder"); placeholder.setAttribute("src","../Images/placeholder.gif"); placeholder.setAttribute("alt","My image Gallery"); var description = document.createElement("p"); description.setAttribute("id","description"); var descText = document.createTextNode("Choose an Image"); description.appendChild(descText); var gallery = document.getElementById("imagegallery"); insertAfter(placeholder,gallery); insertAfter(description,placeholder); gallery.parentNode.insertBefore(placeholder,gallery); 将placeholder元素插入到gallery元素的 //将description元素插入到placeholder元素的后面 //将placeholder元素插入到gallery元素的后面 gallery.parentNode.insertBefore(description,gallery); document.getElementsByTagName("body")[0].appendChild(placeholder); //将placeholder元 前面 // // // 素插入到位于文档末尾的标签的签名 // document.getElementsByTagName("body")[0].appendChild(description); //将description元素 插入到位于文档末尾的
