工具/材料
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
特别提示
若在浏览器中展示的结果不是预期的效果可以在开发者工具中查看代码是否有误。
