简述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 AJAX 框架的使用方法
Nov 03 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
详解TypeScript中的类型保护
Apr 29 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提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
Python获取网页上图片下载地址的方法
2015/03/11 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Python中整数的缓存机制讲解
2019/02/16 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
python中如何打包用户自定义模块
2020/09/23 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
建筑毕业生自我鉴定
2013/10/18 职场文书
法制宣传月活动总结
2014/04/29 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
消防安全月活动总结
2015/05/08 职场文书
高中运动会前导词
2015/07/20 职场文书
关于vue-router-link选择样式设置
2022/04/30 Vue.js
Python find()、rfind()方法及作用
2022/12/24 Python