當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

应用DOM操作文档的一个实用例子

發布時間：2025/3/17 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了应用DOM操作文档的一个实用例子小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

DOM（Document Object Model）是表示文檔（如HTML文檔）和訪問、操作說清楚文檔的各種元素（如HTML標記和文本串）的應用程序接口（API）。在DOM中，HTML文檔中的各個節點被視為各種類型的Node對象，并且將HTML文檔表示為Node對象的樹。

下面通過一個添加評論和刪除評論功能的例子來體驗一個DOM操作文檔的用法

實現效果圖如下：

步驟：

（1）最頂端的小狗與文字沒什么好說，就是弄一個表格。下面說說評論和評論內容這塊，在頁面中添加一個表格（1X2）用于顯示評論的列表。代碼如下：

（2）在評論列表下方就是用于收集評論信息，可以通過一個表單去實現評論的輸入信息。還有就是下面幾個button.詳細代碼如下：

順便也把定義的css樣式也放出來（按需修改）：

/* CSS Document */  <meta http-equiv="Content-Type" content="text/html; charset=GBK">

（3）下面就需要編寫自定義的JavaScript函數addElement(),用于在評論列表中添加一條評論信息。在該函數中，首先將評論信息添加到評論列表的后面，然后清空評論人和評論內容文本框。具體代碼如下：

function addElement() {//創建TextNode節點var person = document.createTextNode(form1.person.value);var content = document.createTextNode(form1.content.value);//創建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函數delectFirstE(),用于將評論列表第一條信息刪除：

//刪除第一條評論 function deleteFirstE(){var tComment = document.getElementById("comment"); //獲取table對象if(tComment.rows.length>1){tComment.deleteRow(1); //刪除表格的第二行，即第一條評論，} }

（5）同樣，編寫一個自定義的delectLastE()，用于將評論最后一條信息刪除：

//刪除最后一條評論 function deleteLastE(){var tComment = document.getElementById("comment"); //獲取table對象if(tComment.rows.length>1){tComment.deleteRow(tComment.rows.length-1); //刪除表格的最后一行，即最后一條評論} }

(6)為了觸發前面javascript中所定義的那幾個事件，那個就需要加入onclick事件來實現用戶單擊“發表”、“刪除第一條評論”等按鈕時的響應了。所以需要在前面web頁面中所定義的按鈕中加入onClick：

那么DOM文檔操作的應用大概先這樣記錄一下了，繼續努力。

轉載于:https://blog.51cto.com/lixiyu/1350937

總結

以上是生活随笔為你收集整理的应用DOM操作文档的一个实用例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Docker的简单使用
下一篇： Android Activity动画属性