正如摘要所述，本文旨在解决在使用 JavaScript 修改 HTML 图片元素的 src 属性时遇到的 "setAttribute cannot read properties of null" 错误。该错误通常发生在尝试在 DOM 加载完成之前访问和操作 DOM 元素时。以下将详细介绍问题的原因以及如何通过代码调整来解决此问题。
问题分析
"setAttribute cannot read properties of null" 错误表明，在尝试调用 setAttribute 方法时，目标元素（在本例中是 id 为 "banner" 的 <img> 元素）为 null。这通常意味着 JavaScript 代码在 HTML 元素被完全加载之前就执行了，导致 document.getElementById("banner") 或 $("#banner") 无法找到该元素，从而返回 null。
解决方案
为了确保在 DOM 完全加载后再执行 JavaScript 代码，可以使用以下两种方法：
1. 使用 jQuery 的 $(function() { ... });
jQuery 提供了一个便捷的方法来确保代码在 DOM 加载完成后执行。将代码包裹在 $(function() { ... }); 中即可：
$(function() {
flagDictionary = {
1 : "assets/WCUFOD.png",
2 : "assets/lesbians.svg",
3 : "assets/Gay.svg",
4 : "assets/bisexual.png",
5 : "assets/intersex.jpg",
6 : "assets/asexual.png",
}
const time = new Date();
const day = time.getDay()
let mainBanner = document.getElementById("banner");
mainBanner.setAttribute("src", flagDictionary[1]);
});2. 使用原生 JavaScript 的 DOMContentLoaded 事件
原生 JavaScript 提供了 DOMContentLoaded 事件，可以在 DOM 加载完成后触发。可以使用以下代码来实现相同的功能：
document.addEventListener('DOMContentLoaded', function() {
flagDictionary = {
1 : "assets/WCUFOD.png",
2 : "assets/lesbians.svg",
3 : "assets/Gay.svg",
4 : "assets/bisexual.png",
5 : "assets/intersex.jpg",
6 : "assets/asexual.png",
}
const time = new Date();
const day = time.getDay()
let mainBanner = document.getElementById("banner");
mainBanner.setAttribute("src", flagDictionary[1]);
});3. 调整 script 标签的位置
将 <script> 标签放在 </body> 标签之前，也能确保在 HTML 元素加载完成后再执行 JavaScript 代码。
<body> <img src="assets/wcuFOD.png" class="banner" id="banner"></img> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> </body>
4. 使用 jQuery 的 attr() 方法 (推荐)
如果已经引入了 jQuery，推荐使用 jQuery 的 attr() 方法来设置属性，它更简洁方便，并且能避免一些潜在的问题。
$(function() {
flagDictionary = {
1 : "assets/WCUFOD.png",
2 : "assets/lesbians.svg",
3 : "assets/Gay.svg",
4 : "assets/bisexual.png",
5 : "assets/intersex.jpg",
6 : "assets/asexual.png",
}
const time = new Date();
const day = time.getDay()
$("#banner").attr("src", flagDictionary[1]);
});注意事项
- 脚本加载顺序： 确保 jQuery 库在 script.js 之前加载，因为 script.js 中使用了 jQuery 的相关功能。
- 调试技巧： 使用浏览器的开发者工具（通常按 F12 键打开）可以帮助你调试 JavaScript 代码。通过 console.log() 语句可以输出变量的值，以便检查代码的执行情况。
- 错误处理： 在实际开发中，建议添加错误处理机制，例如使用 try...catch 语句来捕获可能发生的异常，并进行相应的处理。
总结
当使用 JavaScript 操作 DOM 元素时，必须确保在 DOM 完全加载后再执行相关代码。本文介绍了使用 jQuery 的 $(function() { ... });、原生 JavaScript 的 DOMContentLoaded 事件以及调整 <script> 标签位置等方法来解决 "setAttribute cannot read properties of null" 错误。 同时推荐使用jQuery的attr()方法来设置属性，代码更简洁方便。 选择适合自己项目的方法，并结合调试技巧和错误处理机制，可以有效地避免此类问题的发生。
