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脚本的基石。
网友评论