| 例子2 – sample3_2.htm：接下來使用firstChile、lastChild、nextSibling、previousSibling遍曆整個文檔樹。修改一下countTotalElement函數，其他跟sample3_1.htm一樣：function countTotalElement(node) { //參數node是一個Node對象 var total = 0; if(node.nodeType == 1) { //檢查node是否為Element對象 total++; //如果是，計數器加1 elementName = elementName + node.tagName + "/r/n"; //儲存標記名 } var childrens = node.childNodes; //擷取node的全部子節點 for(var m=node.firstChild; m!=null;m=m.nextSibling) { total += countTotalElement(m); //在每個子節點上進行遞迴操作 } return total;}B、搜尋文檔中特定的元素在使用DOM的過程中，有時候需要定位到文檔中的某個特定節點，或者具有特定類型的節點列表。這種情況下，可以調用Document對象的getElementsByTagName()和getElementById()方法來實現。document.getElementsByTagName()返迴文檔中具有指定標記名的全部Element節點數組（也是NodeList類型）。Element出現在數組中的順序就是他們在文檔中出現的順序。傳遞給getElementsByTagName()的參數忽略大小寫。比如，想定位到第一個<table>標記，可以這樣寫：document.getElementsByTagName(“table”)[0]。例外的，可以使用document.body定位到<body>標記，因為它是唯一的。getElementsByTagName()返回的數組取決於文檔。一旦文檔改變，返回結果也立即改變。相比，getElementById()則比較靈活，可以隨時定位到目標，只是要實現給目標元素一個唯一的id屬性值。這個我們在《AJAX開發簡略》的“串聯功能表”例子中已經使用過了。Element對象也支援getElementsByTagName()和getElementById()。不同的是，搜尋領域只針對調用者的子節點。C、修改文檔內容遍曆整棵文檔樹、搜尋特定的節點，我們最終目的之一是要修改文檔內容。接下來的三個例子將使用Node的幾個常用方法，來示範如何修改文檔內容。例子3 -- sample4_1.htm：這個例子包含三個文本節點和一個按鈕。點擊按鈕後，三個文本節點和按鈕的順序將被顛倒。程式使用了Node的appendChild()和removeChild()方法。<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>無標題文檔</title><script language="javascript"> function reverseNode(node) { // 顛倒節點node的順序 var kids = node.childNodes; //擷取子節點列表 var kidsNum = kids.length; //統計子節點總數 for(var i=kidsNum-1;i>=0;i--) { //逆向遍曆子節點列表 var c = node.removeChild(kids[i]); //刪除指定子節點，儲存在c中 node.appendChild(c); //將c放在新位置上 } }</script></head><body><p>第一行</p><p>第二行</p><p>第三行</p><p><input type="button" name="reverseGo" value="顛倒" onClick="reverseNode(document.body)"></p></body></html> 例子4-- sample4_2.htm：例子1通過直接操作body的子節點來修改文檔。在HTML文檔中，布局和定位常常通過表格<table>來實現。因此，例子4將示範動作表格內容，將表格的四個單元行順序顛倒。如果沒有使用<tbody>標籤，則<table>把全部的<tr>當做是屬於一個子節點<tbody>，所以我們採用數組緩衝的方式，把行資料顛倒一下。這個例子同時也示範了如何使用DOM建立表格單元行。<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>無標題文檔</title><script language="javascript">function reverseTable() { var node = document.getElementsByTagName("table")[0]; //第一個表格 var child = node.getElementsByTagName("tr"); //取得表格內的所有行 var newChild = new Array(); //定義緩衝數組，儲存行內容 for(var i=0;i<child.length;i++) { newChild[i] = child[i].firstChild.innerHTML; } node.removeChild(node.childNodes[0]); //刪除全部單元行 var header = node.createTHead(); //建立表格行頭 for(var i=0;i<newChild.length;i++) { var headerrow = header.insertRow(i); //插入一個單元行 var cell = headerrow.insertCell(0); //在單元行中插入一個儲存格 //在儲存格中建立TextNode節點 cell.appendChild(document.createTextNode(newChild[newChild.length-i-1])); }}</script></head><body><table width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td> </tr> <tr> <td height="25">第二行</td> </tr> <tr> <td height="25">第三行</td> </tr> <tr> <td height="25">第四行</td> </tr></table><br><input type="button" name="reverse" value="開始顛倒" onClick="reverseTable()"></body></html> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
