1、getElementById(id) 通過元素的ID訪問元素，這是DOM一個基礎的訪問頁面元素的方法，我們要經常用到它.
例如下面的例子，我們可以同DIV的ID迅速的訪問到它，而不必通過DOM層層遍歷，
復制代碼 代碼如下:
<body>
<div id='divid'><p>h</p>
Just for testing;
</div>
<div id='divid'>
Just for testing;
</div>
<script>
var div=document.getElementById(‘divid');
alert(div.nodeName);
</script>
</body>
注意使用這個函數時如果元素的ID不是唯一的，那麼會獲得第一個符合條件的元素。
在IE6中如果input、checkbox,radio. 等元素name匹配指定的ID，也會被訪問到
例如下面的例子中，獲得的元素是input：
復制代碼 代碼如下:
<body>
<input name='divid' type="text"/>
<div id='divid'>
Just for testing;
</div>
<script>
var div=document.getElementById('divid');
alert(div.nodeName);
</script>
</body>
2、getElementsByName(name) 返回名字是name的元素數組，在IE6中元素ID匹配這個名字的話，這個元素也將包括在內，而且getElementsByName()僅用於象input,radio,checkbox等元素對象。
象下面例子中georges數組的長度應該是0。
復制代碼 代碼如下:
<body>
<div name="george">f</div>
<div name="george">f</div>
<script type="text/javascript">
var georges=document.getElementsByName("george");
alert(georges.length);
</script>
</body>
3、getElementsByTagName(tagname) getElementByTagName可以用於DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表（數組）。你可以遍歷這個數組獲得每一個單獨的子元素。當處理很大的DOM結構，使用這種方法可以很容易的所有縮小范圍。
復制代碼 代碼如下:
<html>
<head>
<title></title>
<script>
function start() {
// 獲得所有tagName是body的元素（當然每個頁面只有一個）
myDocumentElements=document.getElementsByTagName("body");
myBody=myDocumentElements.item(0);
// 獲得body子元素種的所有P元素
myBodyElements=myBody.getElementsByTagName("p");
// 獲得第二個P元素
myP=myBodyElements.item(1);
//顯示這個元素的文本
alert(myP.firstChild.nodeValue);
}
</script>
</head>
<body onload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html>
DOM Element 常用方法 1、appendChild(node)
向當前節點對象的追加節點。經常用於給頁面動態的添加內容。
例如下面給div添加一個文本節點：
復制代碼 代碼如下:
<div id="test"></div>
<script type="text/javascript">
var newdiv=document.createElement("div")
var newtext=document.createTextNode("A new div")
newdiv.appendChild(newtext)
document.getElementById("test").appendChild(newdiv)
</script>
上面的例子中給DIV添加文本，也可以用newdiv.innerHTML=”A new div”實現，
不過innerHTML不屬於DOM
2、removeChild(childreference)
移除當前節點的子節點，返回被移除的節點。這個被移除的節點可以被插入document樹中別的地方
復制代碼 代碼如下:
<div id="father"><div id="child">A child</div></div>
<script type="text/javascript">
var childnode=document.getElementById("child")
var removednode=document.getElementById("father").removeChild(childnode)
</script>
3、cloneNode(deepBoolean)
復制並返回當前節點的復制節點，這個復制得到的節點是一個孤立的節點，不在document樹中。復制原來節點的屬性值，包括ID屬性，所以在把這個新節點加到document之前，一定要修改ID屬性，以便使它保持唯一。當然如果ID的唯一性不重要可以不做處理。
這個方法支持一個布爾參數，當deepBoolean設置true時，復制 當前節點的所有子節點，包括該節點內的文本。
復制代碼 代碼如下:
<p id=”mypara”>11111</p>
p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);
4、replaceChild(newChild, oldChild)
把當前節點的一個子節點換成另一個節點
例如：
復制代碼 代碼如下:
<div id="adiv"><span id="innerspan">span</span></div>
<script type="text/javascript">
var oldel=document.getElementById("innerspan");
var newel=document.createElement("p");
var text=document.createTextNode(“ppppp”);
newel.appendChild(text);
document.getElementById("adiv").replaceChild(newel, oldel);
</script>
5、insertBefore(newElement, targetElement)
給當前節點插入一個新節點，如果targetElement被設置為null，那新節點被當作最後一個子節點插入，否則那新節點應該被插入targetElement之前的最近位置。
復制代碼 代碼如下:
<body>
<span id="lovespan">熊掌我所欲也!</span>
</body>
<script type="text/javascript">
var lovespan=document.getElementById("lovespan")
var newspan=document.createElement("span")
var newspanref=document.body.insertBefore(newspan, lovespan)
newspanref.innerHTML="魚與";
</script>
6、click()
執行元素的一次點擊，可以用於通過腳本來觸發onClick函數
復制代碼 代碼如下:
<script>
function wow() {
alert("我好象沒有點鼠標啊");
}
</script>
<div id="test" onclick='wow()'>hhh</div>
<script type="text/javascript">
var div = document.getElementById("test");
div.click();
</script>
DOM Element的屬性:（下面是常用的。IE5.0以上,mozllia都支持的）
1、childeNodes 返回所有子節點對象,
例如
復制代碼 代碼如下:
<table id="mylist">
<tr><td>一個和尚有水喝。</td></tr>
<tr><td>兩個和尚挑水喝。</td></tr>
<tr><td>三個和尚沒水喝。</td></tr>
</table>
<script>
var msg=””
var mylist=document.getElementById("mylist")
for (i=0; i<mylist.childNodes.length; i++){
var tr=mylist.childNodes[i];
for(j=0;j<tr.childNodes[j].length; j++) {
var td=tr.childNodes[j];
msg+=td.innerText;
}
}
alert(msg);
</script>
2、innerHTML
這是一個事實上的標准，不屬於w3c DOM，但是幾乎所有支持DOM的浏覽器，都支持這個屬性。通過這個屬性我們很容易修改一個元素的HTML。
復制代碼 代碼如下:
<p><b>新人類，什麼？！</b></p>
<script type="text/javascript">
window.onload=function(){
document.getElementsByTagName("p")[0].innerHTML="<b>新新人類，什麼？！</b>"
}
</script>
3、style
返回一個元素的style對象的引用，通過它我們可以獲得並修改每個單獨的樣式。
例如下面的腳本可以修改一個元素的背景色
document.getElementById("test").style.backgroundColor="yellow"
4、firstChild 返回第一個子節點
5、lastChild 返回最後一個子節點
6、parentNode 返回父節點的對象。
7、nextSibling 返回下一個兄弟節點的對象
8、previousSibling 返回前一個兄弟節點的對象
9、nodeName 返回節點的HTML標記名稱，使用英文的大寫字母，如P, FONT
例如
復制代碼 代碼如下:
<div id='test'>ddd</div>
<script>
if (document.getElementById("test").nodeName=="DIV")
alert("This is a DIV");
</script>
第一個例子：
使用DOM1.0 的javascript動態地創建一個HTML table。
復制代碼 代碼如下:
<head>
<title>Sample code </title>
<script>
function start() {
//獲得body的引用
var mybody=document.getElementsByTagName("body").item(0);
//創建一個<table></table>元素
mytable = document.createElement("TABLE");
//創建一個<TBODY></TBODY>元素
mytablebody = document.createElement("TBODY");
// 創建行列
for(j=0;j<3;j++) {
//創建一個<TR></TR>元素
mycurrent_row=document.createElement("TR");
for(i=0;i<3;i++) {
//創建一個<TD></TD>元素
mycurrent_cell=document.createElement("TD");
//創建一個文本元素
currenttext=document.createTextNode("cell is row "+j+", column "+i);
//把新的文本元素添加到單元TD上
mycurrent_cell.appendChild(currenttext);
// appends the cell TD into the row TR
//把單元TD添加到行TR上
mycurrent_row.appendChild(mycurrent_cell);
}
//把行TR添加到TBODY上
mytablebody.appendChild(mycurrent_row);
}
// 把 TBODY 添加到 TABLE
mytable.appendChild(mytablebody);
// 把 TABLE 添加到 BODY
mybody.appendChild(mytable);
// 把mytable的border 屬性設置為2
mytable.setAttribute("border","2");
}
</script>
</head>
<body onload="start()">
</body>
</html>
首先，我們創建一個table元素
接著，創建一個TBODY元素，它應該是TABLE元素的子元素，
但是現在現在它們之間沒有聯系。
接著，使用一個循環創建TR元素，它們應該是TBODY元素的子元素。
對於每一個TR，我們使用一個循環創建TD元素，它們是TR的子元素。
對於每一個TD，我們創建一個文本節點元素
現在，我們創建好了這些TABLE, TBODY, TR, TD還有文本元素，但是它們之間的層級
關系並沒有建立起來。然後我們以上相反的順序把每一個對象添加到它的父節點上。
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
mytablebody.appendChild(mycurrent_row);
mytable.appendChild(mytablebody);
現在DOM層次如下:
BODY
TABLE
TBODY
TR-------------------TR------------------TR
TD-----TD-----TD TD-----TD-----TD TD-----TD-----TD