简述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快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
jQuery实现的form转json经典示例
Oct 10 jQuery
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
详解vue中移动端自适应方案
May 05 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 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 魔术方法使用说明
2009/10/20 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
javascript中的隐式调用
2018/02/10 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
python flask安装和命令详解
2019/04/02 Python
python爬虫之自制英汉字典
2019/06/24 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
东方红海科技面试题软件测试方面
2012/02/08 面试题
服务承诺书范文
2014/05/19 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
企业宣传工作方案
2014/06/02 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
Python数据处理的三个实用技巧分享
2022/04/01 Python