DOM：Document Object Model(文本對象模型)
D:文檔-文檔或者xml文檔
O:對象-document對象的屬性和方法
M:模型
DOM是針對xml(xml)的基於樹的API
DOM樹：節點(node)的層次
DOM把一個文檔表示為一棵家譜樹(父，子，兄弟)
DOM定義了Node的接口以及許多種節點類型來表示xml及節點的多個方面
HTML DOM Element對象
HTML DOM節點
在HTML DOM(文檔對象模型)中，每個部分都是節點：
1.文檔本身是文檔節點
2.所有HTML元素是元素節點
3.所有HTML屬性是屬性節點
4.HTML元素內的文本是文本節點
5.注釋是注釋節點
Element對象:
在HTML DOM中，Element對象表示HTML元素
Element對象可以擁有類型為元素節點，文本節點，注釋節點的子節點
NodeList對象表示節點列表，比如HTML元素子節點集合
元素也可以擁有屬性，屬性是屬性節點
節點及其類型：
元素節點：
屬性節點：元素的內容，可以直接通過屬性的方式來操作
文本節點：是元素節點的子節點，其內容為文本
<script>
//1.當整個HTML文檔加載成功後觸發window.onload事件
//當事件觸發是，執行後面function的函數體
//
window.onload=function{
//2.獲取所有的button節點，並取得第一個元素
var btn=document.getElementByTagName("button")[0];
//為button的Onclick事件賦值，當點擊button時，執行函數體
btn.onclick=function{
alert("helloworld!");
}
}
</script>
//不推薦的寫法script的位置
//HTML代碼和javascript代碼耦合性大
//
//window.onclick事件在整個HTML文檔被完全加載後觸發事件
//所以在其中可以獲取到HTML文檔的任何元素
範例：
<script type="text/javasript">
window.onclick= function
{
}
</script>
...
//注意：
一般不能再body節點之前來直接獲取
body內的節點，因為此時HTML文檔還沒有加載完成
//在整個HTML文檔後面寫js代碼可以實現，但不推薦
//獲取指定的元素的節點
<script type="text/javasript">
window.onclick=function{
//1、獲取id為為bj的那個節點
var bjNode=document.getElementById("bj");
alert(bjNode);
//獲取所有的li節點
var liNodes=document.getElementByTagName("li");
alert(liNodes.length);
//使用標籤名來獲取指定節點的集合
//該方法為Node接口的方法，即任何一個節點都有這個方法
var cityNode=document.getElementById("city");
var cityLiNode=cityNode.getElementByTagName("li");
alert(cityLiNode.length);
//3.根據HTML文檔元素的name屬性獲取指定節點的集合
var genderNodes=document.getElementByName("gender");
var bjNode2=document.getElementByName("beijing");
alert(genderNodes.length);
alert(bjNode2.length);
你喜歡那個城市
gender:
//必須確保id屬性值唯一
