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>

?

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

  1. JS的document.links函数使用示例

    ? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g ...

  2. JS的document.images函数使用示例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. JS的document.anchors函数使用示例

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

    //接口封装:封装document.getElementByClassName()函数function getElementsByClassName (cName,domTag,root) {//该函 ...

  5. ASP.NET前台JS与后台CS函数如何互相调用

    摘要: 在实际的Web开发中,我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况.今天就把比较实用的前后台相互调用的方法总结出来和大家分享. 在实际的Web开发中,我们可能会常常遇到 ...

  6. 【Mocha.js 101】钩子函数

    前情提要 在上一篇文章<[Mocha.js 101]同步.异步与 Promise>中,我们学会了如何对同步方法.异步回调方法以及 Promise 进行测试. 在本篇文章中,我们将了解到 M ...

  7. 多个$(document).ready()函数的执行顺序问题，（未解决）

    今天遇到了一个问题: jQuery获取不了动态添加的元素,我使用的是append添加的.寻求了帮助,得到解决方案: 在文件开头写上这样一段代码来获取,写在$(document).ready()里面. ...

  8. js两种定义函数、继承方式及区别

    一:js两种定义函数的方式及区别 1:函数声明: function sayA() { alert("i am A"); } 2:函数表达式: var sayB = function ...

  9. WebView中Js与Android本地函数的相互调用

    介绍 随着Html5的普及,html在表现力上不一定比原生应用差,并且有很强的扩展兼容性,所以越来越多的应用是采用Html与Android原生混合开发模式实现. 既然要实现混合开发,那么Js与Andr ...

随机推荐

  1. 【bzoj3747】[POI2015]Kinoman

    题解: 水题 从左向右维护以每一个作为右端点的最大值 线段树维护 代码: #include <bits/stdc++.h> using namespace std; #define rin ...

  2. 萨塔尼亚的期末考试（fail）

    题解: 这题比较妙啊... 首先暴力自己算是找不出规律的 有一种直觉就是可以把式子变成{f[1]+...f[n]}+{f[2]+...+f[n]}+{f[3]+...+f[n]}... 然后看了题解发 ...

  3. Visual Studio 中使用万能头文件 #include <bits/stdc++.h>

    最近开始使用VS,之前用的DEV C++软件可直接使用 #include <bits/stdc++.h>  ,但VS中并没有,为了使用方便,可直接在VS中添加此头文件,方法如下: 1.在安 ...

  4. EF 数据版本号，处理具体使用方法 RowVersion / Timestamp 使用方法。进行自动处理并发修改

    /* * <div class="form-group"> // 原始 * <div class="form-group hidden"> ...

  5. 【Android】android:windowSoftInputMode属性详解

    activity主窗口与软键盘的交互模式,可以用来避免输入法面板遮挡问题,Android1.5后的一个新特性. 这个属性能影响两件事情: [一]当有焦点产生时,软键盘是隐藏还是显示 [二]是否减少活动 ...

  6. Vue小问题汇总

    1.element-UI等组件更改默认样式: >>> https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html ...

  7. JMeter执行压测输出HTML图形化报表（二）

    命令行模式将jtl转成测试图表 注意此方法只使用jmeter3.0以后版本 第一种:在测试过程中将jtl转成测试报告(在jmeter的bin目录下执行) jmeter -n -t baidu_requ ...

  8. day5.python列表练习题

    写代码,有如下列表,按照要求实现每一个功能 li = [“alex”, “WuSir”, “ritian”, “barry”, “wenzhou”] 1.计算列表的长度并输出 print(len(li ...

  9. net core体系-web应用程序-4net core2.0大白话带你入门-3asp.net core项目架构和配置文件解读

    asp.net core web项目目录解读   Connected Services 和传统.net web项目相比,它的功能类似于添加webservice或者wcf service的引用.暂时用不 ...

  10. Codeforces 1139D Steps to One dp

    Steps to One 啊, 我要死了, 这种垃圾题居然没写出来, 最后十分钟才发现错在哪. 不知道为什么我以为 对于一个数x , 除了它的因子和它的倍数都是和它互质的, 我脑子是抽了吗? 随便瞎d ...