您的位置:首页 > 其它

document.all笔记

2016-01-22 13:43 246 查看
<!DOCTYPE html>

 <html>

 <meta charset="utf-8">

 <title>document.all</title>

 <script type="text/javascript">

 window.onload=function(){

alert(document.getElementById("wrap").length)   //undefined

  alert(document.getElementsByTagName("input").length);   //3

 }

 </script>

 <head>

 </head>

 <body>

    <input type="checkbox" name="inp" value="aaa"/> 

    <input type="checkbox" name="inp" value="bbb"/> 

    <input type="checkbox" name="inp" value="ccc"/> 

    <div id="wrap"></div>

</html>

getElementById方法获取的是一个具体对象,没有length属性,所以输出undefined;

getElementsByTagName返回的是一个元素集合,是一个类数组,拥有length属性;

document.all的用法

用法一

document.all可以判断浏览器是否是IE (IE10及以下版本可以判断,但是 IE11不适用)
if(document.all){ 
alert("is IE!"); 


用法二

<input name=aaa value=aaa> 

<input id=bbb value=bbb> 

<script language=Jscript> 

alert(document.all.aaa.value) //根据name取value 

alert(document.all.bbb.value) //根据id取 value 

</script> 

但是常常name可以相同(如:用checkbox取用户的多项爱好的情况) 

<input name=aaa value=a1> 

<input name=aaa value=a2> 

<input id=bbb value=bbb> 

<script language=Jscript> 

alert(document.all.aaa(0).value) //显示a1 

alert(document.all.aaa(1).value) //显示a2 

alert(document.all.bbb(0).value) //这行代码会失败 

</script> 

理论上一个页面中的id是互不相同的,如果出现不同tags有相同的id 

document.all.id 就会失败,就象这样: 

<input id=aaa value=a1> 

<input id=aaa value=a2> 

<script language=Jscript> 

alert(document.all.aaa.value) //显示 undefined 而不是 a1或者a2 

</script> 

对于一个复杂的页面(代码很长,或者id是由程序自动产生),或着一个 

javascript初学者写的程序,很有可能出现两个tags有相同id的情况。 

为了编程的时候不出错,我推荐这样的写法: 

<input id=aaa value=aaa1> 

<input id=aaa value=aaa2> 

<input name=bbb value=bbb> 

<input name=bbb value=bbb2> 

<input id=ccc value=ccc> 

<input name=ddd value=ddd> 

<script language=Jscript> 

alert(document.all("aaa",0).value) 

alert(document.all("aaa",1).value) 

alert(document.all("bbb",0).value) 

alert(document.all("bbb",1).value) 

alert(document.all("ccc",0).value) 

alert(document.all("ddd",0).value) 

</script> 

var aInp=document.all["inp"];

如果页面中的<input type="checkbox" name="inp" value="aaa"/> 只有一个,那么只返回一个具体元素对象,此时不拥有length属性,如果有多个name=“inp”的input元素,那么返回的是一个元素集合,是一个类数组,拥有length属性;

<!DOCTYPE html>

 <html>

 <meta charset="utf-8">

 <title>document.all</title>

 <script type="text/javascript">

function checkAll(){ 
var aInp=document.all["inp"];
if(aInp.length){ //如果有多个input
for(i = 0;i < aInp.length;i++){ 
if(aInp[i].type == "checkbox") 

aInp[i].checked = true; 


}else{ 
aInp.checked = true; 




function centerall(){ 
var aInp=document.all["inp"];
if(aInp.length){ 
for(i = 0;i < aInp.length;i++){ 
aInp[i].checked = false; 
}
}else{

}

}

 </script>

 <head>

 </head>

 <body>

    <input type="checkbox" name="inp" value="aaa"/> 
<input type="checkbox" name="inp" value="bbb"/> 

    <input type="checkbox" name="inp" value="ccc"/> 

    <input type="button" value="checkAll" onClick="checkAll();"/>

    <input type="button" value="cancelAll" onClick="centerall();"/>

<div id="wrap"></div>

</html>

JavaScript中document 和document.all对象,可能对于JS新手来说,总是会用错,若知道错了固然很容易改正,问题一般出错的时候我们都不知道是自己用错的对象,而把排错的重点放在其它地方了。为了区别二者的用法,我们先来看一个示例,比较一下哪些时候该用document,哪些时候要用document.all。

<body>

       <div id="aa">635896</div>
       <input type="button" value="若用document会出错" onclick="alert(document.aa.innerText);" />
       <br />
       <input type="button" value="用document.all就不会报错" onclick="alert(document.all.aa.innerText);" />

</body>

不知道你是否看懂了?就是说如果与a,form对象,image对象,applet对象相对应的html标记中设定了name属性,那么它的值将被用作document对象的属性名,用来引用相应的对象,其他的对象则不可以。另外,input等如果作为form的子元素,则直接用inputName或者document.inputName来引用此对象就是错误的,必须使用formName.inputName引用。

如果想引用一个有id的元素,只能用Id或者document.getElementById,document.all.id来引用 

但是象这样的元素,所以象<a href="......" name="linkname" id="linkid">......</a>这样的,可以用下面的: 

linkid.href; 

linkname.href; 

document.all.linkid.href; 

document.all.linkname.href; 

document.getElementById("linkid").href; 

document.getElementsByName("linkname")[0].href来引用。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: