由于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怎么解锁.忘记密码如何下载官方刷机包.线刷官方包刷机解锁方法教程
- 荒野行动之中对于倍镜的使用以及掌握的技巧
- 如何锻炼自己的眼部肌肉进行放松