2_DOM（DOM编程艺术）

3. DOM

3.1 文档：“D”

3.2 对象：“O”

3.3 模型：“M”

3.4 节点

文档是由节点构成的集合，只不过此时的节点是文档树上的数值和树叶而已

3.4.1 元素节点

body、p、ul之类的元素，在文档中的布局形成了文档的结构

标签的名字就是元素的名字

元素可以包含其他的元素。事实上，没有包含在其他元素里的唯一元素是html元素，它是我们节点树的根元素

3.4.2 文本节点

绝大多数内容都是由文本提供的

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

3.4.3 属性节点

属性节点用来对元素做出更具体的描述，例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述

<p title = "a gentle reminder">Do not forget to buy this stuff.</p>

在DOM中，title = "a gentle reminder"是一个属性节点

因为属性节点总是被包含在元素节点中。并非所有的元素都包含着属性，但所有的 属性都被元素包含。

3.4.4 CSS

3.4.5 获取元素

1. getElementById

   document.getElementById("id")
   

   它是document对象特有的函数

   这个调用将返回一个对象，对应着document对象里的一个独一无二的元素，那个元素的HTML id属性值是id

   DOM提供了另一个方法来获取那些没有id属性的对象

2. getElementsByTagName

   element.getElementsByTagName("tag")
   

   该方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素

3. getElementsByClassName

   这是H5新增的方法

   该方法返回一个具有相同类名的元素的数组

   document.getElementsByClassName("class")
   

   使用这个方法还可以查找那些带有多个类名的元素，要指定多个类名，只要在字符串参数中用空格分割类名即可。例如：

   alert(document.getElementsByClassName("important sale").length)
   

   及时在元素的class属性中，类名的顺序是“sale important”而非参数中指定的“important sale”也照样会匹配该元素。不仅类名的实际顺序不重要，就算元素还带有更多类名也没有关系

3.4.6 盘点知识点

• 一份文档就算一棵节点树
• 节点分为不同的类型：元素节点、属性节点和文本节点等
• getElementById将返回一个对象，该对象对应着文档里的一个特定的元素节点
• getElementsByTagName和getElementByClassName将返回一个对象数组，它们分别对应着文档里的一组特定的元素节点
• 每一个节点都是一个对象

3.5 获取和设置属性

3.5.1 getAttribute

是一个函数，只有一个参数——查询的属性的名字

object.getAttribute(attribute)

不属于document对象，所以不能通过document对象调用，只能通过元素节点对象调用，例如（获得每个p的title标签）：

var paras = document.getElementsByTagName("p");
gor(var i=0; i < paras.length; i++){
    alaert(paras[i].getAttribute("title"));
}

3.5.2 setAttribute

和getAttribute一样，只能用于元素节点

object.setAttribute(attribute, value)

var paras = document.getElementsByTagName("p");
for(var i=0; i<paras.length; i++){
    var title_text = paras[i].getAttribute("title");
    if(title_text){
        paras[i].setAttribute("title","brand new title text");
        alert(paras[i].getAttribute("title"));
    }
}

setAttribute做出的修改不会反映在文档本身的源代码里。

这种“表里不一”的现在源自DOM的工作模式：先加载文档的静态内容，在动态刷新，动态刷新不影响文档的静态内容。

3.6 小结

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

• getElementById
• getElementsByTagName
• getElementByClassName
• getAttribute
• setAttribute