DOM——篇1

DOM是什么？

DOM全称—文档对象模型，它是一个接口，我们可以通过DOM这个接口对文档（HTML/XML）进行修改。

解释

D:document 文档,DOM就是在文档的基础上进行操作的

O:object（对象）

对象：数据类型。是由一些属性和方法组合在一起构成的数据实体。
属性：与对象相关的值。
方法:只有某个特定对象才能调用的函数（能够在对象上进行的相关操作）。
JS中的属性和方法都用.来访问
eg:对象——汽车
对象的属性——名称、型号、重量、颜色
car.name=Fiat
car.model=500
car.weight=850kg
car.color=white
对象的方法——启动、驾驶、刹车
car.start()
car.drive()
car.brake()
对象的类型:

用户定义对象
内建对象（一系列预先定义好的对象）
var beatles = new Array();（创建一个array对象的新实例)
beatles.length(利用了array对象的length属性）
Math对象
有round方法
Date对象：存储和检索与特定日期和时间有关的信息
宿主对象
这些对象不是由JS提供的，而是由运行环境提供的，这个环境是浏览器。
eg:Form Image Element document
window对象——》对应浏览器窗口本身。这个对象的属性和方法被称为BOM
document对象——》处理网页的内容

M:Model(模型)

DOM把一份文档表示为一棵树，可以称作节点树模型。

节点

文档是由节点构成的集合。

元素节点

元素在文档中的布局形成了文档的结构。

元素可以包含其他元素，只有元素没有父元素，它是根元素

文本节点

元素包含着文本”hello world”.它就是一个文本节点
文本节点总是在元素节点内部。

属性节点

属性节点用来对元素做更加具体的描述
属性节点总是被包含在元素节点中

获取元素

通过元素ID获取节点

DOM提供了一个名为getElementById的方法
这个方法返回一个与那个有着给定id属性值的元素节点对应的对象。
getElementById是document对象特有的函数，函数名的后面有一对括号，括号里的是参数——想获得的那个元素的Id属性
document.getElementById(“purchases”)
这个调用将会返回一个对象
alert(typedof document.getElementById(“purchases”));
//object

通过标签名字获取节点

这种方法用来获取那些没有id属性的对象
getElementByTagName返回一个对象数组。
document.getElementByTagName(“li”)
允许把一个通配符作为参数——>某份文档里总共有多少个元素节点
alert(document.getElementsByTagName(“*”).length);

可以把上述两者相互结合
如果你想知道id属性值是purchase的元素包含多少个列表项，必须通过一个更具体的对象去调用这个方法.
var shopping = document.getElementById(“purchase”);
var items = shopping.getElementByTagName(“li”);
此时的items是一个数组对象

通过类名获取节点

getElementByClassName(class)
返回一个具有相同类名的元素的数组
还可以查找带有多个类名的元素，参数中类名用空格分开
可以组合使用getElementByClassName和getElementById
如果你想知道在id为“purchase”的元素中有多少类名包含”sale”列表项，可以先找到包含id的对象，再调用getElementByClassName

var shopping = document.getElementById(“purchase”);
var sales=shopping.getElementByClassName(“sale”);

获取和设置属性

getAttribute

getAttribute为函数，它的参数——要查询的属性的名字
object.getAttribute(属性名)
不属于document对象，只能通过元素节点对象调用

var paras = document.getElementByTagName("p");
for(var i=0 ; i<paras.length ; i++)
{
var title_text = paras[i].getAttribute("title");
if(title_text != null)
    alert(title_text);  
}

setAttribute

setAttribute可以对属性节点的值做出修改，也只能用于元素节点。object.setAttribute(attribute,value)

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

var shopping=document.getElementById("purchase");
alert(shopping.getAttribute("title"));
//出现Null，说明title属性原本就不存在
shopping.setAttribute("title","a list of goods");
//setAttribute完成了两个操作：先创建这个属性，再为它设置值
alert(shopping.getAttribute("title"));
//将会显示a list of goods