简体   繁体   English

如何访问外部JavaScript文件中的DOM对象?

[英]How can I access DOM objects in an external JavaScript file?

I'm using an external JavaScript file to access DOM objects with in my documents. 我正在使用外部JavaScript文件来访问文档中的DOM对象。 The problem is that jQuery doesn't seem to have access if it's an externally loaded file. 问题是,如果jQuery是外部加载的文件,则它似乎无权访问。 My code looks like: 我的代码如下:

<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');

The DOM selector doesn't seem to find my div when the JavaScript file is loaded externally. 从外部加载JavaScript文件时,DOM选择器似乎找不到我的div。 However everything works when I place it inside the HTML document itself. 但是,当我将其放置在HTML文档本身中时,一切正常。 How can I give DOM access to my JavaScript file? 如何授予DOM访问我的JavaScript文件的权限?

You have to enclose the code like this: 您必须封装如下代码:

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

So that the code is executed when the DOM is ready. 以便在DOM准备就绪时执行代码。

You should wrap all your DOM related code into 您应该将所有与DOM相关的代码包装到

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

Then the code gets executed when the DOM is fully loaded. 然后,当DOM完全加载时,将执行代码。

Try getting the value for your attribute, like so: 尝试获取属性的值,如下所示:

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

Demo here . 演示在这里 On my machine, browser Chrome Version 28.0.1500.95 m, it just works fine. 在我的机器上,浏览器Chrome版本28.0.1500.95 m,它运行良好。

OK, this is a hit and miss kind of thing (but I believe it be an accurate explanation), but the real explanation for why it is happening lies here. 好的,这是一件偶然的事情(但我相信这是一个准确的解释),但真正的解释却在这里。

You need to understand that jQuery is an object that is initialized . 您需要了解jQuery是已初始化的对象 So the jQuery object takes time to initiatize. 因此,jQuery对象需要花费一些时间来初始化。 As it says, 就像说的那样

is very important to make the distinction between jQuery object and native DOM elements. 区分jQuery对象和本机DOM元素非常重要。 Native DOM methods and properties are not present on the jQuery object, and vice versa. 本机DOM方法和属性不在jQuery对象上,反之亦然。

So it is not necessary that the jQuery object gets initialized at the same time the DOM gets initialized. 因此,不必在初始化DOM的同时初始化jQuery对象。

Also, all scripts that are passed have a defer attribute. 另外,所有传递的脚本都具有defer属性。 This is mostly browser dependent. 这主要取决于浏览器。

As it says, 就像说的那样

When set, this boolean attribute provides a hint to the user agent that the script is not going to generate any document content (eg, no "document.write" in javascript) and thus, the user agent can continue parsing and rendering. 设置时,此布尔属性向用户代理提供一个提示,即脚本将不会生成任何文档内容(例如,javascript中没有“ document.write”),因此,用户代理可以继续解析和呈现。

And it can sometimes delay the execution of the script. 而且有时可能会延迟脚本的执行。 Hence the different result according to different people. 因此,根据不同的人会有不同的结果。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM