1.訪問相關節點
var ohtml = document.documentElement;
\\\\\方法一
var ohead = ohtml.firstChild;
var obody = ohtml.lastChild;
\\\\\\方法二
var ohead = ohtml.childNodes[0]
var obody = ohtml.childNodes[1];
getElementsByTagname("xxx")
獲取標簽名稱為xxx的tag的元素集合
getElementsByName("xxx")
獲取元素名稱為xxx的集合
元素.getAttribute("") setAttribute("xx" , newvalue) removeAttribute("xx")
對於屬性的增刪改查
getElementById("ddd")
獲取id為ddd的元素
2.節點的增刪改查
增
var op = document.createElement("p")
var otext = document.createTextNode("Helloworld")
op.appendChild(otextf)
document.body.appendChild(op)
刪
var op = document.getElementById("aa")
document.body.removeChild(op)
不過 最好還是用父節點的方式保證每次都訪問的目標節點的父節點 避免混亂 如下:
op.parentNode.removeChild(op);
改
var onew = 新的節點
var old = document.body.getElementById("aa")
old.parentNode.replaceChild(onew , old)
插
var onew = 新的節點
var old = document.body.getElementById("aa")
old.parentNode.insertBefore(onew , old)
3.文檔碎片
當需要一次性建立多個內容然後插入到頁面中時候 由於每一次插入會造成一次頁面更新 ,所以需要
創建一個文檔碎片 將新的文檔插入進去 然後一次性加入到頁面當中
var frag = document.createDocumentFragment();
for(var i = 0;i < 10;i++) {
var op = document.createElement("p")
var otext = document.createTextNode("oh!shit!")
op.appendChild(otext);
frag.appendChild(op);
}
document.body.appendChild(frag);
作者:carmazhao