Question

我有一个简单的js代码：

<html>
<head>
    <title>test</title>

    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
        console.log(document.querySelector('#nav-toggle')); // this will get null
        console.log($('#nav-toggle')); // this will get the element
    </script>
</head>
<body>
    <a id="nav-toggle" href="#">link</a>

    <script type="text/javascript">
        console.log(document.querySelector('#nav-toggle')); // this will get the element
        console.log($('#nav-toggle')); // this will get the element
    </script>
</body>
</html>

在我发表评论时，第一个document.querySelector('#nav-toggle')将获得null，我猜问题是dom element尚未呈现，因为第二个获取元素。

但jQuery可以获取该元素，无论其位置如何，jQuery怎么可能这样做？

Answer 1

有许多不同的方法可以检查是否已满载。哪条路要始终根据您的需要而定。你不想等待比真正需要更长的时间。

只是为了澄清，＆＃34; window.load＆＃34;是不与jQuery＆＃34; $（document）.ready（）＆＃34;。

相同

如果你想要一个＆＃34;香草＆＃34;替代方案，DOMContentLoaded是你的救援。

<强> DOMContentLoaded

来自MDN：https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

文档发布时会触发DOMContentLoaded事件完全加载和解析，无需等待样式表，图像，和子帧完成加载（加载事件可用于检测一个完整的页面。）

document.addEventListener("DOMContentLoaded", function() {
});

<强> window.load

来自MDN：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

加载事件在文档加载过程结束时触发。在至此，文档中的所有对象都在DOM中，而且都是图像，脚本，链接和子框架已完成加载。

window.onload = function() {
}

Answer 2

你被误导了。 Jquery无法获得尚未存在的元素。你可以用jQuery做的是使用它的document.ready方法，它在文档加载后运行。您可以使用onload事件使用vanilla javascript获得类似的结果。

Answer 3

将您的代码更改为以下内容，如果元素存在于DOM

中，您将始终找到该元素

<html>
<head>
    <title>test</title>

    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
        window.onload = function() {
          console.log(document.querySelector('#nav-toggle')); // this will get null
          console.log($('#nav-togglle')); // this will get the element
    }
    </script>
</head>
<body>
    <a id="nav-toggle" href="#">link</a>

    <script type="text/javascript">
        console.log(document.querySelector('#nav-toggle')); // this will get the element
        console.log($('#nav-togglle')); // this will get the element
    </script>
</body>
</html>

只是解释一下，jQuery在那里没有做任何魔术。出于测试目的，您可以交换您的vanilla javascript和jquery代码行，通过刷新页面尝试几次，您可能会看到不同的结果。

在你的当前场景中，只是jQuery可以找到该元素，因为在调用jQuery语句之前已经加载了元素（异步性质，你看！）

如何获取未使用javascript呈现的dom元素？

3 个答案: