分配给 JS 对象的 Javascript Dom 元素 ID？我是疯了还是……？

Question

好吧，所以我最近一直在调试我们的应用在某些移动浏览器上的 JS 问题，而该解决方案给我的启示似乎完全是疯狂的：

我的问题是，在普通的 android 浏览器和 iOS Safari（没有其他地方）上，当我在对象上调用函数时，它会返回一个错误，即该对象没有这样的函数。我想，标准错误......除了我之前明确定义了该对象和函数 - 作为伪命名空间，如

    var varname = varname || { ... }

现在，'varname' 作为 JS 对象之前没有被创建，所以 ||只是为了安全，因为这些插件被称为一堆......但在某种程度上我无法解释，页面前面的<section>，id =“varname”，已经在那个js对象中了。

这怎么可能？也许只是太晚了，我忽略了一些东西，但看起来我的 HtmlElements 被分配给 id 作为 var 名称的 javascript 对象。

我只写了 3.5 年的 js 代码，但我要么发现了一些奇怪的错误，要么不得不认真重新评估我的 JS 知识。

这是任何怀疑者的确切代码（JSTL 提供了部分 ID，但我认为这与它没有任何关系）：

    <section id="attr<c:out value="${thisFieldAndAttrs.id}" />" class="attr"> ...

几百行之后（但没有提及任何attr###），我去创建一个对象：

    var attr<c:out value="${thisFieldAndAttrs.id}"/> = attr<c:out value="${thisFieldAndAttrs.id}"/> || { ...

并且对象已经存在，作为<section> HTMLElement 的一个实例。这发生在所有浏览器上，但较新的浏览器似乎知道足以覆盖对象（？）。我拥有的唯一外部脚本是 JQuery，据我所知，如果您可以在 Javascript 中通过它们的 ID 引用 HTMLElements，那会不会首先消除使用 JQuery 的很多便利？我查看了他们的文档，找不到任何提到这一点的地方。

这是一个错误吗？或者只是非常意想不到的功能？还是我在这里遗漏了什么...

Answer 1

在某些浏览器（全部？）中，具有 ID 的元素会自动在具有该 ID 的窗口上生成一个属性。但是，如果您声明变量，它应该覆盖它，但这几乎破坏了您正在做的事情。如果其他脚本需要使用它，我建议直接在 window 上声明它。

<div id="section"></div>
<script>
    console.log(section); // div element
    (function(){
        var section = section || {};
        console.log(section); // object

        window.section = section;
    })();
    console.log(section); // object
</script>

http://jsfiddle.net/8u8sn/3/