document.all 的详解

all 方法最初是由 IE 浏览器拥有的,并不属于 W3C 规范范畴,他返回调用 all 方法的 HTML 标记自身内的所有子孙元素的 HTML 标记集合 。

all 方法的详细说明请参见 MSDN:http://msdn.microsoft.com/en-us/library/ms537434(VS.85).aspx。

通常情况下使用 document.all 方法获得文档元素内所有 HTML 标记的集合,他最先使用在 IE 浏览器中。现在其他浏览器已经支持 document.all 这个方法了,但在支持细节上有差异。

一、document.all在 各浏览器中的支持

1. 所有浏览器使用 document.all 获取取元素的支持程度。

分析以下代码:

<script type="text/javascript">window.onload = function() {document.getElementById("info").innerHTML = "document.all : " + document.all;}
</script>
<span id="SPAN1"></span>
<div id="info"></div>

在各浏览器中运行结果如下表:

IE6 IE7 IE8(Q)document.all : [object]
Opera Safari IE8(S)document.all : [object HTMLColletion]
Firefox(Q)document.all : [object HTML document.all.class]
Firefox(S)document.all : undefined
Chromedocument.all : [object HTMLColletion]

【注】:此处需要注意 Chrome 中 document.all 方法可直接使用,但无法被检测其返回的数据类型,因而代码中返回 undefined 值。

2. 在 IE 中 document.all 的布尔值是 true ,其他浏览器都是 false。

分析以下代码:

<script type="text/javascript">window.onload = function() {document.getElementById("info").innerHTML = "!!document.all : " + !!document.all;}
</script>
<span id="SPAN1"></span>
<div id="info"></div>

在各浏览器中运行结果如下表:

IE6 IE7 IE8!!document.all : true
Firefox Chrome Safari Opera!!document.all : false

3. 所有浏览器都支持使用 document.all 取元素的方式。

分析以下代码:

<html id="HTML1">
<script type="text/javascript">window.onload = function() {var html = "<table border='1' style='font-size:12px;'>";function getElement(sec) {html += "<tr><td>" + sec + "</td>" + "<td>" + eval(sec).id + "</td>";}getElement("document.all(0)");getElement("document.all[0]");getElement("document.all.item(0)");getElement("document.all('SPAN1')");getElement("document.all.SPAN1");getElement("document.all['SPAN1']");getElement("document.all.namedItem('SPAN1')");html += "</table>";document.getElementById("info").innerHTML = html;}
</script>
<span id="SPAN1"></span>
<div id="info"></div>
</html>

在各浏览器中表现如下:

IE6(Q) IE7(Q) IE8(Q)
Chrome Safari Opera
Firefox(Q)
IE6(S) IE7(S) IE8(S)
Firefox(S)

解决方案

由于 document.all 方法存在支持程度问题,获取元素还是推荐用 W3C DOM 规范中提供的 document.getElementById、document.getElementsByTagName 等标准方法。

二、document.all实战操作

