document.all和document.layers

1、背景

    2022.1.11。今天在看《JavaScript DOM编程艺术》时发现document.all和document.layers两个属性，在学习过程中并未学习到有关这两个属性的知识。针对此问题，特从网上搜集资料得以学习并记录(参考内容在文末）。（学习得不是很深入，难免有错，请指正。）

2、document.all

    document.all是IE4.0及以上版本专有属性，是一个表示当前文档所有对象的数组，不仅包括页面上可见的实体对象，还包括一些不可见的对象，比如HTML注释等。
    在document.all数组里面，元素不分层次，是按照其在文档中出现的先后顺序，平行地罗列。所以可以用数组索引来引用到文档中的任何一个元素。但比较常用的是用对象ID来引用一个特定的对象。

2.1使用案例

(1)
//数组索引获取DOM元素
<script>
	document.all(0); //表示页面内第一个元素
</script>

(2)
//使用ID属性获得DOM元素
<input id="dom">这是一个带有ID属性的input DOM元素
<script>
	document.all.dom.value;
	//ID属性具有唯一性，以下代码错误
	console.log(document.all.dom(0).value);
</script>

(3)
//使用name获取DOM元素
<input name="dom">这是一个带有name属性的input DOM元素
<scirpt>
	console.log(document.all.name.value);
</script>

(4)
//使用name属性获取复选框(checkbox)值
<input type="checkbox" name=hobby value="篮球">
<input type="checkbox" name=hobby value="足球">
<script>
	console.log(document.all.name(0).value); //获取第一个checkbox的值
	console.log(document.all.name(1).value);//获取第二个checkbox的值
</script>

(5)
//当页面中出现相同ID的情况
<input id="hobby" value="篮球">
<input id="hobby" value="足球">
<script>
	console.log(document.all.hobby.value);
	//以上代码在控制台中输出undefined
</script>

(6)
//处理相同ID或name的做法
<input id="animal" value="老虎">
<input id="animal" value="狮子">
<input name="hobby" value="篮球">
<input name="hobby" value="足球">
<input id="food" value="棒棒糖">
<input name="music" value="美声">
<script>
	//按顺序获取并在控制台上打印DOM元素的值
	console.log(document.all("animal",0).value);
	console.log(document.all("animal",1).value);
	console.log(document.all("hobby",0).value);
	console.log(document.all("hobby",1).value);
	console.log(document.all("food",0).value);
	console.log(document.all("music",0).value);
</script>

 

3、document.layers

    document.layers是Netscape 4.x专有的属性，是一个代表所有由诸如<div><layer>等定位了的元素的数组。通常也是用<div>或<layer>对象的ID属性来引用的，但是这里面不包含除此以外的其他元素。

3.1使用案例

	//未找到，找到再来补。

4、两种属性的使用场景

    在第四代浏览器出现的时候，标准相当混乱，Netscape和微软分别推出了它们的Navigator 4.x和IE 4.0，这两个浏览器的巨大差异，也使得开发者面临了一个使网页跨浏览器的噩梦。而document.layer和document.all分别是两者一个最显著的标志，为了确定浏览者使用的是什么浏览器，通常用是否存在document.layers和document.all来判断。

// 原理：当文档对象中有all属性时则为IE，当文档对象的属性中有layers时则为Netscape 4.x

if(document.all){  // 判断浏览器是否为IE，因为只有IE才有document.all属性
	alert("is IE!");	
}else if(document.larers){ //判断是否为Netscape 4.x浏览器
	alert("Netscape");
}

5.结果

    为了打破浏览器制造商们筑起的专利壁垒，一群志同道合的程序员建立了名为Web标准计划（简称WaSP,http://webstandards.org/）的小组。WaSP小组采取的第一个行动就是，鼓励浏览器制造商们接受W3C制定和推荐的各项标准——也就是在浏览器制造商们的帮助下得以起草和完善的那些标准。
    微软公司在IE5浏览器中内建了对W3C制定的标准化DOM的支持，但同时继续支持其专有的Microsoft DOM。Netscape公司采取的是一种更为坚决果断的做法，它们发布了一个与NN4无任何共同点的浏览器：NN6，该浏览器干脆跳过了主版本号并使用一个完全不同的呈现引擎，新引擎对CSS提供了更多更好的支持。NN6也支持标准化的DOM，但不再向后兼容早期的Netscape DOM。
    新的统一的标准用document.getElementByID等系列方法来引用DOM对象，而且Netscape 6.0以后放弃了layers特性，虽然IE继续保留了document.all，但这最终没有成为DOM标准的一部分。

6.参考资料

曾是土木人-document.all和document.layers
前端的那些事儿-document.all用法
Jeremy Keith-《JavaScript DOM编程艺术》