|
文檔對象模型（DOM） childnodes[n].nodeValue 來獲取節點值 childnodes[n].nodeType 來獲取節點類型 childnodes[n].nodeName 來獲取節點名字
7.4.1、DOM眼中的HTML文檔：樹 這個是不是跟XML的結構有點相似呢。不同的是，HTML文檔的樹形主要包含表示元素、標記的節點和表示文本串的節點。 7.4.2、HTML文檔的節點
DOM樹的根節點是個Document對象，該對象的documentElement屬性引用表示文檔根元素的Element對象（對於HTML文檔，這個就是<html>標記）。Javascript操作HTML文檔的時候，document即指向整個文檔，<body>、<table>等節點類型即為Element。Comment類型的節點則是指文檔的注釋。具體節點類型的含義，請參考《Javascript權威指南》，在此不贅述。 Document定義的方法大多數是生產型方法，主要用於創建可以插入文檔中的各種類型的節點。常用的Document方法有：
對於Element節點，可以通過調用getAttribute()、setAttribute()、removeAttribute()方法來查詢、設置或者刪除一個Element節點的性質，比如<table>標記的border屬性。下面列出Element常用的屬性：
Element常用的方法：
Attr對象代表文檔元素的屬性，有name、value等屬性，可以通過Node接口的attributes屬性或者調用Element接口的getAttributeNode()方法來獲取。不過，在大多數情況下，使用Element元素屬性的最簡單方法是getAttribute()和setAttribute()兩個方法，而不是Attr對象。 7.4.3、使用DOM操作HTML文檔 需要指出的是，childNodes[]的值實際上是一個NodeList對象。因此，可以通過遍歷childNodes[]數組的每個元素，來枚舉一個給定節點的所有子節點；通過遞歸，可以枚舉樹中的所有節點。下表列出了Node對象的一些常用屬性和方法： Node對象常用屬性：
Node對象常用方法：
接下來，讓我們使用上述的DOM應用編程接口，來試着操作HTML文檔。 A、遍歷文檔的節點 DOM把一個HTML文檔視為樹，因此，遍歷整個樹是應該是家常便飯。跟之前說過的一樣，這裡我們提供兩個遍歷樹的例子。通過它，我們能夠學會如何使用childNodes[]和firstChile、lastChild、nextSibling、previousSibling遍歷整棵樹。 例子1-- sample3_1.htm： <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<script language="javascript">
var elementName = ""; //全局變量，保存Element標記名，使用完畢要清空
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 i=0;i<childrens.length;i++) {
total += countTotalElement(childrens[i]); //在每個子節點上進行遞歸操作
}
return total;
}
</script>
</head>
<body>
<a href="javascript:void(0)"
onClick="alert('標記總數：' + countTotalElement(document) + '/r/n
例子2 – sample3_2.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、搜索文檔中特定的元素 document.getElementsByTagName()返迴文檔中具有指定標記名的全部Element節點數組（也是NodeList類型）。Element出現在數組中的順序就是他們在文檔中出現的順序。傳遞給getElementsByTagName()的參數忽略大小寫。比如，想定位到第一個<table>標記，可以這樣寫：document.getElementsByTagName(“table”)[0]。例外的，可以使用document.body定位到<body>標記，因為它是唯一的。 getElementsByTagName()返回的數組取決於文檔。一旦文檔改變，返回結果也立即改變。相比，getElementById()則比較靈活，可以隨時定位到目標，只是要實現給目標元素一個唯一的id屬性值。這個我們在《AJAX開發簡略》的“級聯菜單”例子中已經使用過了。 Element對象也支持getElementsByTagName()和getElementById()。不同的是，搜索領域只針對調用者的子節點。 C、修改文檔內容 例子3 -- sample4_1.htm： <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： <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>
例子5 -- sample4_3.htm： <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<script language="javascript">
function replaceContent() {
var table1 = document.getElementsByTagName("table")[0];
var table2 = document.getElementsByTagName("table")[1];
var kid1 = table1.firstChild.firstChild.firstChild; //定位到<td>節點
var kid2 = table2.firstChild.firstChild.firstChild; //定位到<td>節點
var repKid = kid2.firstChild; //定位到表格二<td>內含的TextNode節點
try {
//用表格二的單元格內容替換表格一的單元格內容，表格二變成沒有單元格內容
kid1.replaceChild(repKid,kid1.firstChild);
//下面注釋如果開放，將出現object error，因為表格二已經被改變
//kid2.replaceChild(kid1.firstChild,kid2.firstChild);
}catch(e){
alert(e);
}
}
</script>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>表格一</td>
</tr>
</tbody>
</table>
<br>
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>表格二</td>
</tr>
</tbody>
</table>
<br>
<input type="button" name="replaceNode" value="替換" onClick="replaceContent()">
</body>
</html>
注意，當執行kid1.replaceChild(repKid,kid1.firstChild);的時候，table2的子節點已經被轉移到table1了，table2已經沒有子節點，不能再調用table2的子節點。看看代碼的注釋，試着運行一下，應該就知道文檔是怎麼改變的了。 D、往文檔添加新內容 例子6 – sample5_1.htm： <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<script language="javascript">
function insertStr() {
var f = document.form1;
var value = f.str.value;
if(value!="") {
// 從最終的TextNode節點開始，慢慢形成<tbody>結構
var text = document.createTextNode(value); //新建一個TextNode節點
var td = document.createElement("td"); //新建一個td類型的Element節點
var tr = document.createElement("tr"); //新建一個tr類型的Element節點
var tbody = document.createElement("tbody"); //新建一個tbody類型的Element節點
td.appendChild(text); //將節點text加入td中
tr.appendChild(td); //將節點td加入tr中
tbody.appendChild(tr); //將節點tr加入tbody中
var parNode = document.getElementById("table1"); //定位到table上
parNode.insertBefore(tbody,parNode.firstChild); //將節點tbody插入到節點頂部
//parNode.appendChild(tbody); //將節點tbody加入節點尾部
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input name="str" type="text" id="str" value="">
<input name="insert" type="button" id="insert" value="留言" onClick="insertStr()">
</form>
<table width="400" border="1" cellspacing="0" cellpadding="0" id="table1">
<tbody>
<tr>
<td height="25">網友留言列表：</td>
</tr>
</tbody>
</table>
</body>
</html>
我們之前說過，<table>的子節點是<tbody>，<tbody>的子節點才是<tr>，<tr>是<td>的父節點，最後<td>內部的TextNode節點。所以，往<table>增加單元格行要逐級形成，就像往樹裡面添加一個枝椏一樣，要有葉子有徑。看看，這個留言簿是不是很簡單啊。這個例子同時也演示了往<table>表格標記裡面增加內容的另一種方法。
<html> |
