由于HTML是標記語言 ， 因此可以在HTML中通過JavaScript進行DOM操作 ， 因為每一個HTML文件都可以形成一顆完整的DOM樹 。 下圖1為一個普通的HTML文檔 ， 該文檔的DOM樹結構如下圖2所示 。 接下來本文將為大家介紹JavaScript解析操作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 如下為兩個輸入輸出框 ， 用來輸入用戶信息 ， 點擊新增按鈕便可以添加到下面的表格中 。
猜你喜歡
- JS如何定義一個‘類’？
- CAD中如何繪制蝶形螺母
- 如何用HTML5實現界面的徑向漸變效果
- Abaqus 如何使用模型樹？
- 國稅如何在網上申報財務報表
- CAD中如何自定義“文字樣式”
- Abaqus如何在邊上布置種子劃分網格？
- vivo Y81S vivo Y81怎么解鎖.忘記密碼如何下載官方刷機包.線刷官方包刷機解鎖方法教程
- 荒野行動之中對于倍鏡的使用以及掌握的技巧
- 如何鍛煉自己的眼部肌肉進行放松