简述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 相关文章推荐
Javascript中的常见排序算法
Mar 27 Javascript
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
jquery获取radio值实例
Oct 16 Javascript
学习JavaScript正则表达式
Nov 13 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php实现网站插件机制的方法
2009/11/10 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
php自定文件保存session的方法
2014/12/10 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
php+mysql+ajax实现单表多字段多关键词查询的方法
2017/04/15 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
JS模拟多线程
2007/02/07 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python Flask实现restful api service
2017/12/04 Python
wxPython的安装与使用教程
2018/08/31 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Python如何执行系统命令
2020/09/23 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
python实现学生通讯录管理系统
2021/02/25 Python
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
汇源肾宝广告词
2014/03/20 职场文书
对祖国的寄语大全
2014/04/11 职场文书
社团活动总结范文
2014/04/26 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
公司股东出资证明书
2014/11/01 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书