JavaScript DOM 9.21

2015-09-21 本文已影响33人老实敦厚的宇哥

DOM

文档：D

Document（文档），他把你编写的网页文档转换为一个文档对象。

对象：O

Object（对象），是一种自足的数据集合，与某个对象关联的变量称为这个对象的属性；只能通过某个特定的对象去调用的函数成为这个对象的方法。
js利得对象可以氛围三个类型

用户定义对象（user-defined object）：有程序员自行创建的对象。
内建对象（native object）：内建在js里的对象，如Array，Math，和Date等。
宿主对象（host object）：由浏览器提供的对象。

在js的最初版本里，一些对编写脚本非常重要的宿主对象就已经可用了，他们当中最基础的对象是window对象。

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

模型：M

Model（模型），也可以说是map。含义都是某种事物的表现形式。就像一个火车模型代表着一列火车，一张城市街道图代表一个实际存在的城市，DOM代表加载到浏览器窗口的网页。浏览器提供网页的地图（模型），我们通过js去读取这张地图。

既然是地图，就必须有方向，等高线，比例尺的图例。要想看懂和使用地图，必须知道图例的含义和用途。

DOM把一份文档表示为一棵树，家谱树。家谱树本身也是一种模型，适合编写HTML，<html>为根元素，代表了整个文档，<head>和<body>位于统一层次互不包含，为兄弟关系，有共同的父元素，也有各自的子元素。

节点

节点（node）文档是节点的集合，DOM包含了很多类型的节点。

元素节点

我们使用了<html><body><head>之类的元素，元素是制造web文档大厦的砖块，在文档的布局中形成了文档的结构。

文本节点

如果文档只有一些空白元素构成，他将有一个结构，但是文档本身并不包括任何内容。

例如<P>元素包含了文本“don't be silly”。它是一个文本节点。

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

属性节点

属性节点用来对元素做出更具体的描述。例如所有元素都有一个tittle属性。

我们可以利用这个属性对包含在元素里的东西做出准确的描述。

获取元素

有三种DOM方法可以获取元素节点，分别是通过元素ID，标签名字，类名字来获取。

1. getElementById

DOM提供getElemnetById的方法，讲返回一个有个给定的id属性的元素节点对应的对象。注意大小写

这是document对象的特有函数。在脚本代码里，函数名后面必须有一个括号，包含函数的参数，getElementById方法的参数只有一个参数：元素的ID，ID的值必须放在单引号或者双引号里。

document.getElementById ("purchases")

这个操作将返回一个对象，对应着一个元素。还可以使用typeof来验证，告诉我们这个操作数是一个字符串数值函数还是对象。
在html中添加以下代码

<script>
alert(typeof doucument.getElementById("purchases"))
</script>

之后加载这个html文件，会弹出一个alert对话框，“object”，它是一个对象。

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

2. getElementsByTagName

这个方法返回一个对象数组。‘

getElementsByTagName("li")

这个调用将返回一个对象数组，每个对象分别对应着document对象中的一个列表项元素。和其他数组一样，可以使用length属性查出这个数组里的额元素个数。

getElementsByTagName("li".length)；

会的到个数：3，这个数组里每个元素都是一个对象。可以用一个循环语句和typeof来验证。

for(var i = 0; i < getElementsByTageName("li".length);i++);｛
alert(typeof doucument.getElementsByTageName("li")[i];
}

如果你觉得getElementsByTagName("li")是一个很麻烦输入的字，而且长长的代码影响可读性，可以将它赋值给一个变量：

var item = getElementsByTagName("li"); 
getElementsByTagName

允许把通配符作为它的参数，如果你想知道一个文档里有多少个元素节点：

alert(getElementsByTagName("*").length);

3. getElementsByClassName

也只接受一个参数（类名），返回值也是一个具有相同类名的元素的数组。

小结

文档的每个元素节点都是一个对象，每个对象天生具有一些列的非常有用的方法。归功于DOM，利用预先定义好的方法，可以检索对象信息，还可以改变元素属性。

一份文档就是一个节点树。
借点分为不同类型：元素节点，属性节点和文本节点等。
getElementById返回一个对象，对象对应着文档里的一个特定的元素节点。
getElementByTagName和getElementByClassName将返回一个数组，分别对应一组特定的元素节点。
每一个节点都是一个对象。

获取和设置属性

以上有三种获取元素的方法，得到需要的元素之后，我们可以设法获取它的各个属性。getAttribute用来获取属性，setAttribute用来更改属性节点的值。

getAttribute

getAttribute是一个函数。他只有一个参数--你准备查询的属性名字：

object.getAttribute（attribute）

**与之前介绍过的那些方法不同，getAttribute不属于document对象，不能通过document调用。只能通过元素节点对象调用。

document.getElementsByTageName("p").getAttribute("tittle");

setAttribute

之前介绍的方法都是获取信息。setAttribute是用来对属性节点的值做出修改。与getAttribute一样，setAttribute也只适用于元素节点。

object.setAttribute(attribute,value)

例如：

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

我们设置了一个节点的tittle属性，如果原先不存在。表明setAttribute实际完成了两项操作，创建再设置，用在存在的属性上，值会覆盖。

通过setAttribute对文档修改后，查看源代码，不会改变。做出的修改不会反映在文档本身的源代码里。原因：DOM的工作模式，先加载静态内容，再动态刷新。

总结

getElementById
getElementsByTagName
getElementsByClassName
getAttribute
setAttribute

这五个方法是DOM脚本的基石。