首先需要了解的一點是，dom是針對xml的基于樹的api，它的實作有很多（各語言基本都有自己的實作），我們讨論的是javascript中或者說xhtml(html)對dom的實作。
一、使用dom
考慮一個html檔案：
<html>
<head><title>測試</title></head>
<body>
<p>測試</p>
</body>
</html>
1.通路節點：
通路html元素：var ohtml=document.documentelement;
擷取head元素：var ohead=ohtml.firstchild;
擷取body元素：var obody=ohtml.lastchild; 或者 var obody=document.body;
也可以通過childnodes來做同樣的工作：
var ohead=ohtml.childnodes[0] 或者 ohtml.childnodes.item(0);
var obody=ohtml.childnodes[1] 或者 ohtml.childnodes.item(1);
判斷節點間關系：
alert(ohead.parentnode==ohtml);
alert(obody.previoussibling==ohead);
alert(ohead.nextsibling==obody);
alert(ohead.ownerdocument==document);
2.檢測節點類型：
通過節點的nodetype屬性來檢驗節點類型：
alert(document.nodetype); //輸出9
需要注意的是，dom相容的浏覽器（以ff2.0為例），擁有node.document_node、node.element_node等常量。各常量名稱與數值對照表如下：
element_node 1
attribute_node 2
text_node 3
cdata_section_node 4
entity_reference_node 5
entity_node 6
processing_instrction_node 7
comment_node 8
document_node 9
document_type_node 10
document_fragment_node 11
notation_node 12
ie6不支援，不過你可以自定義一個js對象node。
3.處理特性
處理特性可以使用标準的namenodemap中的方法：
getnameditem(name) removenameditem(name) setnameditem(node) item(pos)
比如:<p id="test">測試</p>
假設變量op是上面的p節點的引用，我們要通路op的id屬性:
var sid=op.attributes.getnameditem("id").nodevalue;
這些方法用起來很累贅,是以dom又定義了三個方法來簡化:
getattribute(name) ——傳回名稱為name的屬性的值
setattribute(name,value) ——顧名思義
removeattribute(name) ——顧名思義
上面的例子可以改寫為：
var sid=op.getattribute("name");
4.通路指定節點：
熟知的getelementbytagname(name),getelementbyname(name),getelementbyid(id)三個方法，不再展開。
5.建立和操作節點：
（1）建立新節點，一張ie(6.0)和ff對dom level1的建立新節點方法支援的對照表：
方法 ie ff
createattribute(name) y y
createcdatasection(text) n y
createcomment(text) y y
createdocumentfragment() y y
createelement(tagname) y y
createentityreference(name) n y
createprocessinginstruction(
target,data) n y
createtextnode(text) y y
下面介紹常用的幾個方法
（2）createelement(),createtextnode(),appendchild()
例子：
<head>
<title>createelement() example</title>
<script type="text/javascript">
function createmessage() {
var op = document.createelement("p");
var otext = document.createtextnode("hello world!");
op.appendchild(otext);
document.body.appendchild(op);
}
</script>
</head>
<body onload="createmessage()">
</body>
在頁面載入後，建立節點op，并建立一個文本節點otext,otext通過appendchild方法附加在op節點上，為了實際顯示出來，将op節點通過appendchild方法附加在body節點上。此例子将顯示hello world!
（3）removechild(),replacechild()和insertbefore()
從方法名稱就知道是幹什麼的：删除節點，替換節點，插入節點。需要注意的是replacechild和insertbefore兩個參數都是新節點在前，舊節點在後。
（4）createdocumentfragment()
此方法主要是為了解決大量添加節點時，速度過慢。通過建立一個文檔碎片節點，将要添加的新節點附加在此碎片節點上，然後再将文檔碎片節點append到body上面，替代多次append到body節點。
<title>insertbefore() example</title>
function addmessages() {
var arrtext = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];
var ofragment = document.createdocumentfragment();
for (var i=0; i < arrtext.length; i++) {
var op = document.createelement("p");
var otext = document.createtextnode(arrtext[i]);
op.appendchild(otext);
ofragment.appendchild(op);
}
document.body.appendchild(ofragment);
<body onload="addmessages()">
二、html dom的特征功能
html dom的特性和方法不是标準的dom實作，是專門針對html同時也讓一些dom操作變的更加簡便。
1.讓特性像屬性一樣
通路某元素的特性需要用到getattribute(name)方法，html dom擴充，可以直接使用同樣名稱的屬性來擷取和設定這些值：
比如 <img src="test.jpg"/>
假設oimg是此元素的引用
(oimg.getattribute("src")可以直接寫成:oimg.src，設定值簡化為：
oimg.src="test2.gif";
唯一特殊的class屬性，因為class是ecmascript的保留字，是以替代的屬性名是classname.
2.table的系列方法：
為了簡化建立表格，html dom提供了一系列的表格方法，常用幾個：
cells ——傳回</tr>元素中的所有單元格
rows ——表格中所有行的集合
insertrow(position) ——在rows集合中指定位置插入新行
deleterow(position) ——與insertrow相反
insertcell(position) ——在cells集合的指定位置插入一個新的單元格
deletecell(position) ——與insertcell相反
三。周遊dom
dom的周遊是dom level2中提出的标準，ie6沒有實作，mozilla和safari已經實作，最新ie7不清楚是否實作。不再展開，具體請見《javascript進階程式設計》
文章轉自莊周夢蝶 ，原文釋出5-16