HTML DOM元素全球范围

Question

帮助某人时，我有一个有趣的情况。他们想知道为什么下面的代码工作：

<input type="text" id="myElem" value="Nice" /> 

$(function() { 
    var myElem = $("myElem"); 
    myProblem(); 
}); 

var myProblem = function() { 
    var result = myElem.value; //This Works 
    result = myElem.val(); //Doesn't Work 
} 

起初我没有一个很好的答案，因为我现在的想法是在myProblem方法应该失败这两个语句，但只有一个失败。后来我学会了浏览器全局范围内的所有HTML元素。

因此，解释这个问题是如何解决的，myElem将在加载函数中作为JQuery对象的作用域，但是当它位于myProblem方法内时，JQuery对象将变得超出范围，并且由于浏览器范围所有HTML元素在全球范围内，myElem将被限定为HtmlInputElement。

我一直在编写代码，对于我来说，只是为了学习浏览器对全局HTML元素进行范围界定是我的新闻。

我了解代码示例及其工作原理。我的问题是浏览器有多早这样做？这是最新的趋势还是我错过了什么？所有浏览器都支持吗？

经过一番研究，我发现最新的浏览器支持，但如何对IE6 +等

谢谢

Answer 1

“我了解代码示例及其工作原理。我的问题是浏览器有多早这样做？这是最新的趋势还是我错过了什么？是否所有的浏览器都支持这一点？”

这原本是一个IE浏览器的功能，这是不规范的。如果我还记得，歌剧可能是第一个采用它，其次是Chrome浏览器，当它来到身边。

最近，Firefox采用了它，因此，喜欢它或讨厌它，大多数现代浏览器都实现了这个功能，但是如果你支持传统浏览器，你会发现一些（特别是Firefox）没有它

许多人建议不要依赖这个功能，最终取决于你和你的项目必须支持的浏览器

Answer 2

那是因为里面myProblem您要访问一个名为myElem全局变量暴露在浏览器全球范围内......这是名字/ ID myElem的DOM元素，因此不会有像与之相关的.val() jQuery的包装方法

该规范可以found here

$(function() { 
    //this creates a local scope variable holding jQuery wrapper object, which is accessable only inside the scope of this function 
    var myElem = $("myElem"); 
    myProblem(); 
}); 

var myProblem = function() { 
    //here myElem refers to the dom element with id/name myElem which is exposed to the global scope 
    var result = myElem.value; //This Works 
    result = myElem.val(); //Doesn't Work 
}