第三章： DOM
节点的概念
四个非常适用的DOM方法：getElementById, getElementByTagName, getAttribute和setAttribute
-
文档：DOM中的”D”
DOM是”Document Object Model”（文档对象模型）的首字母所写。如果没有document(文档)，DOM也无从谈起。
-
对象： DOM中的”O”
“对象”是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性；可以通过某个特定的对象去调用的函数被称为这个对象的方法。
JS里，对象分为三种类型：
- 用户定义对象： 程序员自己创建的对象。
- 内建对象： 内建在JS语言里的丢向，如Array,Math
- 宿主对象：浏览器提供的对象
宿主对象中，最基础的是window对象。
window对象对应着浏览器窗口的本身，这个对象的属性和方法通常被称为BOM（浏览器对象模型）。
-
模型： DOM中的”M”
M代表着”Model”，但说它代表着”Map”也可以。含义都是某种事物的表现形式。DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过JS去读取这张地图。
先了解表述这个地图的记号的意义：
DOM把一份文档表示为一棵树，这是我们理解和运用这一模型的关键。
-
节点
节点（note）这个名词来自网络理论，代表着网络中的一个连接点。网络是由节点构成的集合。DOM中的节点类型还包含着其他类型的节点。
- 元素节点
DOM的原子是元素节点。
一个页面是由元素来构成的。而各种标签则提供了元素的名字。元素可以包含其他的元素。html元素是节点树的根元素。
- 文本节点
文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。
- 属性节点
注释也是一种节点类型。元素都或多或少的有一些属性。我们可以利用这个属性对包含在元素里的东西做出准确的描述。并非所有的元素都包含着属性，但素有的属性都会被包含在元素里。
-
getElementById()方法
DOM提供了一个名为getElementById()的方法，这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。
这个方法是与document对象相关联的函数。在脚本代码里，函数名的后面必须跟有一组圆括号。这组圆括号包含着函数的参数。getElementById()方法只有一个参数：你想获得那个元素的id属性值。而且必须放在单引号或双引号里。
document.getElementById(”purchases”)
这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素。
我们还可以利用DOM提供的另外一种方法来提取对象
-
getElementsByTagName()方法
getElementByTagName()方法将返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。它的参数是XHTML标签的名字：
element.getElementsByTagName(tag)
这个方法返回的是一个数组。
document.getElementsByTagName(”li”)
这个调用将返回一个对象数组，每个对象分别对应着document对象中一个列表项（li）
我们可以利用length属性查出这个数组的元素个数。
for (var I =0 ; I < document.getElementsByTagName(”li”).length; I++) {
alert (typeof document.getElementsByTagName(”li”)[i]);
}
将方法名称赋值给变量，可以缩减打字量并提高函数的可读性，如
var items = document.getElementsByTagName(”li”);
for (var I = 0 ; I < itemts.length; i++) {
alert (typeof items[i]);
}
alert(document.getElementsByTagName(”*”).length);
可以让我们方便的获得一个页面总共有多少个元素节点。
如果只想知道其id属性值是purchase的元素包含着多少个列表项（li）的话，需要更具体的对象来调用这个方法：
var shopping = document.getElementById(”purchase”);
var items = shopping.getElementsByTagName(”*”);
在这两条语句执行完毕后，items数组将只包含其id属性值是purchase的无序清单里的元素。
3.4 趁热打铁
简要总结：
- 一份文档就是一棵节点树
- 节点分为不同类型：元素节点，属性节点和文本节点等。
- getElementById()方法将返回一个对象，该对象对应着文档里的一个特定的元素节点
- getElementByTagName()方法将返回一个对象数组，它们分别对应着文档里的一个特定的元素节点
- 这些节点中的每个都是对象
3.4.1 getAttribute()方法
我们可以利用getAttribute()方法把获得的元素对象各种属性值查询出来。
var paras = document.getElementsByTagName(”p”);
for (var i = 0; i < paras.length; i++) {
alert (paras[i].getAttribute(”title”));
}
null是JS语句中的空值，若文档中含有多个未定义title属性的p标签，则会显示null。让我们重新修改这段代码，使其只在title属性存在时才弹出消息，同时提高可读性。
var paras = document.getElementsByTagName(”p”);
for (var i = 0; i < paras.length; i++) {
var title_text = paras[i].getAttribute(”title”);
if (title_text != null) {
alert(title_text);
}
}
进一步把代码缩短：当检查某项数组是否是null值时，我们其实是在检查它是否存在。这种检查可以简化为直接把被检查的数据用作if语句的条件。
if(title_text != null)可以替换为 if(title_text)
3.4.2 setAttribute()方法
修改节点属性值的方法。
此方法也是只能通过元素节点对象调用的函数，需要向它传递两个参数：
object.setAttribute(attribute, value);
下面的语句我们首先获得purchase属性的元素，然后修改这个元素的属性值。
var shopping = document.getElementById(”purchase”);
shopping.setAttribute(”title”, “a list of goods”);
若一个元素没有setAttribute()方法中定义的属性值，则会先创建这个属性，然后再赋值。
一个细节： setAttribute()方法对文档的修改，将似的文档在浏览器窗口里的显示效果发生变化，但是源代码中不会有任何修改，也就是说，这个方法的修改不会影响任何原来的文档数据，这个是DOM的工作模式决定的：先加载文档的静态内容，再以动态方式对他们进行刷新，刷新不会影响文档的静态内容。
第三章总结：
- getElementById()方法
- getElementsByTagName()方法
- getAttribute()方法
- setAttribute()方法
这四个方法将是DOM的基石。
