2.2.3 文档对象模型DOM及表单


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

(完)

原文发布于微信公众号 - 传输过程数值模拟学习笔记(SongSimStudio)

原文发表时间:2018-07-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第四天 jQuery学习

jQuery是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。

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

2.2.3 文档对象模型DOM及表单

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

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

使用接口来统一控件的取值、赋值和初始化

      这里说的控件主要指的是文本框、下拉列表框这一类的控件,用户使用这些控件输入数据,然后我们需要提取这些数据进行处理。但是不同的控件有不同的取值方式,比...

2016
来自专栏马涛涛的专栏

虚拟DOM

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

3472
来自专栏一“技”之长

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

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

1133
来自专栏游戏杂谈

HTML5的data-* 要注意的问题

首先第一个问题,比较简单,直接使用dom.dataset,如果“===”undefined则不支持

1412
来自专栏阮一峰的网络日志

HTML 自定义元素教程

组件是 Web 开发的方向,现在的热点是 JavaScript 组件,但是 HTML 组件未来可能更有希望。 本文就介绍 HTML 组件的基础知识:自定义元素(...

3168
来自专栏JetpropelledSnake

Vue学习笔记之Vue指令系统介绍

所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了。

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

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

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

20310
来自专栏Modeng的专栏

Vue2.5笔记:Vue中的模版

我们在上一篇说到如何把 Vue 实例中的数据显示到视图中,就会需要用到我们的模版,我们只是简单的使用了一些,模版其实还有很多其他的特性。今天我们就来看看模版的其...

1221

扫码关注云+社区

领取腾讯云代金券