如何使用JavScript操作DOM樹
工具/材料
Sublime Text3
操作方法
-
01
在HTML中可以通過document.getElementById("id名稱")取得每一個設置的表單元素對象，如下圖所示。
-
02
本程序在表單中定義了一個普通的按鈕，當點擊此按鈕時會調用show()函數，在show()函數中取得info元素，并設置其中的顯示內容。
-
03
使用DOM解析器還可以動態地生成一些表單中的內容，如下拉列表框，通過下圖來為大家演示。本程序使用DOM解析進行操作，在setFun()方法中，通過document.getElementById("city")取得city下拉列表框中的對象，然后通過length設置下拉列表框每次只能選擇一個，并將第一個選項設置為默認選中。
-
04
由于在一個下拉列表中會存在多個option，所以通過setAttribute()方法設置每個option中包含的value屬性內容，并且每個option中都設置一個文本節點表示顯示內容，最后將每一個option元素都添加到下拉列表框中。
-
05
在HTML所提供的DOM操作中，也可以取得一個表格（table）元素，使用此元素提供的方法可以動態進行表格的操作。本程序運行后會顯示一個表格，使用“+”按鈕添加表格的行，使用“-”按鈕刪除表格的行。
-
06
我們在新增表格行的時候需要取到該表格，先插入新的行，再為行加入單元格，最后給單元格添加內容。我們在刪除表格行的時候，首先需要取得行的對象，然后再通過deleteRow()函數刪除。
-
07
以上程序通過JavaScript本身提供的方法完成，也可以使用DOM節點的操作方式完成，例如每次向表格新增一行（<tr>節點）時，需要先將<tr>元素設置在<tbody>元素，之后在<table>元素中保存<tbody>才可完成。
-
08
如下為兩個輸入輸出框，用來輸入用戶信息，點擊新增按鈕便可以添加到下面的表格中。
- End
特別提示
若在瀏覽器中展示的結果不是預期的效果可以在開發者工具中查看代碼是否有誤。
- 發表于 2017-10-27 00:00
- 閱讀 ( 653 )
- 分類：電腦網絡
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章