JS的document.all函数使用示例

  JS的document.all函数虽然被document.getElement......代替,但是在使用中还是较为常见,下面为大家详细介绍下具体的使用示例:

  一:
  document.all是页面内所有元素的一个集合。例如: 
  document.all(0)表示页面内第一个元素 
  二:
  document.all可以判断浏览器是否是IE

                   if(document.all){
                    alert("is IE!");
                  } 

  三:
  也可以通过给某个元素设置id属性(id=aaaa),然后用document.all.aaaa调用该元素

  四:案例

    代码1:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input name="aaa" value="111">
        <input id="bbb" value="222">
        <script>
            console.log(document.all.aaa.value) //根据name取value
            console.log(document.all.bbb.value) //根据id取 value
        </script>
    </body>
</html>

    代码2:

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input name="aaa" value="111">
        <input name="aaa" value="222">
        <input id="bbb" value="bbb">
        <script>
            console.log(document.all.aaa[0].value) //最终显示a1
            console.log(document.all.aaa[1].value) //最终显示a2
            console.log(document.all.bbb[0].value) //最终会报错
        </script>
    </body>
</html>

    代码3:

    理论上一个页面中的id是互不相同的,如果出现不同tags有相同的id,document.all.id 就会失败,就象这样:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input id="aaa" value="111">
        <input id="aaa" value="222">
        <script>
            console.log(document.all.aaa.value)
        </script>
    </body>
</html>

    代码4:

  对于一个复杂的页面(代码很长,或者id是由程序自动产生),或着一个javascript初学者写的程序,很有可能出现两个tags有相同id的情况。为了编程的时候不出错,我推荐这样的写法:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input id="aaa" value="aaa1">
        <input id="aaa" value="aaa2">
        <input name="bbb" value="bbb1">
        <input name="bbb" value="bbb2">
        <input id="ccc" value="ccc1">
        <input name="ddd" value="ddd1">
        <script>
            console.log(document.all("aaa",0).value);
            console.log(document.all("aaa",1).value);
            console.log(document.all("bbb",0).value);
            console.log(document.all("bbb",1).value);
            console.log(document.all("ccc",0).value);
            console.log(document.all("ddd",0).value);
        </script>
    </body>
</html>

?

时间: 2024-11-05 14:42:16

JS的document.all函数使用示例的相关文章

JS的document.anchors函数使用示例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS的document.anchors函数使用示例</title> </head> <body> <a name="first">First anchor</a><br /> <a name="seco

JS的document.links函数使用示例

? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS的document.links函数使用示例</title> </head> <body> <img src="planets.gif" width="145" height="126" usemap=

JS的document.images函数使用示例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS的document.images函数使用示例</title> </head> <body> 一:通过集合引用 document.images //对应页面上的img标签 document.images.length //对应页面上img标签的个数 document.im

JS的document.all函数使用 示例

一. document.all是页面内所有元素的一个集合.例如: document.all(0)表示页面内第一个元素 二. document.all可以判断浏览器是否是IE if(document.all){ alert("is IE!"); } 三. 也可以通过给某个元素设置id属性(id=aaaa),然后用document.all.aaaa调用该元素 四. 案例: 代码1: 复制代码代码如下: <input name=aaa value=aaa> <input i

js原生:封装document.getElementByClassName()函数

//接口封装:封装document.getElementByClassName()函数function getElementsByClassName (cName,domTag,root) {//该函数有三个参数:第一个参数是class名(必选,字串形式):第二个参数是父容器(可选),默认为body节点:第三个参数是该DOM节点的标签名(字串形式)    if (root) {        root = typeof root == "string" ? document.getEl

js与xml交互理论和示例

---------------------------------------------------js+xml--------------------------------------------------------------------------- DOM2级在 document.implementation 中引入了 createDocument() 方法. IE9+. Firefox. Opera. Chrome 和 Safari 都支持这个方法. 想一想, 或许你还记得可以

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

【COCOS CREATOR 系列教程之二】脚本开发篇&事件监听、常用函数等示例整合

[Cocos Creator ](千人群):  432818031 上一篇,介绍了Himi在使用过cc所有组件后的一篇总结,没有具体介绍每个组件的原因在于官方文档很齐全,而且也有视频的介绍. 所以希望童鞋们可以把我这两篇博文当成对组件.脚本两部分开发的整理与总结. 后续的文章,Himi应该主要更新一些官方还未补充或者还没有的教程.避免无用功. 下面直接放出代码,因为不是很难理解.所以不再一一赘述,都是常用的函数.事件监听.动作回调.定时器等开发过程中必接触的. 大致内容如下: cc 属性介绍 获

js 格式化时间日期函数小结

下面是脚本之家为大家整理的一些格式化时间日期的函数代码,需要的朋友可以参考下. 代码如下: Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(