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. }

原文链接:https://mp.weixin.qq.com/s?__biz=MzU0MjkyMzYxMA==&mid=2247483704&idx=4&sn=327b6b6638c68d2aa800f9a6e4a46861&chksm=fb120f0dcc65861ba9335deb1a1e5f43694da2f1caa5c20b70be705fb0f4f53ccfb42c37a13f#rd

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android群英传

从数字滚动动画看自定义View的绘制思路

2162
来自专栏更流畅、简洁的软件开发方式

表单控件续(1)——应用接口来简化和分散代码

上次有点仓促,有几个地方没有明确。 后者是整个流程,前者是其中的一个步骤,是一个简单的思路说明,其中前三段代码都是表单控件里面的。 2、我要写的是一个表单控...

2029
来自专栏马涛涛的专栏

虚拟DOM

DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScr...

3082
来自专栏菩提树下的杨过

silverlight如何在运行时用代码动态控制(或创建)动画

silverlight做一些复杂动画时,不可能所有的动画都事先用Blend之类的设计工具"画"好(或者在设计期就在vs里编好),很多时候我们希望在运行时能动态控...

19910
来自专栏HT

基于HTML5和WebGL的碰撞测试

这是公司大神写的一个放官网上给用户学习的例子,我一开始真的不知道这是在干嘛,就只是将三个形状图元组合在一起,然后可以同时旋转、放大缩小这个三个图形,点击“Ani...

2349
来自专栏一“技”之长

Bootstrap响应式前端框架笔记三——代码与表格

    在技术博客文章类页面的开发中,常常需要在文本总插入说明代码,使用code便签可以创建这种效果,示例如下:

1073
来自专栏用户2442861的专栏

javascript dom学习笔记

http://blog.csdn.net/zhoulenihao/article/details/11099455

1161
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.3 文档对象模型DOM及表单

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

1820
来自专栏Nian糕的私人厨房

CSS 消除 inline-block 元素间的间隙

从上图的运行结果可以看到,添加 display: inline-block; 属性后,水平呈现的元素间产生了空隙,出现这一现象的本质是,HTML 中存在的空白符...

1034
来自专栏爆栈之路

【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax

用于分组, group 也可以嵌套 group,父容器的属性会叠加在子属性上, 比如:

77516

扫码关注云+社区

领取腾讯云代金券