2.2.3 文档对象模型DOM及表单
2.2.3 文档对象模型DOM及表单
周星星9527
发布于 2018-08-08 15:41:37
发布于 2018-08-08 15:41:37
文档对象模型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. }（完）
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2018-07-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读