javascript 操作 HTML DOM
阿新 • • 發佈：2019-01-23
出處:http://blog.csdn.net/qij2256/archive/2007/04/20/1572890.aspx
主要概述一些有用的基礎的DOM的方法以及怎樣用使用javascript使用它們。 可以實現比如動態地新建控制移動HTML元素。
Document 物件的常用方法 1、getElementById(id) 通過元素的ID訪問元素，這是DOM一個基礎的訪問頁面元素的方法，我們要經常用到它. 例如下面的例子，我們可以同DIV的ID迅速的訪問到它，而不必通過DOM層層遍歷，
</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"/>
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。
<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); <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> <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> 接著，使用一個迴圈建立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 首先，我們建立一個table元素
接著，建立一個TBODY元素，它應該是TABLE元素的子元素，
但是現在現在它們之間沒有聯絡。 6、click()
執行元素的一次點選，可以用於通過指令碼來觸發onClick函式 4、replaceChild(newChild, oldChild)
把當前節點的一個子節點換成另一個節點
例如：
主要概述一些有用的基礎的DOM的方法以及怎樣用使用javascript使用它們。 可以實現比如動態地新建控制移動HTML元素。
Document 物件的常用方法 1、getElementById(id) 通過元素的ID訪問元素，這是DOM一個基礎的訪問頁面元素的方法，我們要經常用到它. 例如下面的例子，我們可以同DIV的ID迅速的訪問到它，而不必通過DOM層層遍歷，
<body>
<div id=’divid’><p>h</p>
Just for testing;
</div>
<div id=’divid’>
</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"/>
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。
<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); <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> <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> 接著，使用一個迴圈建立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 首先，我們建立一個table元素
接著，建立一個TBODY元素，它應該是TABLE元素的子元素，
但是現在現在它們之間沒有聯絡。 6、click()
執行元素的一次點選，可以用於通過指令碼來觸發onClick函式 4、replaceChild(newChild, oldChild)
把當前節點的一個子節點換成另一個節點
例如：