详解作为Window对象属性的文档元素

作者:佚名     字体:[增加 减小]    类型:转载
如果在HTML文档中用id属性来为元素命名,如果有的元素name属性也id属性相同时,如果Window对象属性与前两者相同时,js会如何处理呢,本文为你详细解说。

如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而它们的值指向表示文档元素的HTMLElement对象。比如:

<body>
<div id="his"></div>
<script>
window.onload = function(){
    console.log(his);
}
</script>
</body>

我们在控制台可以得到信息<div id="his"></div>

但是,有一个重要的警告:如果Window对象已经具有此名字的属性,这就不会发生。比如:id是“history”、“location”、“navigator”的元素,就不会以全局变量的形式出现,因为这些ID已经占用了。为了说明这个问题,我们再来看个例子。代码同上,只是把id改为“history”。

<body>
<div id="history"></div>
<script>
window.onload = function(){
    console.log(history);
}
</script>
</body>

我们在控制台上提到的信息,还是History对象的信息,如下所示 JavaScript的Window对象属性与ID同名的时候 同样,如果HTML文档包含一个名为“his”的元素,并且还在代码中声明并赋值给全局变量his,那么显示声明的变量会隐藏隐式的元素变量。如果脚本中的变量声明出现在命名元素之前,那这个变量的存在就会阻止元素获取它的window属性。而如果脚本中的变量声明出现在命名元素之后,那么变量的显示赋值会覆盖该属性的隐式值。为了说明问题,我们将上面的代码稍加修改,再来看看结果

<body>
<div id="his"></div>
<script>
window.onload = function(){
    var his = 'http://www.popjb.com/24198.html';
    console.log(his);
}
</script>
</body>

得到的结果显然是本文的网址http://www.popjb.com/24198.html

学会通过document.getElementById()方法,用HTML的id属性来查找元素。见面的例子

<body>
<div id="input"></div>
<div id="prompt"></div>
<div id="heading"></div>
<script>
var ui = ['input','prompt','heading'];  //数组中存放要查找的元素id
var aDiv={};
ui.forEach(function(id){                //用每个id查找对应的元素
    aDiv[id] = document.getElementById(id); //将其存放在每个属性中
})
console.log(aDiv);
</script>
</body>

在上面的示例中我们使用了Array对象的forEach方法,如果对此有不明白的地方,请详细阅读下面这篇文章 javascript forEach通用循环遍历方法。我们得到的结果为 利用forEach来获取数组元素

假设ID并没有被Window对象使用的话,那么任何有属性的HTML元素都会成为全局变量的值。以下HTML元素如果有name属性的话,也会这样表现:

<a>
<applet>
<area>
<embed>
<form>
<frame>
<frameset>
<iframe>
<img>
<object>

id元素在文档中必须是唯一的: 两个元素不能有相同的id。但是,这对name属性无效。如果上面的元素有多于一个相同的name属性(或者一个元素有name属性,而另一个元素有相同值的id属性),具有该名称的隐式全局变量会引用一个数组对象,这个类数组对象的元素是所有命名的元素。

有name或id属性的<iframe>元素是个特殊的例子。为它们隐匿创建的变量不会引用表示元素自身的Element元素,而是引用表示<iframe>元素创建的嵌套浏览器窗体的Window对象。