- Java Web從入門到精通（第2版）
- 明日科技
- 2314字
- 2020-11-28 17:38:19
3.7 DOM技術
視頻講解：光盤\TM\lx\3\13 DOM技術．mp4
DOM是Document Object Model（文檔對象模型）的簡稱，是表示文檔（如HTML文檔）和訪問、操作構成文檔的各種元素（如HTML標記和文本串）的應用程序接口（API）。它提供了文檔中獨立元素的結構化、面向對象的表示方法，并允許通過對象的屬性和方法訪問這些對象。另外，文檔對象模型還提供了添加和刪除文檔對象的方法，這樣能夠創建動態的文檔內容。DOM也提供了處理事件的接口，它允許捕獲和響應用戶以及瀏覽器的動作。下面將對其進行詳細介紹。
3.7.1 DOM的分層結構
在DOM中，文檔的層次結構以樹形表示。樹是倒立的，樹根在上，枝葉在下，樹的節點表示文檔中的內容。DOM樹的根節點是個Document對象，該對象的documentElement屬性引用表示文檔根元素的Element對象。對于HTML文檔，表示文檔根元素的Element對象是<html>標記，<head>和<body>元素是樹的枝干。
【例3.40】一個簡單的HTML文檔說明DOM的分層結構。代碼如下：
<html>
<head>
<title>一個HTML文檔</title>
</head>
<body>
歡迎訪問明日科技網站！
<br>
<a > http://www.mingribook.com</a>
</body>
</html>
上面的HTML文檔的運行結果如圖3.22所示，對應的Document對象的層次結構如圖3.23所示。
圖3.22 HTML文檔的運行結果
圖3.23 Document對象的層次結構
說明
在樹形結構中，直接位于一個節點之下的節點稱為該節點的子節點（children）；直接位于一個節點之上的節點稱為該節點的父節點（parent）；位于同一層次，具有相同父節點的節點是兄弟節點（sibling）；一個節點的下一個層次的節點集合是該節點的后代（descendant）；一個節點的父節點、祖父節點及其他所有位于它之上的節點都是該節點的祖先（ancestor）。
3.7.2 遍歷文檔
在DOM中，HTML文檔中的各個節點被視為各種類型的Node對象，并且將HTML文檔表示為Node對象的樹。對于任何一個樹形結構來說，最常做的就是遍歷樹。在DOM中，可以通過Node對象的parentNode、firstChild、nextChild、lastChild、previousSibling等屬性來遍歷文檔樹。Node對象的常用屬性如表3.14所示。
表3.14 Node對象的常用屬性
由于HTML文檔的復雜性，DOM定義了nodeType來表示節點的類型。下面以列表的形式給出Node對象的節點類型、節點名、節點值及節點類型常量，如表3.15所示。
表3.15 Node對象的節點類型、節點名、節點值及節點類型常量
【例3.41】遍歷JSP文檔，獲取該文檔中的全部標記及標記總數。（實例位置：光盤\TM\sl\3\11）
（1）編寫index.jsp文件，在該文件中添加提示性文字及進入明日科技網站的超鏈接。具體代碼如下：
<%@ page language="java" pageEncoding="GBK"%>
<html>
<head>
<title>一個簡單的文檔</title>
</head>
<body>
歡迎訪問明日科技網站！
<br>
<a > http://www.mingribook.com</a>
</body>
</html>
（2）編寫JavaScript代碼，用于獲取文檔中全部的標記，并統計標記的個數。具體代碼如下：
<script language="javascript">
var elementList=""; //全局變量，保存Element標記名，使用之后要清空
function getElement(node){ //參數node是一個Node對象
var total = 0;
if(node.nodeType==1){ //檢查node是否為Element對象
total++; //如果是，計數器加1
elementList=elementList+node.nodeName+"、"; //保存標記名
}
var childrens=node.childNodes; //獲取node的全部子節點
for(var m=node.firstChild; m! =null; m=m.nextSibling) {
total+=getElement(m); //對每個子節點進行遞歸操作
}
return total;
}
function show(){
var number=getElement(document); //獲取標記總數
elementList=elementList.substring(0, elementList.length-1); //去除字符串中最后一個逗號
alert("該文檔中包含："+elementList+"等"+number+"個標記！");
elementList=""; //清空全局變量
}
</script>
（3）在頁面的onload事件中，調用show()方法獲取并顯示文檔中的標記及標記總數。具體代碼如下：
<body onload="show()">
運行程序，將顯示如圖3.24所示的頁面，并彈出提示對話框顯示文檔中的標記及標記總數。
圖3.24 實例運行結果
3.7.3 獲取文檔中的指定元素
雖然通過3.7.2節中介紹的遍歷文檔樹中全部節點的方法可以找到文檔中指定的元素，但是這種方法比較麻煩。下面介紹兩種直接搜索文檔中指定元素的方法。
1．通過元素的id屬性獲取元素
使用Document對象的getElementsById()方法可以通過元素的id屬性獲取元素。例如，獲取文檔中id屬性為userList的節點。代碼如下：
document.getElementById("userList");
2．通過元素的name屬性獲取元素
使用Document對象的getElementsByName()方法可以通過元素的name屬性獲取元素。與getElementsById()方法不同的是，該方法的返回值為一個數組，而不是一個元素。如果想通過name屬性獲取頁面中唯一的元素，可以通過獲取返回數組中下標值為0的元素進行獲取。例如，獲取name屬性為userName的節點。代碼如下：
document.getElementsByName("userName")[0];
3.7.4 操作文檔
在DOM中不僅可以通過節點的屬性查詢節點，還可以對節點進行創建、插入、刪除和替換等操作。這些操作都可以通過節點（Node）對象提供的方法來完成。Node對象的常用方法如表3.16所示。
表3.16 Node對象的常用方法
【例3.42】應用DOM操作文檔，實現添加評論和刪除評論的功能。（實例位置：光盤\TM\sl\3\12）
（1）在頁面的合適位置添加一個1行2列的表格，用于顯示評論列表，并將該表格的ID屬性設置為comment。具體代碼如下：
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF"
bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment">
<tr>
<td width="18%" height="27" align="center" bgcolor="#E5BB93">評論人</td>
<td width="82%" align="center" bgcolor="#E5BB93">評論內容</td>
</tr>
</table>
（2）在評論列表的下方添加一個用于收集評論信息的表單及表單元素。具體代碼如下：
<form name="form1" method="post" action="">
評論人：<input name="person" type="text" id="person" size="40">
評論內容：<textarea name="content" cols="60" rows="6" id="content"></textarea>
</form>
（3）編寫自定義JavaScript函數addElement()，用于在評論列表中添加一條評論信息。在該函數中，首先將評論信息添加到評論列表的后面，然后清空評論人和評論內容文本框。具體代碼如下：
function addElement() {
var person=document.createTextNode(form1.person.value); //創建代表評論人的TextNode節點
var content=document.createTextNode(form1.content.value); //創建代表評論內容的TextNode節點
//創建td類型的Element節點
var td_person = document.createElement("td");
var td_content = document.createElement("td");
var tr=document.createElement("tr"); //創建一個tr類型的Element節點
var tbody=document.createElement("tbody"); //創建一個tbody類型的Element節點
//將TextNode節點加入到td類型的節點中
td_person.appendChild(person); //添加評論人
td_content.appendChild(content); //添加評論內容
//將td類型的節點添加到tr節點中
tr.appendChild(td_person);
tr.appendChild(td_content);
tbody.appendChild(tr); //將tr節點加入tbody中
var tComment=document.getElementById("comment"); //獲取table對象
tComment.appendChild(tbody); //將節點tbody加入節點尾部
form1.person.value=""; //清空評論人文本框
form1.content.value=""; //清空評論內容文本框
}
（4）編寫自定義JavaScript函數deleteFirstE()，用于將評論列表中的第一條評論信息刪除。deleteFirstE()函數的具體代碼如下：
function deleteFirstE(){
var tComment=document.getElementById("comment"); //獲取table對象
if(tComment.rows.length>1){
tComment.deleteRow(1); //刪除表格的第二行，即第一條評論
}
}
（5）編寫自定義JavaScript函數deleteLastE()，用于將評論列表中的最后一條評論信息刪除。deleteLastE()函數的具體代碼如下：
function deleteLastE(){
var tComment=document.getElementById("comment"); //獲取table對象
if(tComment.rows.length>1){
tComment.deleteRow(tComment.rows.length-1); //刪除表格的最后一行，即最后一條評論
}
}
（6）分別添加“發表”按鈕、“刪除第一條評論”按鈕和“刪除最后一條評論”按鈕，并在各按鈕的onclick事件中，調用發表評論函數addElement()、刪除第一條評論函數deleteFirstE()和刪除最后一條評論函數deleteLastE()。另外，還需要添加“重置”按鈕。具體代碼如下：
<input name="Button" type="button" class="btn_grey" value="發表" onClick="addElement()">
<input name="Reset" type="reset" class="btn_grey" value="重置">
<input name="Button" type="button" class="btn_grey" value="刪除第一條評論" onclick="deleteFirstE()">
<input name="Button" type="button" class="btn_grey" value="刪除最后一條評論" onclick="deleteLastE()">
運行程序，在“評論人”文本框中輸入評論人，在“評論內容”文本框中輸入評論內容，單擊“發表”按鈕，即可將該評論顯示到評論列表中；單擊“刪除第一條評論”按鈕，將刪除第一條評論；單擊“刪除最后一條評論”按鈕，將刪除最后一條評論，如圖3.25所示。
圖3.25 添加和刪除評論
- Instant Node Package Manager
- PostgreSQL Cookbook
- Web Scraping with Python
- JavaFX Essentials
- The Data Visualization Workshop
- 小程序，巧運營：微信小程序運營招式大全
- Linux Device Drivers Development
- C語言程序設計同步訓練與上機指導（第三版）
- 從0到1：Python數據分析
- Getting Started with LLVM Core Libraries
- Java系統化項目開發教程
- HTML5 APP開發從入門到精通（微課精編版）
- 移動互聯網軟件開發實驗指導
- Regression Analysis with Python
- GitHub入門與實踐