getElementById()
getElementByTagName() 返回数组
innerHTML 也用于设置网页内容
document.getElementById("story").innerHTML = "message";
innerHTML 取代原始内容
若想追加可以借由串联新内容至旧内容上：elem.innerHTML += " This sentence gets appended."
网页是DOM节点的集合
DOM树的每个节点均根据类型分类。主要的节点类型对应至网页的结构，主要以元素节点和文本节点构成。
document 位于DOM树最顶端的节点，代表文档本身，且出现在html元素的上一层
element 对应到HTML标签的HTML元素
text 元素的文本内容，一定存储在元素的子节点里
attribute 元素的属性，可透过元素节点访问，但不会直接出现在DOM树里
（元素内容前后均有空格，视为空文本元素）
在DOM树的节点间往返移动时，节点特性是个便利的好工具
nodeValue 存储节点的值，只限文本与属性节点使用（不包含元素）
nodeType 节点类型，例如它是DOCUMENT 或TEXT 等等，但以代号表示
childNodes 包含节点下所有子节点的数组，以出现在HTML代码中的顺序而排列
firstChild 节点写的第一个子节点
lastChild 节点下的最后一个子节点
这些特性就是巧妙操纵文档书以访问特定节点数据的关键。例如使用节点特性并加上getElementByID（）（访问节点的）方法，即可快速分离出某个节点。
nodeValue 特性访问存储在节点里的文本内容.
使用DOM改变节点文本
如果只有一个子节点（一个文本节点）可以直接改变文本节点的内容：
document.getElementById("story").firstChild.nodeValue = "Ok,maybe you are alone.";
新的文本内容取代现有的子节点内容
但事情不见得一直这么简单。如果节点下不只拥有一个子节点呢？
<p id = "story">
You are <strong>not</strong> alone.
</p>
如果只取代第一个子节点。剩余子节点仍在原处，会出现很奇怪的效果
document.getElementById("story").firstChild.nodeValue = "Ok, maybe you are alone.";
结果：Ok,maybe you are alone.not alone.
只取代了第一个子节点，剩余子节点都没改变...
改变节文本的（安全）三步骤
我们其实应该清楚所有子节点，然后新增具有新节点的新子节点。
1.移出所有子节点
2.根据新内容创建新的文本节点
3.把新创建的文本子节点附加在节点下
上述步骤可透过三个DOM方法完成：
1.removeChild() 移出目标节点下的一个子节点，传入将被移出的子节点
2.createTextNode() 从文本字符串创建文本节点
3.appendChild() 以最后一个子节点的形式加入新节点，传入将被新增的子节点。
var node = document.getElementById("story"); 首先使用id抓出元素（节点）；
while(node.firstChild) 移除元素的一个子节点，直到所有的子节点均移除干净。
node.removeChild(node.firstChild);
node.appendChild(document.creatTextNode("Ok,maybe you are alone."))；创建新文本节点
移除所有子节点后，附加新文本节点至父节点
替换节点内文本的万用函数，而节点透过ID被引用，两个自变量，id和newText
function replaceNodeText（id，newText）{
var node = document.getElementById（id）；
while（node.firstChild）
node.removeChild（node.firstChild）；
node.appendChild（document.createTextNode（newText））；
}
样式的问题：CSS与DOM
DOM提供了透过元素（节点）访问样式的途径。透过DOM揭露CSS样式的方法之一，就是利用元素的style类---应用一组样式（一个类）至元素的地方。
别把CSS的样式类和JS的类搞混了
css样式类和js的类，两者差异非常大，css样式类是一组样式，可应用至网页中的元素；而js的类是个创建js对象的模板
className 特性提供对元素样式类的访问
alert(document.getElementById("decisoin1").className);
事件触发器
onmouseover 、onmouseout
将按钮变成span元素，因为span是行内块元素
<span id = "decisoin1" class="decisoin" onclick = "changeScene(1)"
onmouseover = "this.className= 'decisionhover' "
onmouseout = "this.className= 'decision' " >start Game</span>
调整单项样式
细微调整的时候，style对象为我们服务；css样式里的visibility特性可以设定元素的显示或隐藏。
节点的style特性提供对单一样式特性的访问
document.getElementById("decision2").style.visibility = "visible";
document.getElementById("decision2").style.visibility = "hidden";
@借由改变节点的整份样式类，className节点特性达成喜剧行的样式变化
@借由访问节点的单一样式特性，style节点特性达成少量样式变化
@css样式类与JavaScript类完全无关---它们是完全不同的东西
@网页元素可利用元素对象的visibility样式特性做动态的显示或隐藏
样式特性display也可达成相似的显隐效果，设定方式为：display：none（隐藏）或display：block（显示）。
createElement()
@利用document对象的createElement（）方法，能够创建任何HTML元素。
@若需新增元素的文本内容，必须创建一个文本内容子元素，并附加至元素下。
@借由小心地新增与移除DOM树上的节点，网页可以随意拆解与重组。
getElementByTagName() 返回数组
innerHTML 也用于设置网页内容
document.getElementById("story").innerHTML = "message";
innerHTML 取代原始内容
若想追加可以借由串联新内容至旧内容上：elem.innerHTML += " This sentence gets appended."
网页是DOM节点的集合
DOM树的每个节点均根据类型分类。主要的节点类型对应至网页的结构，主要以元素节点和文本节点构成。
document 位于DOM树最顶端的节点，代表文档本身，且出现在html元素的上一层
element 对应到HTML标签的HTML元素
text 元素的文本内容，一定存储在元素的子节点里
attribute 元素的属性，可透过元素节点访问，但不会直接出现在DOM树里
（元素内容前后均有空格，视为空文本元素）
在DOM树的节点间往返移动时，节点特性是个便利的好工具
nodeValue 存储节点的值，只限文本与属性节点使用（不包含元素）
nodeType 节点类型，例如它是DOCUMENT 或TEXT 等等，但以代号表示
childNodes 包含节点下所有子节点的数组，以出现在HTML代码中的顺序而排列
firstChild 节点写的第一个子节点
lastChild 节点下的最后一个子节点
这些特性就是巧妙操纵文档书以访问特定节点数据的关键。例如使用节点特性并加上getElementByID（）（访问节点的）方法，即可快速分离出某个节点。
nodeValue 特性访问存储在节点里的文本内容.
使用DOM改变节点文本
如果只有一个子节点（一个文本节点）可以直接改变文本节点的内容：
document.getElementById("story").firstChild.nodeValue = "Ok,maybe you are alone.";
新的文本内容取代现有的子节点内容
但事情不见得一直这么简单。如果节点下不只拥有一个子节点呢？
<p id = "story">
You are <strong>not</strong> alone.
</p>
如果只取代第一个子节点。剩余子节点仍在原处，会出现很奇怪的效果
document.getElementById("story").firstChild.nodeValue = "Ok, maybe you are alone.";
结果：Ok,maybe you are alone.not alone.
只取代了第一个子节点，剩余子节点都没改变...
改变节文本的（安全）三步骤
我们其实应该清楚所有子节点，然后新增具有新节点的新子节点。
1.移出所有子节点
2.根据新内容创建新的文本节点
3.把新创建的文本子节点附加在节点下
上述步骤可透过三个DOM方法完成：
1.removeChild() 移出目标节点下的一个子节点，传入将被移出的子节点
2.createTextNode() 从文本字符串创建文本节点
3.appendChild() 以最后一个子节点的形式加入新节点，传入将被新增的子节点。
var node = document.getElementById("story"); 首先使用id抓出元素（节点）；
while(node.firstChild) 移除元素的一个子节点，直到所有的子节点均移除干净。
node.removeChild(node.firstChild);
node.appendChild(document.creatTextNode("Ok,maybe you are alone."))；创建新文本节点
移除所有子节点后，附加新文本节点至父节点
替换节点内文本的万用函数，而节点透过ID被引用，两个自变量，id和newText
function replaceNodeText（id，newText）{
var node = document.getElementById（id）；
while（node.firstChild）
node.removeChild（node.firstChild）；
node.appendChild（document.createTextNode（newText））；
}
样式的问题：CSS与DOM
DOM提供了透过元素（节点）访问样式的途径。透过DOM揭露CSS样式的方法之一，就是利用元素的style类---应用一组样式（一个类）至元素的地方。
别把CSS的样式类和JS的类搞混了
css样式类和js的类，两者差异非常大，css样式类是一组样式，可应用至网页中的元素；而js的类是个创建js对象的模板
className 特性提供对元素样式类的访问
alert(document.getElementById("decisoin1").className);
事件触发器
onmouseover 、onmouseout
将按钮变成span元素，因为span是行内块元素
<span id = "decisoin1" class="decisoin" onclick = "changeScene(1)"
onmouseover = "this.className= 'decisionhover' "
onmouseout = "this.className= 'decision' " >start Game</span>
调整单项样式
细微调整的时候，style对象为我们服务；css样式里的visibility特性可以设定元素的显示或隐藏。
节点的style特性提供对单一样式特性的访问
document.getElementById("decision2").style.visibility = "visible";
document.getElementById("decision2").style.visibility = "hidden";
@借由改变节点的整份样式类，className节点特性达成喜剧行的样式变化
@借由访问节点的单一样式特性，style节点特性达成少量样式变化
@css样式类与JavaScript类完全无关---它们是完全不同的东西
@网页元素可利用元素对象的visibility样式特性做动态的显示或隐藏
样式特性display也可达成相似的显隐效果，设定方式为：display：none（隐藏）或display：block（显示）。
createElement()
@利用document对象的createElement（）方法，能够创建任何HTML元素。
@若需新增元素的文本内容，必须创建一个文本内容子元素，并附加至元素下。
@借由小心地新增与移除DOM树上的节点，网页可以随意拆解与重组。