如何访问外部 JavaScript 文件中的 DOM 对象？答案

【问题标题】：How can I access DOM objects in an external JavaScript file?如何访问外部 JavaScript 文件中的 DOM 对象？
【发布时间】：2013-08-17 02:25:45
【问题描述】：

我正在使用外部 JavaScript 文件来访问我的文档中的 DOM 对象。问题是如果 jQuery 是外部加载的文件，它似乎无法访问。我的代码如下：

<html>
    <head>
    </head>

    <body>
        <div id="domToChange" someAttribute="hi"></div>
        <script src="officialJqueryLibrary"></script>
        <script src="myJS.js"></script>
    </body>
</html>

///////// myJS.js file

// Returns undefined
$('#domToChange').attr('someAttribute');

在外部加载 JavaScript 文件时，DOM 选择器似乎找不到我的 div。但是，当我将它放在 HTML 文档本身中时，一切正常。如何让 DOM 访问我的 JavaScript 文件？

【问题讨论】：

控制台出现一些错误？
在萤火虫中，它向我展示了脚本，我已经逐步完成了脚本。有什么特别的东西可以阻止外部 js 文件访问 dom 元素，还是假设它可以直接开箱即用？如果是后者，那么我可能做了一些愚蠢的事情，但是我发布的代码被大大简化了。我实际上是在事件处理程序中执行该代码，这就是为什么我知道在执行脚本时应该加载 DOM 对象。
如果每个提问的人都能给出一个真实的实时代码示例，那就太好了。 jsbin.com/irihew/1/edit 花了我 1 分钟，您所要做的就是添加一个外部资源，然后我们可以在 5 分钟内回复您。
@Mr.Student 它在不同浏览器中的工作方式是否相同？

标签： javascript jquery html dom dhtml

【解决方案1】：

尝试获取属性的值，如下所示：

$('#domToChange').attr('someattribute');
//or
$('#domToChange').attr('someAttribute'); // i know you've tried this, but pls check demo

演示here。在我的机器上，浏览器 Chrome 版本 28.0.1500.95 m，它运行良好。

【讨论】：

【解决方案2】：

好的，这是一个偶然的事情（但我相信这是一个准确的解释），但真正解释为什么会发生就在这里。

你需要了解jQuery是一个被初始化的对象。所以 jQuery 对象需要时间来初始化。正如它所说，

区分 jQuery 对象和原生 DOM 元素非常重要。 jQuery 对象上不存在原生 DOM 方法和属性，反之亦然。

因此没有必要在初始化DOM 的同时初始化 jQuery 对象。

此外，所有传递的脚本都具有defer 属性。这主要取决于浏览器。

正如它所说，

设置后，此布尔属性向用户代理提供脚本不会生成任何文档内容的提示（例如，在 javascript 中没有“document.write”），因此，用户代理可以继续解析和呈现.

它有时会延迟脚本的执行。因人而异，结果不同。

【讨论】：

【解决方案3】：

你必须像这样附上代码：

$(function(){
     $('#domToChange').attr('someAttribute');
});

以便在 DOM 准备好时执行代码。

【讨论】：

不，你不这样做，因为它被放置在页面上的元素之后。

【解决方案4】：

您应该将所有与 DOM 相关的代码包装到

$(function() {
    //Code
});

然后在 DOM 完全加载时执行代码。

【讨论】：