DOM

D：文档document

O：对象

js语言中的对象可以分为三类：

①用户定义的对象（user-defined object）：由程序员自行创建的对象。

②内建对象（native object）：内建在js语言里的对象

③宿主对象（host object）：由浏览器提供的对象

windows对象对应着浏览器窗口本身，这个对象的属性和方法统称为BOM（浏览器对象模型）

document对象的主要功能就是处理网页内容

M：Model（模型）：某种事物的表现形式

节点包括：元素节点、文本节点、属性节点

在XHTML中，文本节点总是包含在元素节点中，但并非所有的元素节点都包含文本节点。

属性节点用来对元素做出更具体的描述。属性节点总是被包含在元素节点中。并非所有的元素都包含着属性，但所有的属性都被元素包含。

typeOf操作符返回的操作数类型：字符串、数值、函数、布尔值、对象

文档中的每一个元素都是对象

DOM方法获取元素节点：

①通过元素ID

getElementById

alert(typeOf document.getElementById("purchases"));

返回一个对象

②通过标签名字

getElementsByTagName方法返回一个对象数组

element.getElementsByTagName(tag)//只接受一个参数

alert(document.getElementsByTagName(li).length);

即使整个文档这个标签只有一个元素，也会返回一个数组，此时数组的长度为1

getElementsByTagName允许把通配符作为它的参数，通配符*号必须放在引号里。

③通过类名字

getElementsByClassName(class)

返回一个具有相同雷鸣的元素的数组

指定多个类名，只需在字符串参数中用空格分隔类名即可。

获取和设置属性：只能用于元素节点

获取属性

getAttribute是个函数，只有一个参数

getAttribute方法不属于document对象，不能通过document对象调用，只能通过元素节点对象调用。

如：获取每个p元素的title属性

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

如果上述代码的文档中有更多个p元素，并且它们都没有title值，那么此方法会返回null值，在js中，null的含义是“没有值”

上述代码中，检查title为null的就不返回：

var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
    var text=paras[i].getAttribute("title");
    if(text) alert(text);//如果text存在，即text不为空，即title存在
}

设置属性：

setAttribute()

它允许我们对属性节点的值做出修改

var shopping=document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");

setAttribute()可以完成两项操作：先创建这个属性，然后设置它的值。如果用在一个本身就有这个属性的元素节点上，这个属性原来的值就会被覆盖掉。

setAttribute()方法是“第1级DOM”的组成部分，它可以设置任意元素节点的任意属性。

element.value="the new value"   ←==→  element.setAttribute("value","the new value")  两者效果等价

DOM是一种适用于多种环境和多种程序设计语言的通用型API

DOM是文档的表示。DOM是一条双向车道，不仅可以获取文档的内容，还可以更新文档的内容。