js中document.getElementByid、document.all和document.layers区分介绍


Posted in Javascript onDecember 08, 2011

document.all是IE 4.0及以上版本的专有属性,是一个表示当前文档的所有对象的娄组,不仅包括页面上可见的实体对象,还包括一些不可见的对象,比如html注释等等。在document.all数组里面,元素不分层次,是按照其在文档中出现的先后顺序,平行地罗列的。所以可以用数字索引来引用到任何一个元素。但比较常用的是用对象id来引用一个特定的对象,比如document.all["element"]这样。
document.layers是Netscape 4.x专有的属性,是一个代表所有由储如<div><layer>等定位了的元素的数组。通常也是用<div>或<layer>对象的id属性来引用的,但是这里面不包含除此以外的其它元素。
其实这两个属性没什么可比性,大概你经常看到他们同时出时,这有一个历史原因。在第四代浏览器出现的时候,标准相当混乱,Netscape和微软分别推出了它们的Navigator 4.x和IE 4.0,这两个浏览器的巨大差异,也使开发者面临了一个使网页跨浏览器兼容的噩梦。而document.layer和document.all分别是两者一个最显著的标志,为了确定浏览者使用的什么浏览器,通常用是否存在document.layers和document.all来判断。
新的统一的标准用document.getElementById等系列方法来引用DOM对象,而且Netscape 6.0以后放弃了layers特征,虽然IE继续保留了document.all,但这最终没有成为DOM标准的一部分。希望document.layers和document.all能够早日作古,让标准早日深入人心!
代码示例:

<script language="JavaScript"> 
function showtime() 
{ 
var GetTime=newDate(); //获取当前日期 
var Years=GetTime.getYear(); // 取当前日期的年 
var Months=GetTime.getMongh();// 取当前日期的月 
var Days=GetTime.getDate();// 取当前日期的日 
var Hours=GetTime.getHours();// 取当前日期的小时 
var Minutes=GetTime.getMinutes();// 取当前日期的分钟 
var Seconds=GetTime.getSeconds();// 取当前日期的秒 
var Dn='AM'; 
if(Hours<=9) //小时少于9时,前面加0, 
{ 
Hours='0'+Hours; 
} 
if(Hours==0||Hours>12) 
{ 
Dn='PM'; //小时大于12或0时,设为PM(下午) 
} 
if(Minutes<=9) 
{ 
Minutes='0'+Minutes; 
} 
if(Seconds<=9) 
{ 
Seconds='0'+Seconds;//秒少于9时,前面加0, 
} 
NowTime=Years+'年'+Months+'月'+Days+'日 '+Hours+':'+Minutes+':'+Seconds+''+Dn; //当前日期的字符串 
if(document.layers){ //不同浏览器下, 将当前日期的字符串显示出来. 
document.layers.liveclock.document.write(NowTime) 
document.layers.liveclock.document.close() 
} 
else if(document.all) 
liveclock.innerHTML=NowTime 
setTimeout('showtime()',1000) //每秒运行showtime函数一次, 
}

document.all是IE下面的document属下的所有元素的集合
可以通过document.all.length来看到document下面的元素数量
document.all(index)后面的index参数是一个集合方法
如果index是string那么可以获得document下面具有id或name为index的元素 如果只有一个的元素话返回这个元素 如果有多个元素id或name是index的话就返回一个集合 如果没有的话就返回null
这样并不好 因为当你不知道有多少个id或name是index的元素时 就比较容易出错.
如果index是数字的话 那么会返回以0为基础的 文档中第index个元素. 元素的文档序列可以通过Element.sourceIndex来获取
document.getElementById(name) 只返回第一个具有id或name为name的元素 所以不是null就是一个元素 而不会返回集合 这样就大大减少了错误发生的可能性
如果需要返回一个id或name为name的元素集合的话 就要用 document.getElementsByName(name)来获取
document.getElementById
返回 ID 属性值与指定值相同的第一个对象,如果 ID 属于一个集合,getElementById 方法返回集合中的第一个对象。
document.all
如果 ID 属于一个集合,document.all返回一个集合。而且只支持IE。
所以在使用IE的前提下,document.all(index)要生效需要保证index是唯一的
所以如果你想让你写的js脚本在目前的大多浏览器中使用,需要使用[公共标准] 标准的Javascript
Javascript 相关文章推荐
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
JavaScript变量声明详解
Nov 27 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 #Javascript
5个javascript的数字格式化函数分享
Dec 07 #Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 #Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 #Javascript
浅析Prototype的模板类 Template
Dec 07 #Javascript
js 幻灯片的实现
Dec 06 #Javascript
字符串的replace方法应用浅析
Dec 06 #Javascript
You might like
php 无法载入mysql扩展
2010/03/12 PHP
解析php类的注册与自动加载
2013/07/05 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
javascript-hashchange事件和历史状态管理实例分析
2020/04/18 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
解决方案设计综合面试题
2015/08/31 面试题
法学专业本科生自荐信范文
2013/12/17 职场文书
绿色环保口号
2014/06/12 职场文书
贫困证明怎么写
2015/06/16 职场文书