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

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

将您的代码更改为以下内容，如果元素存在于 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 并没有在那里施展魔法。出于测试目的，您可以交换原版 javascript 和 jquery 代码行，通过刷新页面尝试几次，您可能会看到不同的结果。

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

Answer 2

你误会了。 Jquery 无法获取尚不存在的元素。你可以用 jQuery 做的是使用它的 document.ready method, which is run after the document is loaded. You can get similar results with vanilla javascript using onload 事件。

Answer 3

有许多不同的方法可以检查是否已满载。应该始终根据您的需要选择哪种方式。您不想等待比真正需要的时间更长的时间。

澄清一下，"window.load" 与 jQuery 的“$(document).ready()”不相同。

如果您想要 "vanilla" 替代方案，DOMContentLoaded 是您的救星。

DOMContentLoaded

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

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

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

window.load

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

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

window.onload = function() {
}

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

How do I get the dom element which has not rendered with javascript?

javascript

jquery

dom

jquery-selectors