如何使用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】

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

特别提示

若在浏览器中展示的结果不是预期的效果可以在开发者工具中查看代码是否有误。