javascript dom编程艺术阅读笔记
第二章
1.程序设计语言分为：解释型和编译型两大类；java或C++等语言需要一个编译器，将源代码翻译为直接在计算机上执行的二进制可执行文件的程序，属于编译型
javascript语言不需要编译器，只需要解释器；在www环境下，web浏览器负责完成解释和执行工作。对于代码中的错误，只有等到解释器实际执行到有关代
码时才会被发现
2.要求程序员必须对数据类型做出声明的程序设计语言被称为强类型（stongly typed），如c，c++；像javascript不要求程序员对数据类型做出声明的语言则称为弱类型（weekly
typed）语言
3.向数组中添加元素的操作称为填充（populating）
3.数组
var arr = Array(5);
var arr = Array(1,2,3,4,5);
var arr = Array();
arr[0] =1;
关联数组：
var lennon = Array();
lennon["name"]
=
"john";
lennon["old"]
=
"23";
lennon["living"]
=
"shenzhen";
数组的下标不局限于数字，也可以是字符串；
数组的元素也可以是一个数组
var beatles = Array();
beatles[0] = lennon;
那么beatles[0]["name"] = "john";
4. 局部变量和全局变量
如果在一个函数的内部不小心使用了某个全局变量的名字，即使本意是想使用一个局部变量，javascript也会认为是在引用那个全局变量。
但是，额可以使用var关键字明确的为在函数中使用的变量设定一个作用域。如果在某个函数中使用了var，那个变量就被视为一个局部变量，它将只存在与这个函数的上下文
中，反之，如果没有使用var，那个变量就将被视为一个全局变量，如果在脚本里已经存在一个与之同名的变量，这个函数将覆盖那个现有变量的值。
注意：我们必须把函数内部的变量全部明确的使用var声明为局部变量
5. 对象
5.1 对象是自我包含的数据集合，包含在对象里的数据可以通过两种形式——即属性（property）和方法（method）访问：
a. 属性是隶属于某个特定对象的变量
b. 方法是只有某个特定对象才能调用的函数
要使用对象，就必须创建一个对象的实例（instance）；实例是对象的具体表现；对象是统称，实例是个体
如：假如有一个对象Person；创建实例使用：var jeremy = new Person;（Person对象是不存在的，在此只是做个例子）
5.2 我们可以利用JavaScript语言创建自己的对象——术语称之为用户定义对象（user-defined object）；javascript自带的预先定义对象，称之为内建对象（native
object）
5.3 宿主对象
指不是javascript脚本中预先定义的对象，而是web浏览器提供的预定义对象被称为宿主对象（host object）；
宿主对象主要包括Form、Image和Element。我们可以通过这些对象获得关于某给定网页上的表单、图像和各种表单元素的信息
第三章
DOM分别对应着：文档（D）、对象（O）和模型（M）
3.1 javascript语言里的对象分为三种类型：
a. 用户定义对象（user-defined object）：由程序员自行创建的对象
b. 内建对象（native object）：内建在javascript语言里的对象，如Array、Math和Date等
c. 宿主对象（host object）：由浏览器提供的对象
window对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为BOM(浏览器对象模型，Window Object Model(窗口对象模型))
DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们通过javascript去读取这张地图
3.3.1 节点
a. 元素节点（element node）：如，
和
- 之类的元素
b. 文本节点（text node）：如标签，也叫做文本标签，其包含着一些列表项
元素，它里面包含的是文本段落内容，所以可以叫做文本节点；如
c. 属性节点（attribute node）：表示元素的属性值，属性的作用是对元素做出更具体的描述；属性节点一般都放在起始标签里，所以属性节点总被包含在元素节点中、
如：
张三
；title就是一个属性节点
d. CSS:层叠样式表：告诉浏览器如何显示这份文档的内容；继承是CSS中的强大功能之一，CSS也把文档的内容视为一颗节点树，节点树上的各种元素将继承其父元素的
样式属性
3.3.2 getElementById()方法
作用：返回一个与给定id属性值的元素节点相对应的对象，该方法与document对象相关联的函数；
使用方法：document.getElementById(id);
typeof 操作符可以告诉我们它的操作数是不是一个字符串、数值、函数、布尔值或对象；
如： alert(typeof document.getElementById("abc"));
3.3.3 getElementsByTagName()方法
作用：返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素；该函数的参数是一个HTML标签的名字
使用方法：document.getElementsByTagName(tag)
注意：该函数返回的是一个数组，该数组中包含的是对象
如：1. var items = document.getElementsByTagName("li");获得标签的数量
同时可以使用通配符：var num = document.getElementsByTagName("*").length; 获得文档中所有元素的数量
3.4 注意： 文档中的每个元素节点都是一个对象
小结：a. 一份文档就是一颗节点树
b. 节点可以分为不同的类型：元素节点、文本节点和属性节点
c. document.getElementById()可以返回返回一个对象，该对象是文档中的一个特定的元素节点
d. document.getElementsByTagName() ：返回一个对象数组，他们分别对应着文档中的一个特定的元素节点
e. 这些节点都是一个对象
3.4.1 getAttribute()方法
作用：找到我们想要查询的那个元素之后，可以利用它把该元素的各种属性值查询出来
使用方法：object.getAttribute(attribute)
注意：getAttribute()方法不能通过document对象调用，只能通过一个元素节点对象调用它；
如：可以把它与document.getElementsByTagName()方法结合起来，便可以查询元素的属性；
var paras = document.getElementsByTagName("p");
for (i = 0; i < paras.length; i++){
alert(paras[i].getAttribute("title"));
}
for (i = 0; i < paras.length; i++){
alert(paras[i].getAttribute("title"));
}
假如文档里只有一个带有title属性的
元素，但是文档中还有一个或更多个不带title属性的
元素，则相应的getAttribute("title")调用将返回null空值
3.4.2 setAttribute()方法
作用：允许对属性节点的值做出修改
使用方法：object.setAttribute(attribute, value);
如：var shopping = document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title", "a list of goods");
alert(shopping.getAttribute("title"));
alert(shopping.getAttribute("title"));
shopping.setAttribute("title", "a list of goods");
alert(shopping.getAttribute("title"));
在这个例子中id为purchases的元素节点，
并不存在title属性，我们发出
setAttribute()调用实际
完成了两项操作：
先把属性
创建出来，
然后再对其值进行
设置
关键点注意：通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和行为动作发生相应的变化，但我们在通过浏览器的view source(查看
源代码)选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不
一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。对页面内容的刷新不需要最
终用户在它们的浏览器里执行页面刷新操作就可以实现。
第四章
4.3 javaScript函数的调用
通过： 在html文件中插入JavaScript文件showPic.js；这条语句是放在html文件中的标签内、
事件处理函数
作用：在预定事件发生时让预先安排好的JavaScript代码开始执行，也就是说“触发一个动作”
onclick事件：当用户点击某个链接时触发一个动作
JavaScript代码是包含在一对引号之间的：我们可以把任意数量的JavaScript语句放在这对引号之间，只要把各条语句用分号隔开即可
4.4.1 childNodes属性
作用：childNodes属性让我们可以从给定文档的节点树里把任何一个元素的所有子元素检索出来。
childNodes属性将返回一个数组，这个数组包含给定元素节点的全体子元素。
如：function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
} 这个函数获得body元素下的所有子元素的数量
var body_element = document.getElementsByTagName("body")[0];
alert(body_element.childNodes.length);
} 这个函数获得body元素下的所有子元素的数量
4.4.2 nodeType属性
作用：可以用于区分文档里的各个节点，该属性可以让我们知道自己正在与哪一种节点打交道，其返回值是一个数字
使用方法：
var body_element = document.getElementsByTagName("body")[0];//此处为什么要加[0]???因为获取的是标签body的元素集合（数组），而在一个html中可以有多个同
类型的标签，
虽然HTML文档中只有一个body标签，但是相对于其他的标签可以有多个，如标签，所
以这里需要采
用访问数
组的方式进行操作
alert(body_element.childNodes.length);
alert(body_element.nodeType);
alert(body_element.nodeType);
nodeType属性有12种可取值；但其中只有3种具有使用价值：元素节点、属性节点和文本节点，属性值分别为：1、2、3
4.4.5 nodeValue属性
作用：检索（和设置）节点的值；node.nodeValue
使用方法：
var source = whichPic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
var text = whichPic.getAttribute("title");
var description = document.getElementById("description");
alert(description.childNodes[0].nodeValue);
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
var text = whichPic.getAttribute("title");
var description = document.getElementById("description");
alert(description.childNodes[0].nodeValue);
注意：包含在
元素里的文本是另一种节点，它在DOM里是
元素的第一个子节点。也就是说，如果想获得
元素的文本内容，就必须检索它的第一个子节点的nodeValue属性值
4.4.6 firstChild和lastChild属性
node.firstChild 等同于 node.childNodes[0]
node.lastChild 等同于node.childNodes[node.childNodes.length - 1];
第五章
5.1.3 质疑
注意：
1.不管想通过javascript改变网页的哪种行为，都必须三思而后行，首先要确认：为这个网页增加这种额外的行为
是否有必要？
如果要使用javascript，就要确认：这样做对用户的浏览体验产生怎样的
影响？还有更重要的问题：如果用户的浏览器
不支持javascript该怎么办？
2.只有在绝对必要的情况下才使用弹出窗口，因为这涉及到网页的可访问性问题
5.2 预留后路
window.open()函数
原型：window.open(url, name, features);
作用：创建新的浏览器窗口
使用：
url: 需要新建窗口的url地址；
name: 新建窗口的名字，在代码中可以通过名字与窗口通信
features：窗口的属性；如窗口的尺寸（宽和高）以及新窗口被激活和禁用的各种浏览功能（工具条，菜单条，初始显示位置，等等）；记住：对于该参数，新窗
口的浏览功能要少而精。
示例：function popUp(winUrl){
window.open(winUrl, "newWin", "width=200", "height=300");
}
5.2.1 “JavaScript:”伪协议
“真“协议：指因特网上的标准化通信协议，如：http://、ftp:// 等等
”伪“协议：人们对非标准化通信机制的统称。”JavaScript:“伪协议让我们可以通过一个链接来调用JavaScript函数
如：通过JavaScript: 伪协议调用popUp()函数：
这条语句在支持“javascript:”伪协议并启用了JavaScript功能的浏览器中运行正常；不支持这种伪协议的浏览器则会尝试去打开链接但会失败；支持这种伪协议
但禁用了JavaScript功能的浏览器则什么也不做
注意：在html文档里，通过”javascript:“
伪协议调用JavaScript代码的方式
非常不好
5.4分离JavaScript（讨论了将css、JavaScript从HTML中分离出来的方法，重要）
类似于在HTML中使用style属性一样，在HTML文档里使用诸如onclick之类的属性也是一种既没有效率，又容易引发问题的做法；
使用一个”挂钩“，就像CSS机制中的的class或id属性那样，把JavaScript代码调用行为与html文档中的结构和内容分离开来，网页就会健壮的多
5.5 向后兼容性
有些浏览器对JavaScript和DOM脚本代码的支持可能不太好，这样有可能导致某些代码无法使用的状况，为了解决这种问题，可以使用
对象检测（object detection）方法
对象检测（object detection）方法：只要把某个方法打包在一个if语句里，就可以根据这条if语句的条件表达式的求值结果是true还是false来决定应该采取怎样的行为。在JavaScript语言里，几乎所有的东西（包括各种方法在内）都可以被当做对象来对待，而这意味着我们可以容易的把不支持某个特定DOM方法的浏览器检测出
来：if (method){
statements;
}
示例：
window.onload = function(){
if (!document.getElementsByTagName) return false; //如果浏览器不支持document.getElementsByTagName方法，就不执行后面的代码
.....
}
if (!document.getElementsByTagName) return false; //如果浏览器不支持document.getElementsByTagName方法，就不执行后面的代码
.....
}
第六章
6.1 与DOM编程工作有关的问题不外乎
预留后路、
向后兼容性和
分离JavaScript这几大类
6.3.2 如果想用JavaScript为网页添加一些行为，就不应该让JavaScript代码对网页的结构有任何依赖
6.3.5 匿名函数：在整个脚本文件中只出现一次的函数，匿名函数没有函数名，只能在哪里定义，就在哪里使用。
如：links[i].onclick = function() {}
6.4.1 nodeName属性总是返回一个大写字母的值，即使元素在HTML文档里是小写字母
6.5 DOM core和HTML-DOM
DOM core并不只属于JavaScript，支持DOM 的任何一种程序设计语言都可以使用它们
有许多属性专属于HTML-DOM；同样的操作既可以用DOM core来操作，也可以用HTML-DOM来操作
第七章
7.1 将结构（HTML）、样式（CSS）和行为（javascript）分开是一个基本原则
document.write()方法：
优点：可以方便的将文本插入到html文档中；
缺点：违背了“分离JavaScript”原则；必须要在HTML文档的body部分使用