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

【问题标题】：How do I get the dom element which has not rendered with javascript?如何获取未使用 javascript 呈现的 dom 元素？
【发布时间】：2015-03-31 10:22:39
【问题描述】：

我有一个简单的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怎么会这样呢？

【问题讨论】：

将 head 部分的代码添加到 document.ready 函数中。
您在查询中拼写了切换错误
Javascript 和 jQuery 只能在元素存在时获取它。

标签： javascript jquery dom jquery-selectors

【解决方案1】：

有许多不同的方法可以检查事物是否已满载。走哪条路应该始终基于您的需要。您不想等待比真正需要的时间更长的时间。

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

如果您想要一个“普通”的替代方案，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() {
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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 语句之前已加载（异步性质，你看！）

【讨论】：