简述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常用代码实现对比
Oct 03 Javascript
jQuery中filter(),not(),split()使用方法
Jul 06 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
全面解析Bootstrap排版使用方法(标题)
Nov 30 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 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网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
php格式化json函数示例代码
2016/05/12 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
node使用request请求的方法
2019/12/20 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
JS实现4位随机验证码
2020/10/19 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
python基础教程之Filter使用方法
2017/01/17 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
python操作openpyxl导出Excel 设置单元格格式及合并处理代码实例
2019/08/27 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
什么是python的列表推导式
2020/05/26 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Python Merge函数原理及用法解析
2020/09/16 Python
python 实现波浪滤镜特效
2020/12/02 Python
Nike香港官网:Nike HK
2019/03/23 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
学生通报表扬范文
2015/05/04 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android