简述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的一个浮动框(扩展性比较好 )
Aug 27 Javascript
JavaScript中的property和attribute介绍
Dec 26 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
vue实现在线翻译功能
Sep 27 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相关资料
2006/10/09 PHP
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
Python高级property属性用法实例分析
2019/11/19 Python
pandas分批读取大数据集教程
2020/06/06 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
为什么要有struct关键字
2012/05/08 面试题
公路施工安全责任书
2015/05/08 职场文书
离婚答辩状范文
2015/05/22 职场文书