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

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

赞 (0)

相关推荐

  • document.getElementById介绍

    把你的大脑当做浏览器执行下面的代码两次,分别是IE6和IE9: 复制代码 代码如下: function testFunc(){ alert('test') } $(function(){ var g = document.getElementById , w = window.testFunc ; //g alert(typeof(g)); alert(String(g)); alert(g instanceof Object); alert(g instanceof Function); //

  • 各浏览器对document.getElementById等方法的实现差异解析

    所有Web前端同仁对 document.getElementById 都非常熟悉了.开发过程中经常需要用其获取页面id为xx的元素,自从元老级JS库Prototype流行后,都喜欢这么简写它 复制代码 代码如下: // 方式1 function $(id){ return document.getElementById(id); } 有没有人想过为什么要这么写,而不用下面的方式写呢? 复制代码 代码如下: // 方式2 var $ = document.getElementById; 这么写的$

  • document.getElementById的简写方式(获取id对象的简略写法)

    比如用_$(id)代替document.getElementById(id). 如果是纯粹的代替可以使用下面的代码 复制代码 代码如下: function $(id){document.getElementById(id)} 个人比较推荐用prototype中对document.getElementById的定义: 复制代码 代码如下: function $() { var elements = new Array(); for (var i = 0; i < arguments.length;

  • document.getElementById方法在Firefox与IE中的区别

    [要点]document.getElementById方法在Firefox与IE中的区别. 如下,有一name="txtVersion"的text控件: 复制代码 代码如下: <div> <input type="text" name="txtVersion" size="15" value="Version" maxlength="25"> </div&g

  • document.getElementById为空或不是对象的解决方法

    1. 'null'为空或不是对象: <script type="text/javascript"> 里面加个defer=true属性试试看, 即:<script type="text/javascript" defer=true> 2. document.getElementById为null 原因: var titab=document.getElementById("titletab");没有取到对象 解决办法: 1.

  • jquery中的 $("#jb51")与document.getElementById("jb51") 的区别

    在今天写一个canvas的小程序时,才发现这两者是不一样的. 直接用alert()来显示这两个方法倒底获得的是什么.代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jb51</title> <link href="css/index.css" rel="stylesheet&

  • document.getElementById获取控件对象为空的解决方法

    1.下面是一个简单的例子,页面加载时显示一段信息 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>      <

  • 基于js中的存储键值对以及注意事项介绍

    前端有时候需要存储键值对,需要主要的一点是键必须为字符串,重要的再次说明,键需要为字符串. 重点内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jque

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

    document.all是IE 4.0及以上版本的专有属性,是一个表示当前文档的所有对象的娄组,不仅包括页面上可见的实体对象,还包括一些不可见的对象,比如html注释等等.在document.all数组里面,元素不分层次,是按照其在文档中出现的先后顺序,平行地罗列的.所以可以用数字索引来引用到任何一个元素.但比较常用的是用对象id来引用一个特定的对象,比如document.all["element"]这样. document.layers是Netscape 4.x专有的属性,是一个代表

  • Node.js中的package.json与cnpm命令行工具介绍

    Node.js中的package.json与cnpm命令行工具介绍

    一.包 Nodejs 中除了它自己提供的核心模块外,我们可以自定义模块,也可以使用第三方的模块.Nodejs 中第三方模块由包组成,可以通过包来对一组具有相互依赖关系的模块进行统一管理. 完全符合 CommonJs 规范的包目录一般包含如下这些文件. package.json :包描述文件. bin :用于存放可执行二进制文件的目录. lib :用于存放 JavaScript 代码的目录. doc :用于存放文档的目录. 在 NodeJs 中通过 NPM 命令来下载第三方的模块(包). http

  • JS中的log对象获取以及debug的写法介绍

    实例如下: 复制代码 代码如下: var log = new Logger('***.js')if (log.isDebugEnabled()) {                    log.debug('xxxxx');                }

  • JavaScript中也使用$美元符号来代替document.getElementById

    复制代码 代码如下: function $(id){return document.getElementById(id); 上面的对于新版本的浏览器都是没有问题的,如果使用古老的浏览器,可以使用下面的函数 复制代码 代码如下: function $(objectId) { if(document.getElementById && document.getElementById(objectId)) { // W3C DOM return document.getElementById(o

  • js中鼠标滚轮事件详解(firefox多浏览器)

    js中鼠标滚轮事件详解(firefox多浏览器)

    附加事件 其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件. 复制代码 代码如下: /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc); } Firefox使用addEventListener添加滚轮事件 复制代码 代码如下: /*Firefox注册事件*/ if(document.addEventListener){ document.ad

  • js中的事件委托或是事件代理使用详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了

  • js中常用的Tab切换效果(推荐)

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; overflow: hidden; margin:100px auto

  • js中有关IE版本检测

    js中有关IE版本检测

    见得最多的就是检测navigator.userAgent(这个可以面向所有浏览器,略过). 另外一种就是IE的条件注释,这篇有个比较详细的说明 http://www.jb51.net/article/29336.htm 复制代码 代码如下: <!--[if !IE]><!--> <script type="text/javascript"> alert('非IE') </ script> <!--<![endif]-->

  • JS中动态创建元素的三种方法总结(推荐)

    JS中动态创建元素的三种方法总结(推荐)

    1.动态创建元素一 document.write() 例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span> body标签中就会插入

随机推荐