求助：如何用JavaScript批量为div设置与自身文本一致的title属性？

问题根源 #

1. HTML规范问题：多个<div>用了同一个id="id-text1"，HTML里id必须是页面唯一的，这直接导致getElementById只能拿到第一个匹配的元素。
2. JS逻辑问题：
   • 提前用getElementById获取了单个元素，forEach循环里一直操作这个固定元素，自然只会修改第一个div的title。
   • window.onload = ChangeTitle()是直接执行了函数，把返回值（undefined）赋值给了onload，正确做法是赋值函数本身。

修正后的代码 #

先修复HTML的id重复问题 #

<div class="example">
<div class="text1" id="id-text1">Text Example 1</div>
</div>

<div class="example">
<div class="text1" id="id-text2">Text Example 2</div>
</div>

<div class="example">
<div class="text1" id="id-text3">Text Example 3</div>
</div>

修正后的JavaScript #

function setDivTitles() {
  // 选中所有class为text1的div
  document.querySelectorAll('.text1').forEach(function(div) {
    // 给当前循环到的div设置title为自身文本内容
    div.setAttribute('title', div.textContent.trim());
  });
}

// 页面加载完成后执行函数
window.onload = setDivTitles;

更简洁的ES6写法 #

如果熟悉ES6语法，还可以写成：

window.onload = () => {
  document.querySelectorAll('.text1').forEach(div => {
    div.title = div.textContent.trim();
  });
};

关键说明 #

• querySelectorAll('.text1')会获取所有class为text1的元素，返回一个可遍历的NodeList。
• forEach遍历每个元素时，每次循环的div就是当前要处理的元素，直接操作它就能对应修改每个div的title。
• div.title是setAttribute('title', ...)的简写，效果完全一样。
• trim()用来去除文本前后的空白字符，避免title里出现多余空格。

内容的提问来源于stack exchange，提问作者hezmieg