getAttribute、setAttribute獲取跟設置對象的屬性:
[javascript]
function documentTest(){
var oHtml = document.documentElement; //取得<html/>元素
var oHead = oHtml.firstChild; //獲取<head/>
var oBody = oHtml.lastChild; //獲取<body/>
oBody.setAttribute("id","bodyId");
alert(oBody.getAttribute("id"));
}
創建HTML元素:
[javascript]
//創建
function createNode(){
var oP = document.createElement("p"); //創建p標簽
var sText = document.createTextNode("古道西風"); //創建包含文本"古道西風"的文本節點
oP.appendChild(sText); //添加sText到oP節點的末尾
document.body.appendChild(oP);
}
移除:
[javascript]
//移除
function deleteNode(){
var oP = document.body.getElementsByTagName("p")[0];
/*document.body.removeChild(oP); */
oP.parentNode.removeChild(oP);
}
替換:
[javascript]
//替換
function replaceP(){
var oNewOp = document.createElement("p");
var sNewText = document.createTextNode("妖孽");
oNewOp.appendChild(sNewText);
var oP = document.body.getElementsByTagName("p")[0];
oP.parentNode.replaceChild(oNewOp,oP);
}
讓新消息出現在舊消息之前:
[javascript]
function insertNode(){
var oP = document.createElement("p");
var sText = document.createTextNode("斷腸人");
oP.appendChild(sText);
var ooP = document.body.getElementsByTagName("p")[0];
/**
* 接收兩個參數、即要插入的節點、跟插入在哪一個節點之前
*/
document.body.insertBefore(oP,ooP);
}
createDocumentFragment()文檔碎片:在javaScript優化中有提到
[javascript]
/**
* 文檔碎片
* 一旦把節點添加到document.body(或者它的後代節點)中、頁面就會更新並反映出這個變化、
* 對於少量的更新、這是很好的、就像在前面的例子中那樣。然而、當要向document添加大量數據時、
* 如果逐個添加這些變動、這個過程可能會十分緩慢。為解決這個問題、可以創建一個文檔碎片、
* 把所有的新節點附加其上、然後把文檔碎片的內容一次性添加都document中。
* 其中javaScript優化一文中、第六點也有提到
*/
function createDocument(){
var array = ["東方不敗","獨孤求敗","獨孤敗天","令狐沖","任人淫","王語嫣","阿朱","阿紫","阿貓","阿狗","靖哥哥"];
var oF = document.createDocumentFragment();
for(var i=0;i<array.length;i++){
var oP = document.createElement("p");
var sText = document.createTextNode(array[i]);
oP.appendChild(sText);
oF.appendChild(oP);
}
document.body.appendChild(oF);
}
操作table的兩種方法
[javascript]
function createTable(){
var oTable = document.createElement("table");
oTable.setAttribute("border","1");
oTable.setAttribute("width","100%");
var oTBody = document.createElement("tbody");
oTable.appendChild(oTBody);
//屬性操作
oTBody.insertRow(0);
oTBody.rows[0].insertCell(0);
oTBody.rows[0].cells[0].appendChild(document.createTextNode("胡斐(土匪)"));
oTBody.rows[0].insertCell(1);
oTBody.rows[0].cells[1].appendChild(document.createTextNode("勝男(剩男)"));
oTBody.insertRow(1);
oTBody.rows[1].insertCell(0);
oTBody.rows[1].cells[0].appendChild(document.createTextNode("無忌"));
oTBody.rows[1].insertCell(1);
oTBody.rows[1].cells[1].appendChild(document.createTextNode("趙敏"));
//直接創建table主體
var oTr = document.createElement("tr");
oTBody.appendChild(oTr);
var oTd1 = document.createElement("td");
oTd1.appendChild(document.createTextNode("楊過"));
oTr.appendChild(oTd1);
var oTd2 = document.createElement("td");
oTd2.appendChild(document.createTextNode("小阿姨"));
oTr.appendChild(oTd2);
document.body.appendChild(oTable);
}
摘自 旦旦而學的專欄