标签：
在JS中经常会用到DOM，document object modle，即文档对象模型。其实就是在我们打开一个网页之后会自动建立的一个模型。首先我们先实例一个网页：
<html>
<head>
<meta charset="utf-8">
<title>bob‘s love</title>
</head>
<body>
<p id="FirstParagraph">bob‘s love list</p>
<ul class="bobsul">
<li>movie</li>
<li>music</li>
<li>food</li>
</ul>
</body>
</html>
那么像上面的这个网页的个个元素标签之间的结构就可以用DOM模型来表示：
html
head body
meta title p ul
li li li
html作为网页的开端，它既没有父元素，也没有兄弟元素。head和body，他们都是html父元素的子元素，也同时是彼此的兄弟元素；且因为在body元素内部有其他元素，所以body同时也是p，ul的父元素。以下的meta，title，p，ul等都是同理的关系。整个dom模型是一个数学概念上的树，而html元素就是根元素或者根节点。
下面，我们讨论以下节点，节点有三种，分别是元素节点，文本节点，属性节点。
元素节点就是构成网页结构的元素，比如上述中的p节点，ul节点，li节点。
文本节点就是构成网页内容的节点，比如上述中的li标签内部的内容。
属性节点就是元素节点更加具体的细化或者描述，比如上述中的p节点的id属性。
那么我们怎么才能在dom下去获取这些节点呢？我们需要利用在dom下的document对象中的3种方法。
1.getElementById
var test = document.getElementById("FirstParagraph");
在上面的例子中，document.getElementById("FirstParagraph")就是调用了document中的方法getElementById(),返回了id为FirstParagraph的对象并且赋值给test。
2.getElementByTagName
var test = document.getElementByTagName("li");
在上面的例子中，右边的方法会返回一个标签名为“li”所有对象的数组。比如在上述网页中，就会返回一个长度是3的数组。
3.getElementByClassName
var test = document.getElementByClassName("bobsul");
在上面的例子中，就会返回元素的类名为“bobsul”的对象。又因为，类名可以重复，所以会像ByTagName一样返回一个数组，只不过在上面的网页实例中，这个数组的长度为1.
在通过上述的方法获取到元素节点之后，我们还需要对元素节点的属性进行获取和设置。
1.获取属性 object.getAttribute(attribute);
2.设置属性 object.setAttribute(attribute,value);
标签：
原文地址：http://www.cnblogs.com/ilbajs/p/4649976.html
