如何在JavaScript中将getElementById替换为querySelectorAll并替换ID为类

1. 修改HTML结构 #

先把原代码里的id属性替换为class，这样就能在页面中多次复用这些标识：

<p>Copyright <span class="copyright-year"></span> - <a href="#" class="site-title"></a>.</p>
<!-- 可以随意添加更多同class的元素，比如 -->
<footer>© <span class="copyright-year"></span> | <a href="/about" class="site-title"></a></footer>

2. 调整JavaScript逻辑 #

用document.querySelectorAll()获取所有对应类名的元素，再通过遍历给每个元素设置内容：

const copyrightDate = new Date();
const copyrightYear = copyrightDate.getFullYear();
const pageTitle = document.title;

// 批量处理所有copyright-year元素
document.querySelectorAll('.copyright-year').forEach(element => {
  element.innerHTML = copyrightYear;
});

// 批量处理所有site-title元素
document.querySelectorAll('.site-title').forEach(element => {
  element.innerHTML = pageTitle;
});

兼容旧浏览器的写法 #

如果需要适配不支持forEach的老浏览器，改用for循环遍历：

const copyrightElements = document.querySelectorAll('.copyright-year');
for (let i = 0; i < copyrightElements.length; i++) {
  copyrightElements[i].innerHTML = copyrightYear;
}

const titleElements = document.querySelectorAll('.site-title');
for (let i = 0; i < titleElements.length; i++) {
  titleElements[i].innerHTML = pageTitle;
}

内容的提问来源于stack exchange，提问作者Asma Binta Younus