2.2.3 文档对象模型DOM及表单

文档对象模型DOM用途是什么？先从一棵树说起。下面是一棵树，由，根部、枝干、叶构成，通过根部可以访问到任何一个叶节点。

通过树根可以找到任何一片树叶

    而对于一个html文档，可以比作一棵树，如下图。通过根部可以访问每一个标签，并修改其属性。这个根部就是document对象，通过各类方法（如getElementByID）去寻找各个标签。

DOM模型示意（源于网络，侵权删除）

（该图片源于网络）

文档对象模型（Document Object Model，简称DOM），实现了通过JavaScript针对网页元素（标签）实现添加、删除、修改等操作，DOM提供了大量函数来操作HTML文档，比如函数getElementByID。标签的id是HTML元素的唯一标识符（就像人的身份证号码一样，标签的id是html里的唯一标识），js中可以通过document的函数getElementByID来获取该元素，从而可以操作该标签元素。如例获取可用于绘图的canvas元素的绘图环境上下文：

1. functionGetCanvasContext(canvasID){

2. var theCanvas = document.getElementById(canvasID);//获取id为canvasID的标签元素

3. return theCanvas.getContext("2d");//调用该元素函数，并返回调用结果

4. }

再比如通过js修改网页标题：

1. document.title="thisTitle";

下面简要介绍表单：

    HTML标签中有一类特殊的标签：表单(form)，用于显式控件，以使网页能够交互，如下代码定义了表单，内部包含了两个数字输入框，和一个按钮：

1. <div style="width:500px; height:auto; float:left;display:inline">

2. <form id="formA" width="500" height="400">

3. 设置计算参数: <br />

4. 时间步长: <input type="number" id="timeStep" min="1" max="100" step=0.01 value="1"/><br/>

5. 计算时间: <input type="number" id="during" min="1" max="1000" step=0.01 value="120"/><br/>

6. 提交：<input type="button" value="求解" onclick="main()"/>

7. </form>

8. </div>

运行显式结果如下：

简单表单示意

如何在网页脚本中获取用户输入的参数呢？form中的button定义了onclick属性，表明点击后会调用main()函数，main函数获取用户输入，如下：

1. //根据id获取文本输入框的内容并转换为整形

2. functionGetInputNumber(id){

3. var numberInput = document.getElementById(id);//获取控件

4. var v=numberInput.value;//获取可见属性

5. return parseInt(v);//转换为整形

6. }

7. //程序入口

8. function main (){

9. var timeStep=GetInputNumber("timeStep")/1000;//获取时间步长

10. var during=GetInputNumber("during");//获取求解时间

11.    console.log(timeStep,during);

12. }