加载外部js文件window.onload时无法读取null的属性"querySelectorAll“

基础概念

window.onload 是一个在网页所有资源（包括图像、CSS、脚本等）完全加载后触发的事件。querySelectorAll 是一个DOM方法，用于返回文档中匹配指定CSS选择器的所有元素的NodeList集合。

问题原因

如果在 window.onload 事件处理函数中使用 querySelectorAll 方法时遇到 null 的属性错误，通常是因为在DOM完全加载之前尝试访问某个元素，导致该元素不存在于DOM中。

解决方案

1. 确保元素存在：确保在 window.onload 事件触发时，目标元素已经存在于DOM中。
2. 使用 DOMContentLoaded 事件：这个事件在初始的HTML文档被完全加载和解析完成后触发，不需要等待样式表、图像和子框架完成加载。
3. 检查选择器：确保使用的CSS选择器正确无误。

示例代码

使用 window.onload

window.onload = function() {
    var elements = document.querySelectorAll('.my-class');
    if (elements.length > 0) {
        // 处理元素
    } else {
        console.error('No elements found with the specified selector.');
    }
};

使用 DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
    var elements = document.querySelectorAll('.my-class');
    if (elements.length > 0) {
        // 处理元素
    } else {
        console.error('No elements found with the specified selector.');
    }
});

应用场景

• 动态内容加载：当页面通过AJAX或其他方式动态加载内容时，确保在内容加载完成后执行DOM操作。
• 第三方脚本集成：在使用外部JavaScript库或插件时，确保它们在DOM完全加载后初始化。

相关优势

• 提高性能：通过延迟脚本执行直到DOM准备就绪，可以减少页面加载时间。
• 避免错误：确保在执行DOM操作时，目标元素已经存在于页面中，从而避免 null 引用错误。

类型

• 同步脚本：直接在HTML文件中通过 <script> 标签引入的脚本，默认情况下是同步执行的。
• 异步脚本：通过设置 <script> 标签的 async 属性，脚本将在下载完成后立即执行，不阻塞页面渲染。
• 延迟脚本：通过设置 <script> 标签的 defer 属性，脚本将在DOM解析完成后，但在 DOMContentLoaded 事件触发前执行。

通过上述方法，可以有效解决在 window.onload 事件中使用 querySelectorAll 方法时遇到的问题。