首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2.2.3 文档对象模型DOM及表单

2.2.3 文档对象模型DOM及表单

作者头像
周星星9527
发布2018-08-05 18:54:24
1.6K0
发布2018-08-05 18:54:24
举报

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

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

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

DOM模型示意(源于网络,侵权删除)
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. }

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档