简述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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
react 应用多入口配置及实践总结
Oct 17 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 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
加速XP搜索功能堪比vista
2007/03/22 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
JS控制表格隔行变色
2006/06/26 Javascript
[JS]点出统计器
2020/10/11 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
python遍历类中所有成员的方法
2015/03/18 Python
Python base64编码解码实例
2015/06/21 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
经销商会议欢迎词
2014/01/11 职场文书
119消防日活动总结
2014/08/29 职场文书
中秋客户感谢信
2015/01/22 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python