DOM用法及應用
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用法及應用