页面没初始化完js无法获取元素：解决JavaScript加载顺序问题
问题概述
在开发Web页面时，开发者经常会遇到JavaScript脚本在页面元素加载完成之前执行，导致无法获取到DOM元素的问题。这种情况通常发生在脚本被放置在HTML文档的头部，而页面的DOM元素还在加载中。
原因分析
JavaScript是一种单线程语言，它按照代码的顺序执行。如果脚本在DOM元素之前执行，那么在脚本运行时，DOM元素可能还没有被完全加载到文档对象模型中，从而导致JavaScript无法找到或操作这些元素。
解决方案一：将脚本放在文档底部
一种常见的解决方案是将JavaScript代码放在HTML文档的底部，即在
</body>标签之前。这样做可以确保在脚本执行之前，页面的所有DOM元素都已经加载完成。：
<html>
<head>
<title>页面示例</title>
</head>
<body>
<div id="example">这是一个示例元素</div>
<script>
// 你的JavaScript代码
console.log(document.getElementById('example'));
</script>
</body>
</html>
解决方案二：使用DOMContentLoaded事件
另一种解决方案是使用`DOMContentLoaded`事件。这个事件会在文档被完全加载和解析完成之后，但不等待样式表、图片和子框架完成加载时触发。你可以在这个事件的回调函数中执行你的JavaScript代码。：
document.addEventListener('DOMContentLoaded', function() {
// 你的JavaScript代码
console.log(document.getElementById('example'));
});
解决方案三：使用jQuery的$(document).ready()
如果你的项目中使用了jQuery，可以使用`$(document).ready()`方法。这个方法会在DOM完全加载之后执行，类似于`DOMContentLoaded`事件。：
$(document).ready(function() {
// 你的JavaScript代码
console.log($('#example'));
});
解决方案四：使用window.onload与addEventListener('load')
`window.onload`事件会在页面的所有元素，包括样式表、图片和子框架加载完成后触发。如果你的JavaScript操作依赖于这些资源，可以使用这个事件。：
window.onload = function() {
// 你的JavaScript代码
console.log(document.getElementById('example'));
};
// 或者使用addEventListener
window.addEventListener('load', function() {
// 你的JavaScript代码
console.log(document.getElementById('example'));
});
解决方案五：使用MutationObserver监听DOM变化
如果你需要在特定的DOM元素加载完成后执行JavaScript代码，可以使用`MutationObserver`API。这个API允许你监听DOM的变化，并在变化发生时执行回调函数。：
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length) {
console.log('DOM元素已加载');
// 你的JavaScript代码
}
});
});
observer.observe(document.documentElement, {
childList: true,
subtree: true
});
页面没初始化完js无法获取元素是一个常见的问题，但通过上述几种方法，你可以确保JavaScript代码在DOM元素加载完成后执行。选择哪种方法取决于你的具体需求和项目环境。在实际开发中，推荐使用`DOMContentLoaded`或jQuery的`$(document).ready()`，因为它们简单且有效。
