DOM的理解與應用
DOM
為了方便javascript語言通過dom操作html比較方便。
把html標簽的內容劃分為各種節點：
文檔節點(document)-----body
元素節點-----標簽
文本節點-----內容
屬性節點
註釋節點
獲取元素節點（標簽）
通過id獲取：
document.getElementById(id屬性值);
通過標簽名來獲取：
document.getElementsByName（標簽名稱）; //可獲取多個標簽
通過name屬性獲取：
document.getElementsByName（name屬性值）;
通過class獲取：
document.getElementsByClassName(class屬性值);（不推薦）
註：收集的元素都是以字符串的形式返回的
獲取文本節點（Nodes：節點）
var dd = document.getElementsByTagName(‘div‘)[0];
獲取兄弟節點：
firstChild、lastChild:父節點獲得第一個/最後一個子節點
nextSibling:獲得下個兄弟節點
previousSibling:獲得上個兄弟節點
childNodes:父節點獲得內部全部的子節點信息
獲取父節點
節點.parentnode
操作內容
非表單標簽：標簽對象.innerHTML ="123";
表單標簽： 標簽對象.value = 123;
操作內容：
alert(dd.innerHTML);----獲取html的內容
dd.innerHTML= "div123";------修改內容
操作屬性
標簽對象.getAttribute(屬性名) 獲取屬性的值
標簽對象.setAttribute(屬性名，屬性值) 設置修改獲取屬性的值
創建刪除標簽：
節點創建和追加
節點創建
元素節點：document.createElement(tag標簽名稱);
文本節點：document.createTextNode(文本內容);
屬性設置：node.setAttribute(名稱，值);
.appendchild()
.replacechild(替換的內容，被替換的內容）
節點追加：
父節點.appendChild(子節點);
父節點.insertBefore(newnode,oldnode); //newnode放到oldnode的前邊
父節點.replaceChild(newnode,oldnode); //newnode替換到oldnode節點
節點復制操作：
.clonenode(true)深層復制（本身和內部子節點都復制）
.clonenode(false)淺層復制（復制本身包括屬性）
註意要追加到body裏面，否則不顯示
節點的刪除：
（父節點）.parentnode.removeChild(子節點);
操作樣式
標簽對象.style.樣式名（獲取樣式名的值）
標簽對象.style.樣式名（獲取樣式名的值）=樣式值
DOM的理解與應用