html和js集合

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="jquery-1.8.3.min.js" type="text/javascript"></script><!--<script src="hhtest.js" type="text/javascript"></script>--><style></style>
</head><body style=" overflow-y:scroll;overflow-x:auto;">document.all是IE的私有属性。容易出现兼容性问题。<br>在火狐和谷歌的浏览器是无效的,不符合WEB标准。<br>不建议使用,特别是document.all[Index]的使用,难于维护。<br>document.all是页面内所有元素的一个集合。例如:  <br>document.all(0)表示页面内第一个元素<br>document.all可以判断浏览器是否是IE  <br>if(document.all){alert("is   IE!");}
<br>document.all的使用方式有:<br><br>
<font  color="red"></font>
document.all.元素id;(id必须唯一);<br>
document.all.元素name;(name必须唯一);<br><br><font  color="red">document.all.元素id(index);(id可以有重复,并且index不能越界);<br>document.all.元素name(index);(name可以有重复,并且name不能越界);<br><br>document.all("元素id",index);(id可以有重复,并且index不能越界);<br>document.all("元素name",index);(name可以有重复,并且index不能越界);<br><br>
</font>document.all["元素id"];(id必须唯一);<br>
document.all["元素name"];(name必须唯一);<br><font  color="red">document.all["元素id"][index];(id可以有重复,并且index不能越界);<br>document.all["元素name"][index];(name可以有重复,并且index不能越界);<br>
</font>
<br><br>
<hr>测试</hr>
<input type="text" id="aaaid" name="aaaname" value="aaavalue" /><br>
<input type="text" id="bbbid" name="bbbname" value="bbbvalue" /><br><br><input type="button" onclick="haha1()" value="测试document.all.id"/><br>---------------------------------------------<br>
<input type="text" id="cccid1" name="cccname" value="cc1" /><br>
<input type="text" id="cccid2" name="cccname" value="cc2" /><br><input type="button"  onclick="haha2()"  value="测试document.all.name(index)" /><br>---------------------------------------------<br>
<input type="text" id="dddid1" name="dddname1" value="ddd--11" /><br>
<input type="text" id="dddid1" name="dddname2" value="ddd--12" /><br><input type="text" id="dddid2" name="dddname1" value="ddd--21" /><br>
<input type="text" id="dddid2" name="dddname2" value="ddd--22" /><br><input type="button"  onclick="haha3()"  value="测试document.all.id或name" /><br>---------------------------------------------<br>
<input type="button"  onclick="haha4()"  value="测试id重复时document.all(id,index)" /><br>
---------------------------------------------<br>
<input type="button"  onclick="haha5()"  value="测试name重复时document.all(name,index)" /><br>---------------------------------------------<br>
<input type="button"  onclick="haha6()"  value="测试66" /><br>---------------------------------------------<br>
<input type="button"  onclick="haha7()"  value="7(name,index)" /><br></body>
</html><script>/*document.all的使用方式有:<br><br>document.all.元素id;(id必须唯一);document.all.元素name;(name必须唯一);document.all.元素id(index);(id可以有重复,并且index不能越界);document.all.元素name(index);(name可以有重复,并且name不能越界);document.all("元素id",index);(id可以有重复,并且index不能越界);document.all("元素name",index);(name可以有重复,并且index不能越界);document.all["元素id"];(id必须唯一);document.all["元素name"];(name必须唯一);document.all["元素id"][index];(id可以有重复,并且index不能越界);document.all["元素name"][index];(name可以有重复,并且index不能越界);*/function haha1(){var a=document.getElementById("aaaid").value;//alert("aaaid---"+a);//"aaaid---aaavaluevar a2=document.all.aaaid.value='kkkkkkkkkkkkkkk222';//alert("all--aaaid---"+a2);//all--aaaid---kkkkkkkkkkkkkkk222}//测试不通过报错:document.all.cccname is not a functionfunction haha2(){var a3=document.all.cccname(0).value;//alert("all--cccname(0)---"+a3);//all--cccname(0)---cc1//alert("all--cccname(1)---"+document.all.cccname(1).value);//all--cccname(0)---cc2// alert("all--cccname(2)---"+document.all.cccname(2).value);//报错}function haha3(){var a4=document.all.dddid1.value;//alert(a4);//undifinedvar a42=document.all.dddname1.value;//alert(a42);//undifined/*使用document.all.xxx的方式访问,无论是id还是name必须保证元素唯一,否则结果就是undifined*/}function haha4(){var v1=document.all("dddid1",0).value;alert(v1);//ddd--11var v2=document.all("dddid1",1).value;alert(v2);//ddd--12var v3=document.all("dddid1",2).value;alert(v3);//报错,因为没有第3个}function haha5(){var v1=document.all("dddname1",0).value;alert(v1);//ddd--11var v2=document.all("dddname1",1).value;alert(v2);//ddd--21var v3=document.all("dddname1",2).value;alert(v3);//报错,因为没有第3个}function haha6(){//alert(document.all["bbbname"].value);//bbbvalue。document.all.xxxname也可以这样写document.all["xxxname"]。必须不重复//alert(document.all["cccname"].value);//undifined
//alert(document.all["cccname"][0].value);//cc1alert(document.all["aaaid"].value);//aaavaluealert(document.all["dddid1"].value);//undifinedalert(document.all["dddid1"][0].value);//ddd--11}function haha7(){alert(document.all.dddidxxxxxxxxxx(0).value);// alert("all--dddid2(0)---"+document.all.dddid2(0).value);//all--dddid2(0)---ddd--21// alert("all--dddid2(1)---"+document.all.dddid2(1).value);//all--dddid2(0)---ddd--22// alert("all--dddid2(2)---"+document.all.dddid2(2).value);//报错}</script>

下面是细节讲解:

测试一、测试document.all.id

<input type="text" id="aaaid" name="aaaname" value="aaavalue" /><br>
<input type="text" id="bbbid" name="bbbname" value="bbbvalue" /><br><br><input type="button" onclick="haha1()" value="测试document.all.id"/><br>
    function haha1(){var a=document.getElementById("aaaid").value;//alert("aaaid---"+a);//"aaaid---aaavaluevar a2=document.all.aaaid.value='kkkkkkkkkkkkkkk222';//alert("all--aaaid---"+a2);//all--aaaid---kkkkkkkkkkkkkkk222}

测试二、测试document.all.name(index)  

目前谷歌浏览器不兼容、ie11也不兼容

<input type="text" id="cccid1" name="cccname" value="cc1" /><br>
<input type="text" id="cccid2" name="cccname" value="cc2" /><br><input type="button"  onclick="haha2()"  value="测试document.all.name(index)" /><br>
    //谷歌测试不通过报错:document.all.cccname is not a functionfunction haha2(){var a3=document.all.cccname(0).value;//alert("all--cccname(0)---"+a3);//all--cccname(0)---cc1//alert("all--cccname(1)---"+document.all.cccname(1).value);//all--cccname(0)---cc2// alert("all--cccname(2)---"+document.all.cccname(2).value);//报错}

测试三、测试document.all.id或name 必须唯一

<input type="text" id="dddid1" name="dddname1" value="ddd--11" /><br>
<input type="text" id="dddid1" name="dddname2" value="ddd--12" /><br><input type="text" id="dddid2" name="dddname1" value="ddd--21" /><br>
<input type="text" id="dddid2" name="dddname2" value="ddd--22" /><br><input type="button"  onclick="haha3()"  value="测试document.all.id或name" /><br>
    function haha3(){var a4=document.all.dddid1.value;//alert(a4);//undifinedvar a42=document.all.dddname1.value;//alert(a42);//undifined/*使用document.all.xxx的方式访问,无论是id还是name必须保证元素唯一,否则结果就是undifined*/}

测试四、测试id重复时document.all(id,index)

目前浏览器不支持.all()的方式调用

<input type="text" id="dddid1" name="dddname1" value="ddd--11" /><br>
<input type="text" id="dddid1" name="dddname2" value="ddd--12" /><br><input type="text" id="dddid2" name="dddname1" value="ddd--21" /><br>
<input type="text" id="dddid2" name="dddname2" value="ddd--22" /><br><input type="button"  onclick="haha4()"  value="测试id重复时document.all(id,index)" /><br>
//非谷歌浏览器,老旧的浏览器效果function haha4(){var v1=document.all("dddid1",0).value;alert(v1);//ddd--11var v2=document.all("dddid1",1).value;alert(v2);//ddd--12var v3=document.all("dddid1",2).value;alert(v3);//报错,因为没有第3个}//谷歌浏览器,新浏览器IE11 效果function haha4(){var h4 = document.all('dddid1',0).value;// alert('h4=='+h4); undefinedvar h5 = document.all('dddid1',1).value;// alert('h5=='+h5);undefinedvar h6 = document.all('dddid1',2).value;alert('h6-->'+h6); //h6-->undefined}

测试五、测试name重复时document.all(name,index)

<input type="text" id="dddid1" name="dddname1" value="ddd--11" /><br>
<input type="text" id="dddid1" name="dddname2" value="ddd--12" /><br><input type="text" id="dddid2" name="dddname1" value="ddd--21" /><br>
<input type="text" id="dddid2" name="dddname2" value="ddd--22" /><br><input type="button"  onclick="haha5()"  value="测试name重复时document.all(name,index)" />
    //老旧浏览器、新浏览器报undefined    function haha5(){var v1=document.all("dddname1",0).value;alert(v1);//ddd--11var v2=document.all("dddname1",1).value;alert(v2);//ddd--21var v3=document.all("dddname1",2).value;alert(v3);//报错,因为没有第3个}

测试六、document.all["元素id"][index]

<input type="button"  onclick="haha6()"  value="测试66" /><br>
    function haha6(){//alert(document.all["bbbname"].value);//bbbvalue。document.all.xxxname也可以这样写document.all["xxxname"]。必须不重复//alert(document.all["cccname"].value);//undifined//alert(document.all["cccname"][0].value);//cc1alert(document.all["aaaid"].value);//aaavaluealert(document.all["dddid1"].value);//undifinedalert(document.all["dddid1"][0].value);//ddd--11}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/60389.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java8 IntStream.range

简介 IntStream.range是Java 8中的一个方法&#xff0c;它是java.util.stream.IntStream类中的静态方法。这个方法用于生成一个顺序排列的整数流&#xff0c;包含起始值但不包含结束值。可以使用以下代码调用IntStream.range方法&#xff1a; IntStream.range(int startInclu…

关于JavaScript中Set的操作和应用

目录 JavaScript中Set的操作和应用Set的基本操作创建Set添加元素删除元素判断元素是否存在获取Set的长度清空Set Set的遍历for...of循环forEach方法转换成数组后遍历使用Set的entries方法遍历 Set的应用数组去重判断两个数组是否有重复元素实现并集、交集和差集 总结 JavaScrip…

云和恩墨面试(部分)

一面 软件架构设计方案应该包含哪些内容&#xff0c;哪些维度 二面 架构师如何保证软件产品质量线程屏障(或者说线程栅栏)是什么&#xff0c;为什么要使用线程屏障事务传播⾏为为NESTED时&#xff0c;当内部事务发生异常时&#xff0c;外部事务会回滚吗&#xff1f;newBing:…

ThinkPHP 集成 jwt 技术 token 验证

ThinkPHP 集成 jwt 技术 token 验证 一、思路流程二、安装 firebase/php-jwt三、封装token类四、创建中间件&#xff0c;检验Token校验时效性五、配置路由中间件六、写几个测试方法&#xff0c;通过postman去验证 一、思路流程 客户端使用用户名和密码请求登录服务端收到请求&…

论文阅读 FCOS: Fully Convolutional One-Stage Object Detection

文章目录 FCOS: Fully Convolutional One-Stage Object DetectionAbstract1. Introduction2. Related Work3. Our Approach3.1. Fully Convolutional One-Stage Object Detector3.2. Multi-level Prediction with FPN for FCOS3.3. Center-ness for FCOS 4. Experiments4.1. Ab…

字符串匹配的Rabin–Karp算法

leetcode-28 实现strStr() 更熟悉的字符串匹配算法可能是KMP算法, 但在Golang中,使用的是Rabin–Karp算法 一般中文译作 拉宾-卡普算法,由迈克尔拉宾与理查德卡普于1987年提出 “ 要在一段文本中找出单个模式串的一个匹配&#xff0c;此算法具有线性时间的平均复杂度&#xff0…

Elasticsearch 高级搜索技巧和最佳实践

Elasticsearch 高级搜索技巧和最佳实践 Elasticsearch 是一个开源的分布式搜索和分析引擎&#xff0c;它支持实时地存储、搜索和分析大规模数据。它被广泛应用于各行各业&#xff0c;用于构建高性能的搜索引擎、日志分析系统、电子商务推荐系统等。 本文将介…

【LeetCode-中等题】230. 二叉搜索树中第K小的元素

文章目录 题目方法一&#xff1a;层序遍历 集合排序方法二&#xff1a;中序遍历&#xff08;栈 或者 递归 &#xff09;方法三&#xff08;方法二改进&#xff09;&#xff1a;中序遍历&#xff08;栈 &#xff09; 题目 该题最大的特点就是这个树是二叉树&#xff1a; 所以…

【java中的Set集合】HashSet、LinkedHashSet、TreeSet(最通俗易懂版!!)

目录 一、HashSet集合 1.HashSet集合的特点 2.HashSet常用方法 二、LinkedHashSet集合 LinkedHashSet集合的特点 三、TreeSet集合 1.TreeSet集合的特点 2.TreeSet的基本使用 四、HashSet、LinkedHashSet、TreeSet的使用场景 五、list和set集合的区别 一、HashSet集合 …

go中的函数

demo1:函数的几种定义方式 package mainimport ("errors""fmt" )/* 函数的用法 跟其他语言的区别&#xff1a;支持多个返回值*///函数定义方法1 func add(a, b int) int {return a b }//函数定义方法2 func add2(a, b int) (sun int) {sun a breturn s…

数据库面试题分享(一)

文章目录 请简述数据库三大范式 ? 简述什么是SQL Server ? MySQL 如何优化SQL查询语句?重点 简述优化MySQL数据库的方法?重点 MySQL数据库,一天五万条以上的增量,预计运维三年怎么优化? 解释为什么Oracle type4驱动被称作瘦驱动? 如何理解数据库表设计的时候字段…

网页接口导入postman进行接口请求

postman版本&#xff1a;v10.17.4 一、拷贝接口信息 网页打开开发者工具-networkk&#xff0c;在网页上请求一次接口&#xff0c;鼠标指在接口上&#xff0c;点击鼠标右键-copy-copy as cURL(bash) 二、导入postman 打开postman&#xff0c;点击import-Raw text&#xff0c;…

YOLOv5、YOLOv7 注意力机制改进SEAM、MultiSEAM、TripletAttention

用于学习记录 文章目录 前言一、SEAM、MultiSEAM1.1 models/common.py1.2 models/yolo.py1.3 models/SEAM.yaml1.4 models/MultiSEAM.yaml1.5 SEAM 训练结果图1.6 MultiSEAM 训练结果图二、TripletAttention2.1 models/common.py2.2 models/yolo.py2.3 yolov7/cfg/training/Tri…

Spring Boot Actuator的Env端点存在本地文件包含(LFI)漏洞CVE-2020-5421

文章目录 0.前言1.参考文档2.基础介绍3.漏洞利用原理3.解决方案1. 升级Spring Boot版本2. 限制端点的访问3. 禁用环境端点4. 不公开敏感的Actuator端点5. 开启安全审计 0.前言 背景&#xff1a; Spring Boot Actuator的Env端点存在本地文件包含(LFI)漏洞CVE-2020-5421。被扫描到…

三维数据的显示及 L0D 模型

三维显示通常采用截面图、等距平面、多层平面和立体块状图等多种表现形 式&#xff0c;大多数三维显示技术局限于 CRT 屏幕和绘图纸的二维表现形式&#xff0c;人们可以观 察到地理现象的三维形状&#xff0c;但不能将它们作为离散的实体进行分析&#xff0c;如立体不能被 测…

【C51基础实验 LED闪烁】

51单片机项目基础篇 LED闪烁1、硬件电路设计和原理分析2、软件设计2.1、功能实现&#xff1a;LED闪烁2.2、通过 KEIL 软件自带仿真查看延时时间 4、编译结果5、结束语 LED闪烁 前言&#xff1a; 前一篇学会了点亮一颗LED以及驱动原理&#xff0c;那么这篇紧接着就来解锁LED的新…

【业务功能篇90】微服务-springcloud-检索服务-ElasticSearch实战运用-DSL语句

商城检索服务 1.检索页面的搭建 商品检索页面我们放在search服务中处理&#xff0c;首页我们需要在mall-search服务中支持Thymeleaf。添加对应的依赖 <!-- 添加Thymeleaf的依赖 --><dependency><groupId>org.springframework.boot</groupId><artifa…

Nginx 通过userAgent判断是否时搜索引擎蜘蛛

Nginx配置如下 #爬虫转发if ($http_user_agent ~* "(Baiduspider|baiduspider|Baiduspider-render|bcebos-spider-1.0|baiduboxapp|360Spider|Sogou|Sogou web spider|Yisouspider|Googlebot|yahoo|ToutiaoSpider|bytespider|bingbot|YandexBot)") {rewrite ^/(.)/(.…

服务器安装 anaconda 及 conda: command not found [解决方案]

[解决方案] conda: command not found Anaconda3 安装conda: command not found Anaconda3 安装 由于连接的服务器&#xff0c;无法直接在anaconda官网上下载安装文件&#xff0c;所以使用如下方法&#xff1a; wget https://repo.anaconda.com/archive/Anaconda3-2023.03-Li…

(笔记二)利用opencv调用鼠标事件在图像上绘制图形

目录 &#xff08;1&#xff09;查看cv2所支持的鼠标事件&#xff08;2&#xff09;通过鼠标事件在图像上做标记&#xff08;3&#xff09;高级操作&#xff1a;通过移动鼠标在图像绘制图形、曲线 该功能主要创建一个鼠标事件发生时执行的回调函数。鼠标事件可以是任何与鼠标有…