简述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 相关文章推荐
Jquery性能优化详解
May 15 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
Node.js Buffer用法解读
May 18 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
vue中$nextTick的用法讲解
Jan 17 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 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
11个PHP 分页脚本推荐
2011/08/15 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
如何使Chrome控制台支持多行js模式——意外发现
2013/06/13 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
如何一键升级Python所有包
2020/11/05 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
终端业务员岗位职责
2013/11/27 职场文书
高中地理教学反思
2014/01/29 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL