如何使用JavScript操作DOM树 / 木子杰软件教程

由于HTML是标记语言，因此可以在HTML中通过JavaScript进行DOM操作，因为每一个HTML文件都可以形成一颗完整的DOM树。下图1为一个普通的HTML文档，该文档的DOM树结构如下图2所示。接下来本文将为大家介绍JavaScript解析操作DOM的各种应用场景。

操作方法

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

如下为两个输入输出框，用来输入用户信息，点击新增按钮便可以添加到下面的表格中。

如何使用JavScript操作DOM树

操作方法

相关推荐