document.all和document.layers(转)

本文介绍了早期IE4.0及以上的document.all特性和Netscape4.x的document.layers特性,这两种特性用于访问HTML文档中的元素。随着标准的发展,这些特性逐渐被新的DOM方法替代。

 


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

 

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

其实这两个属性没什么可比性,大概你经常看到他们同时出时,这有一个历史原因。在第四代浏览器出现的时候,标准相当混乱,Netscape和微软分别推出了它们的Navigator 4.x和IE 4.0,这两个浏览器的巨大差异,也使开发者面临了一个使网页跨浏览器兼容的噩梦。而document.layer和document.all分别是两者一个最显著的标志,为了确定浏览者使用的什么浏览器,通常用是否存在document.layers和document.all来判断。
新的统一的标准用document.getElementById等系列方法来引用DOM对象,而且Netscape 6.0以后放弃了layers特征,虽然IE继续保留了document.all,但这最终没有成为DOM标准的一部分。希望document.layers和document.all能够早日作古,让标准早日深入人心!

 

代码示例:

<script language="JavaScript">
function showtime()
{
var GetTime=newDate(); //获取当前日期
var Years=GetTime.getYear(); // 取当前日期的年
var Months=GetTime.getMongh();// 取当前日期的月
var Days=GetTime.getDate();// 取当前日期的日
var Hours=GetTime.getHours();// 取当前日期的小时
var Minutes=GetTime.getMinutes();// 取当前日期的分钟
var Seconds=GetTime.getSeconds();// 取当前日期的秒
var Dn='AM';
if(Hours<=9) //小时少于9时,前面加0,
{
Hours='0'+Hours;
}
if(Hours==0||Hours>12)
{
Dn='PM'; //小时大于12或0时,设为PM(下午)
}
if(Minutes<=9)
{
Minutes='0'+Minutes;
}
if(Seconds<=9)
{
Seconds='0'+Seconds;//秒少于9时,前面加0,
}
NowTime=Years+'年'+Months+'月'+Days+'日 '+Hours+':'+Minutes+':'+Seconds+''+Dn; //当前日期的字符串
if(document.layers){ //不同浏览器下, 将当前日期的字符串显示出来.
document.layers.liveclock.document.write(NowTime)
document.layers.liveclock.document.close()
}
else if(document.all)
liveclock.innerHTML=NowTime
setTimeout('showtime()',1000) //每秒运行showtime函数一次,
}

 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Feature Layer Integration</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css"> <!-- 引入ArcGIS API --> <script src="https://js.arcgis.com/4.25/"></script> <style> #viewDiv { padding: 0; margin: 0; height: 600px; width: 100%; } .measureButtons { margin-top: 10px; } </style> </head> <body> <div id="viewDiv"></div> Name:<input id="searchInput" type="text"> <button id="btn">查询</button> <div class="measureButtons"> <button id="measureLengthBtn">测量距离</button> <button id="measureAreaBtn">测量面积</button> <button id="clearMeasureBtn">清除测量</button> </div> <table> <thead> <tr> <th>名称</th> <th>类型</th> <th>面积 (平方米)</th> </tr> </thead> <tbody id="infoBody"></tbody> </table> <p><strong>总面积:</strong><span id="totalArea">0 平方米</span></p> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/tasks/support/Query", "esri/tasks/QueryTask", "esri/widgets/AreaMeasurement2D", "esri/widgets/DistanceMeasurement2D", "esri/Graphic", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", "dojo/domReady!" ], function( Map, MapView, FeatureLayer, Query, QueryTask, AreaMeasurement2D, DistanceMeasurement2D, Graphic, SimpleFillSymbol, SimpleLineSymbol, Color ) { // 创建地图实例 var map = new Map({ basemap: "streets-navigation-vector" }); // 创建视图实例 var view = new MapView({ container: "viewDiv", map: map, center: [105, 25], // WGS_1984_UTM_zone_48N 的中心点 zoom: 7, spatialReference: { wkid: 32648 } // WGS_1984_UTM_zone_48N 投影坐标系 }); // 加载文件地理数据库要素类 var featureLayer = new FeatureLayer({ url: "http://localhost/arcgis/rest/services/gzlx_FeatureToPolygon1/FeatureServer/0", outFields: ["*"] }); map.add(featureLayer); // 查询功能 document.getElementById("btn").onclick = function() { var name = document.getElementById("searchInput").value.trim(); if (!name) { alert("请输入查询名称"); return; } view.graphics.removeAll(); var query = new Query(); query.where = `name = '${name}'`; query.returnGeometry = true; query.outFields = ["*"]; var queryTask = new QueryTask({ url: featureLayer.url }); queryTask.execute(query).then(function(response) { if (response.features.length === 0) { alert("查询无结果"); return; } var totalArea = 0; response.features.forEach(function(feature) { var area = feature.geometry.getArea(); totalArea += area; var symbol = new SimpleFillSymbol({ color: [0, 255, 0, 0.5], outline: { color: [255, 0, 0], width: 2 } }); var graphic = new Graphic({ geometry: feature.geometry, symbol: symbol, attributes: feature.attributes }); view.graphics.add(graphic); }); document.getElementById("totalArea").textContent = totalArea.toFixed(2) + " 平方米"; var html = ""; response.features.forEach(function(feature) { html += `<tr> <td>${feature.attributes.name || "未知名称"}</td> <td>${feature.geometry.type}</td> <td>${feature.geometry.getArea().toFixed(2)}</td> </tr>`; }); document.getElementById("infoBody").innerHTML = html; }); }; // 测量距离功能 var distanceMeasurement = new DistanceMeasurement2D({ view: view }); view.ui.add(distanceMeasurement, "top-right"); document.getElementById("measureLengthBtn").onclick = function() { distanceMeasurement.start(); }; // 测量面积功能 var areaMeasurement = new AreaMeasurement2D({ view: view }); view.ui.add(areaMeasurement, "top-right"); document.getElementById("measureAreaBtn").onclick = function() { areaMeasurement.start(); }; // 清除测量 document.getElementById("clearMeasureBtn").onclick = function() { view.graphics.removeAll(); distanceMeasurement.clear(); areaMeasurement.clear(); }; }); </script> </body> </html>结合以下代码:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-1 findtask</title> <!-- 用来引入esri.csstundra.css样式表 --> <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.45/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.45/esri/css/esri.css"/> <!-- 用来引入init.js,即可引入ArcGIS API for Javascript--> <script src="https://js.arcgis.com/3.45/init.js"></script> <!-- style标签用来设定页面显示外观,其中widthhight分别用来设置组件mapDiv的宽高,border用来设置mapdiv的边框样式 .mapclass根据元素的id属性值,来精准的选中元素--> <style> .MapClass{ width:100%; height: 500px; border: 1px solid #000; } </style> </head> <body class="tundra"> <div id="mapDiv" class="MapClass"></div> <!-- 通过input标签,设置文本输入框 --> Name:<input id="searchInput" type="text"> <!-- 设置button按钮 --> <button id="btn">查询</button> <!-- 利用table标签写表格,thead标签表示表头,tr表示一行,th表示单元格,tbody表示表身 --> <table > <thead> <tr> <th width="100px">名称</th> <th width="100px">类型</th> <th width="100px">面积</th> </tr> </thead> <tbody id="infoBody"></tbody> </table> <!-- script标签用来书写Javascript代码 --> <script> /** *思路: * 1. 创建查询对象FindTask,对查询对象实例化 2. 创建属性查询参数 3.给findTask查询按钮添加一个click事件 (1)获取HTML页文本框所输入的查询名称。 (2)实例化FindParameters参数 (3)调用execute函数,执行查询 4.处理查询结果 (1)将获得的要素定位高亮显示,在回调函数中新建图形符号,设置获得fintask查询得到的geometry。 (2)在table面板中展示信息,利用数组获得查询信息,并在 table中展示信息 */ require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tasks/FindTask", "esri/tasks/FindParameters", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Point", "esri/Color", "esri/graphic", ], // function用来表示回调函数,function中的参数要与require中的类一一对应。 function(Map,ArcGISDynamicMapServiceLayer,FindTask,FindParameters,SimpleMarkerSymbol, SimpleLineSymbol,SimpleFillSymbol,Point,Color,Graphic){ //添加动态地图服务图层 var map = new Map("mapDiv"); var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer"); map.addLayer(layer); //创建属性查询对象,对查询对象实例化,FindTask构造函数需要一个ArcGIS Server地图服务的URL var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer"); //实例化查询参数, var findParams = new FindParameters(); //给属性查询按钮添加一个click事件 document.getElementById("btn").onclick=function funFind(){ var name=document.getElementById("searchInput").value;//获得输入框的值,即当点击id="btn"的查询按钮时,获取到id=searchInput输入框的输入值。 map.graphics.clear();//清除上一次的高亮显示,若不写这个代码,选中的图层不会清空 findParams.returnGeometry = true; //注意 returnGeometry被设置为true以便结果能被显示在地图上。 //FindParameters指出哪些图层字段将被搜索。如果多个图层包含相同的字段名称(例如"NAME")两个字段都要被搜索。 findParams.layerIds = [0,1];//对省级行政区省级行政区-线查询 findParams.searchFields = ["name"];//匹配图层中的name属性 findParams.searchText = name;//searchText参数是任务将要搜索什么。这个文本来自输入框并且当单击查询,按钮时被发送到execute函数。 //name为点击查询按钮时获得的输入框的值 findParams.returnGeometry = true; //注意 returnGeometry被设置为true以便结果能被显示在地图上。 /*进行查询,当任务执行结束,showResults函数循环访问FindResult里的graphics数组, 并增加每个图形到地图。函数也增加每个结果的属性到表格。 */ findTask.execute(findParams,showFindResult) // console.log(findParams); } //处理属性查询返回给我们的数据 function showFindResult(findResult) { //初始化信息暂存数组 nameArr=[];//用于存储查询地点名称 shapeArr=[];//用于存储查询shape AREAArr=[];//用于存储查询shape console.log(findResult); if (findResult.length === 0) { alert("查询无结果"); return; } for (var i = 0; i < findResult.length; i++) { nameArr[i]=findResult[i].feature.attributes.name; shapeArr[i]=findResult[i].feature.attributes.Shape; AREAArr[i]=findResult[i].feature.attributes.AREA; //定义高亮图形的符号 var lineSymbol= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1); //定义面的边界线符号 var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,new Color([0, 255, 0, 1])); //定义面符号 //获得图形graphic var graphic=findResult[i].feature; //赋予相应符号 graphic.setSymbol(PolygonSymbol); //将graphic添加到地图中,从而实现高亮效果 map.graphics.add(graphic); } //通过循环写入表格主体数据,tr标签为行,td标签为单元格。 var html=""; for(var i=0;i<nameArr.length;i++){ html+="<tr>" + " <td >"+nameArr[i]+"</td>" + "<td >"+shapeArr[i]+"</td>" + "<td >"+AREAArr[i]+"</td>" + "</tr>"; } //将属性绑定在infoBody的表格上,即修改表格主体的内容。 document.getElementById("infoBody").innerHTML =html; } } ) </script> </body> </html>
最新发布
06-12
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值