简述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 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
Jan 07 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
json的使用小结
Jun 08 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
纯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中获取时间的下一周下个月的方法
2014/03/18 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
python 快速排序代码
2009/11/23 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python Collatz序列实现过程解析
2019/10/12 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
Ibatis如何调用存储过程
2015/05/15 面试题
招商业务员岗位职责
2013/12/16 职场文书
高三体育教学反思
2014/01/29 职场文书
秘书英文求职信
2014/04/16 职场文书
防灾减灾活动总结
2014/08/30 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
优秀教师推荐材料
2014/12/16 职场文书
学校施工安全责任书
2015/01/29 职场文书
会计求职简历自我评价
2015/03/10 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
反邪教观后感
2015/06/11 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书