2.2.3 文档对象模型DOM及表单

周星星9527

发布于 2018-08-08 07:41:37

2.1K00

代码可运行

文章被收录于专栏：javascript趣味编程javascript趣味编程

运行总次数：0

代码可运行

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

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

（该图片源于网络）

文档对象模型（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. }