DOM介紹：文檔對象模型

為了方便javascript語言通過dom操作html比較方便；

HTML中節點分類：

1.文檔節點(document)

2.元素節點

3.文本節點

4.屬性節點

5.註釋節點

節點的選擇

1.document.getElementById(id屬性值);

2.document.getElementsByTagName(tag標簽名稱);

3.document.getElementsByName(name屬性值);不推薦

註：1.收集的元素都是以字符串的形式返回的

獲得文本節點的方法（Nodes：節點）

var dd = document.getElementsByTagName(‘div’)[0];

firstChild、lastChild:父節點獲得第一個/最後一個子節點

nextSibling:獲得下個兄弟節點

previousSibling:獲得上個兄弟節點

childNodes:父節點獲得內部全部的子節點信息

獲取屬性值

1. 獲取屬性值

itnode.屬性名稱;

itnode.getAttribute(屬性名稱);

2.設置屬性值

itnode.屬性名稱 = 值;

itnode.setAttribute(名稱，值);

屬性節點的獲取

var attrlist = itnode.attributes;

attrlist.屬性名稱;

節點的創建

元素節點：document.createElement(tag標簽名稱);

文本節點：document.createTextNode(文本內容);

屬性設置：node.setAttribute(名稱，值);

節點的增加

　父節點.appendChild(子節點);

父節點.insertBefore(newnode,oldnode); //newnode放到oldnode的前邊

父節點.replaceChild(newnode,oldnode); //newnode替換到oldnode節點

獲取css樣式

元素節點.style.css樣式名稱;

divnode.style.width; //獲取寬度樣式

設置css樣式(有則修改、沒有則添加)

元素節點.style.css樣式名稱 = 值;

divnode.style.width =‘500px’;設置div寬度樣式

DOM用法及應用