从零开始的毕设--JavaScript-DOM

访问HTML元素

我们已经很熟悉标准document对象的getElementById()方法，只需要元素具有独一无二的id。
但有件事需要我们研究一番：
getElementByTagName()
这个方法能够抓出网页上所有特定类型的元素，例如div或者Img。这个方法返回的结果数组里，包含出现在网页上的每一个指定元素，并按照出现在HTML的顺序排列。
与内在的HTML建立接触
innerHTML特性对所有存储在元素里的内容提供了访问管道。

<p id="story">
	You are standing <strong>alone</strong> in the woods.
</p>

document.getElementById("story").innerHTML能够获得元素的所有内容，包括HTML标签：You are standing <strong>alone</strong> in the woods.

innerHTML最初由Microsoft创建，是非正式的标准，用于快速轻松地改变网页元素内容。不过它并非标准的事实仍然不会改变。所以，我们还有既可以达到相同任务，又遵循标准的方式，而且还比较有灵活性并强大，只是不算很简单。遵循标准的方式牵涉到DOM，Document Object Model（文档对象模型），一组JavaScript提供完整，全面控制网页结构与内容对象。

DOM

DOM提供对脚本友善的网页结构与内容视图，如果你想用javascript动态改变网页，这点非常重要。透过假装DOM的透镜，网页看来就像形成树状的层层元素。

节点分类
DOM树的每个节点均根据类型分类。主要的节点类型对应至网页的结构，主要以元素节点ELEMENT和文本节点TEXT构成。
利用特性攀爬DOM树
大部分与DOM的交互均从document对象开始，它是文档节点的根节点。document对象提供各种方法，比如getElementById() getElementByTagName(),以及许多特性。
document对象的许多特性可由树上的每个节点取得，有些特性甚至能帮我们导向其他节点，也就是说：
节点特性能用于导览节点树。

1. nodeValue：存储节点的值，只限文本与属性节点使用。
2. nodeType：节点类型，例如是DOCUMENT或者TEXT等等。
3. childNodes：节点的而所有子节点的数组。
4. firstChild：大儿子
5. lastChild：小儿子
   这些特性就是访问特定节点数据的关键，比如：

alert(document.getElementById("scenetext").nodeValue);

其中nodeValue特性访问存储在节点里的文本内容。

使用DOM改变节点文本
还是以这段话为例：

<p id="story">
	You are standing <strong>alone</strong> in the woods.
</p>

首先：移除removeChild()所有节点（图中为3个：text+element+text）。
根据新内容创建createTextNode()新的文本节点。
最后附加appengdChild()新的节点。

var node=document.getElementById("story");
while(node.firstChild){
	node.removeChild(node.firstChild);//移除所有节点
}
node.appendChild(document.createTextNode("Ok,maybe you are alone!"));

另外createElement()可以增加元素。

var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("d1");
element.appendChild(para);

DOM改变样式

document.getElementById("decesion1").className="decisioninverse";