简述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 插件之仿“卓越亚马逊”首页弹出菜单效果
Dec 25 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
vue 实现锚点功能操作
Aug 10 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生成Flash动画的实现代码
2010/03/12 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
银行会计业务的个人自我评价
2013/11/02 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
建议书标准格式
2014/03/12 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers