DOM
DOM把一份文档表示为一棵树（这是所说的“树”是数学意义上的概念），这是我们理解和运用这一模型的关键。更具体的说，DOM把文档表示为一颗家谱树。
"D"
document(文档):当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生，它吧你编写的文档转换成一个文档对象。
“O”
object:有用户自定义对象，内建对象和宿主对象。
“M”
叫model也好，map也好，就是某种事物的变现形式。
节点(node)
节点（node）这个词是个网络术语，它表示网络中的一个连接点，一个网络就是由一些节点构成的集合，在DOM中的节点就是树中的树枝和树叶
元素节点(element node)
DOM的原子就是元素节点：例如文本段落的元素的名字是“p”，无序清单元素的名字是“ul”，列表项元素的名字是“li”。元素可以包含其他的元素。
文本节点(text node)
元素节点只是节点类型的一种。如果一份文档完全由一些空白元素构成，它将有一个结构，但这份文档本省将不包含什么内容。在<p>I am wang</p>中“I am wang”就是文本节点（text node）
属性节点(attribute node)
属性节点用来对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述：<p title="a gentle reminder">I am wang</p>其中title就是属性节点
css
DOM并不是与网页结构打交道的唯一技术。我们还可以通过CSS（层叠样式表）告诉浏览器如何现实一份文档的内容。类似于DOM，CSS也将document的你内容视为一颗节点数。节点树上的各个元素将继承其父元素的样式属性。
//作用在整个页面
body{
color:white;
background-color:black;
}
class属性
可以在所有元素上任意应用class属性：
<p class="special">this paragraph has the special class</p>
<h2 class="special">so doed this headline</h2>
//在style可以这么写:
.special{
border:1px solid white;
background-color:#333;
color:#ccc;
padding:1em;
}
//而id在一个页面中只能使用一次，多次使用也可以，但用javascript将会混乱
//在style可以这么写样式：
#special{
font-weight:bold;
}
获取元素：
getElementById(的方法
返回一个与那个有着给定id属性值的元素节点对应的对象。
getElementsByTagName()方法
返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById，这个方法也是只有一个参数的函数，他的参数是标签的名字叫：document.getElementsByTagName(tag);
var shopping=document.getElementById("purchases");
var items=shopping.getElementsByTagName("*");
getElementsByClassName("sale")
返回一个包含类名“sale”所有元素，是一个数组。
//得到id为“purchases”的元素中有多少类名包含“sale”列表项
var shopping=document.getElementById("purchases");
var items=shopping.getElementsByClassName("sale");
getAttribute()和setAttribute()
getAttribute()
getAttribute方法不属于document对象，所以不能通过document对象调用。它只能通过元素节点对性爱那个调用。
var file=document.getElementById("btn");
alert(file.getAttribute("type"));
setAttribute()
设置元素节点中的属性节点的属性值
var file=document.getElementById("btn");
file.setAttribute("type","option");
alert(file.getAttribute("type"));
