第三章： DOM

节点的概念

四个非常适用的DOM方法：getElementById, getElementByTagName, getAttribute和setAttribute

1. 文档：DOM中的”D”
   

DOM是”Document Object Model”（文档对象模型）的首字母所写。如果没有document(文档)，DOM也无从谈起。

1. 对象： DOM中的”O”
   

“对象”是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性；可以通过某个特定的对象去调用的函数被称为这个对象的方法。

JS里，对象分为三种类型：

• 用户定义对象： 程序员自己创建的对象。
• 内建对象： 内建在JS语言里的丢向，如Array,Math
• 宿主对象：浏览器提供的对象

宿主对象中，最基础的是window对象。

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

1. 模型： DOM中的”M”
   

M代表着”Model”，但说它代表着”Map”也可以。含义都是某种事物的表现形式。DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过JS去读取这张地图。

先了解表述这个地图的记号的意义：

DOM把一份文档表示为一棵树，这是我们理解和运用这一模型的关键。

1. 节点
   

节点（note）这个名词来自网络理论，代表着网络中的一个连接点。网络是由节点构成的集合。DOM中的节点类型还包含着其他类型的节点。

1. 元素节点

DOM的原子是元素节点。

一个页面是由元素来构成的。而各种标签则提供了元素的名字。元素可以包含其他的元素。html元素是节点树的根元素。

1. 文本节点

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

1. 属性节点

注释也是一种节点类型。元素都或多或少的有一些属性。我们可以利用这个属性对包含在元素里的东西做出准确的描述。并非所有的元素都包含着属性，但素有的属性都会被包含在元素里。

1. getElementById()方法
   

DOM提供了一个名为getElementById()的方法，这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。

这个方法是与document对象相关联的函数。在脚本代码里，函数名的后面必须跟有一组圆括号。这组圆括号包含着函数的参数。getElementById()方法只有一个参数：你想获得那个元素的id属性值。而且必须放在单引号或双引号里。

document.getElementById(”purchases”)

这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素。

我们还可以利用DOM提供的另外一种方法来提取对象

1. 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的基石。