1 常用DOM方法：
document.getElementById（id） 由id屬性值得到某個元素節點對象
document.getElementsByTagName（tagname） 由節點/標籤名得到所有該節點對象的數組
object.getAttribute（attribute） 得到元素節點對象的屬性值
object.setAttibute(attribute,value) 設置元素節點對象的屬性值
node.parentNode 得到父節點
node.nextSibling 得到下一個兄弟節點
element.childNodes 得到一個數組，包含給定元素節點的全體子元素。包括元素節點，屬性節點，和文本節點
node.nodeType 元素節點返回1，屬性節點返回2，文本節點返回3
node.nodeValue 檢索節點的值。
node.firstChild 相當於node.childNodes[0] ，得到節點的第一個子節點
node.lastChild 相當於node.childNodes[node.childNodes.length-1],節點的最後一個子節點
document.write() 把字符串插入到文檔中
object.innerHTML 用來讀寫某給定元素裏的HTML內容。不屬於W3C DOM標準組成部分。
document.createElement(nodeName) 創建一個節點
document.createTextNode(text) 創建一個文本節點
parentNode.appendChild(child) 爲一個元素節點添加子節點
2 自定義工具函數：
1）insertBefore/insertAfter
DOM提供了名爲insertBefore方法，這個方法將一個新元素插入到一個現有元素的前面。
調用語法：parentElement.insertBefore(newElement,targetElement)
不必知道那個父元素到底是哪個，因爲targetElement的parentNode屬性值就是。所以可這樣調用：
targetElement.parentNode.insertBefore(newElement,targetElement)
既然有一個insertBefore方法，就應該有一個insertAfter方法。但DOM沒有提供這樣的方法。
insertAfter函數實現（取自<<JavaScript DOM編程藝術>>）
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
2）addLoadEvent(func)頁面加載完畢時執行多個初始化函數
當需要在頁面加載完畢時執行多個函數時，這個函數將簡化代碼。(摘自《JavaScript DOM編程藝術》)
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
3）得到某個節點的下一個元素節點（注意是元素節點）
function getNextElement(node) {
if(node.nodeType == 1) {
return node;
}
if(node.nextSibling) {
return getNextElement(node.nextSibling);
}
return null;
}
4） 爲某個元素添加CSS屬性（是添加，不是替換）
function addClass(element,value) {
if(!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
}
5）JS實現表格隔行變色
function stripeTables() {
if(!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for(var i = 0; i < tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName("tr");
for(var j = 0; j < rows.length; j++) {
if(odd == true) {
addClass(rows[j],"className");
odd = false;
} else {
odd = true;
}
}
}
}
6)通用移動一個元素的函數（可以實現動畫）
function moveElement(elementID,final_x,final_y,interval) {
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if(elem.movement) {
clearTimeout(elem.movement);
}
if(!elem.style.left) {
elem.style.left = "0px";
}
if(!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos == final_x && ypos == final_y) {
return true;
}
if(xpos < final_x) {
var dist = Math.ceil((final - xpos)/10);
xpos = xpos + dist;
}
if(xpos > final_x) {
var dist = Math.ceil((xpos - final)/10)
xpos = xpos - dist;
}
if(ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if(ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos;
elem.style.top = ypos;
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}