简述JavaScript对传统文档对象模型的支持


Posted in Javascript onJune 16, 2015

 这是将其在JavaScript语言早期版本中引入的模型。大家都被所有浏览器都支持,但只允许访问文件的某些关键部分,如表单,表单元素和图像。

该模型提供了若干个只读属性,如标题,URL和上次更改提供关于文档整体的信息。除了有由该模型可用于设置和获取文档的属性值提供各种方法。
文档属性在传统DOM:

下面是文档属性,可以使用传统DOM访问列表:

简述JavaScript对传统文档对象模型的支持

简述JavaScript对传统文档对象模型的支持

 文档方法在传统DOM:

这里是由传统DOM支持的方法列表:

简述JavaScript对传统文档对象模型的支持

 例子:

我们可以找到任何HTML元素,使用HTML DOM任何HTML文档。例如,如果一个网页文件包含一个表单元素,然后使用JavaScript,我们可以把它称为document.forms[0]。如果Web文档包括两个形式元素的第一种形式被称为document.forms[0]和第二为document.forms[1]。

利用上面给出的层次结构和性质,可以使用document.forms[0].elements[0]等。

下面是一个例子访问使用传统DOM方法文档属性:

<html>
<head>
<title> Document Title </title>
<script type="text/javascript">
<!--
function myFunc()
{
  var ret = document.title;
  alert("Document Title : " + ret );

  var ret = document.URL;
  alert("Document URL : " + ret );

  var ret = document.forms[0];
  alert("Document First Form : " + ret );

  var ret = document.forms[0].elements[1];
  alert("Second element : " + ret );

}
//-->
</script>
</head>
<body>
<h1 id="title">This is main title</h1>
<p>Click the following to see the result:</p>

<form name="FirstForm">
<input type="button" value="Click Me" onclick="myFunc();" />
<input type="button" value="Cancel">
</form>

<form name="SecondForm">
<input type="button" value="Don't ClickMe"/>
</form>

</body>
</html>

注意: 这个例子的形式和内容等返回对象,我们将不得不使用未在本教程中讨论这些对象的属性来访问它们的值。

Javascript 相关文章推荐
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
纯javascript实现四方向文本无缝滚动效果
Jun 16 #Javascript
Bootstrap基础学习
Jun 16 #Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 #Javascript
常用DOM整理
Jun 16 #Javascript
AngularJS学习笔记之ng-options指令
Jun 16 #Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 #Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 #Javascript
You might like
PHP出错界面
2006/10/09 PHP
解析php中反射的应用
2013/06/18 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
python调用百度语音识别api
2018/08/30 Python
python设置环境变量的作用和实例
2019/07/09 Python
Python Web版语音合成实例详解
2019/07/16 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
化学系大学生自荐信范文
2014/03/01 职场文书
项目经理聘任书
2014/03/29 职场文书
政府信息公开实施方案
2014/05/09 职场文书
学校2014年度工作总结
2014/12/06 职场文书
离婚协议书范本
2015/01/26 职场文书
复兴之路展览观后感
2015/06/02 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书