DOM（Document Object Model）

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"));