HTML DOM元素全局范围

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

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

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

因此解释如何解决这个问题是因为myElem将作为on load函数中的JQuery对象在范围内，但是当它在myProblem方法中时，JQuery对象将变得超出范围，并且因为浏览器将所有HTML元素全局范围化，myElem将作为HtmlInputElement的范围。

我已经编写了一段时间的代码了，对我来说，只是学习浏览器是全球范围内所有HTML元素的范围对我而言都是新闻。

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

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

谢谢

Answer 1

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

这最初是一个非标准的IEfunction。 如果我记得的话，Opera可能首先采用它，然后是Chrome。

最近，Firefox采用了它。 因此，喜欢或讨厌它，大多数现代浏览器都实现了这一function，但如果您支持旧版浏览器，您会发现一些（特别是Firefox）没有它。

许多人建议不要依赖此function。 最终由您和您的项目必须支持的浏览器决定。

Answer 2

这是因为在myProblem你正在访问一个名为myElem的全局变量，它被浏览器暴露给全局范围……它是名为/ id myElem的dom元素，因此它没有像.val()那样的jQuery包装器方法用它

规范可以在这里找到

 $(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 }