如何获取未使用 javascript 呈现的 dom 元素？
Posted
技术标签:
【中文标题】如何获取未使用 javascript 呈现的 dom 元素？【英文标题】：How do I get the dom element which has not rendered with javascript? 【发布时间】：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 只能在元素存在时获取它。 【参考方案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 语句之前已加载（异步性质，你看！）
【讨论】：
以上是关于如何获取未使用 javascript 呈现的 dom 元素？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 selenium 获取带有 javascript 呈现的源代码的 html
Web 抓取 - 如何通过 Angular.js 访问以 JavaScript 呈现的内容？
Python Flask 页面未使用外部 CSS 和 Javascript 呈现