JavaScript 获取 HTML 文档中的 h1 元素并更新唯一 ID

Question

我有一个遗留的 html 文档，其中包含没有 ID 的 h1 元素。我想要实现的是能够使用 JavaScript 获取所有 h1(s)，然后为每个添加一个唯一的 ID。

我已搜索但找不到有效的解决方案。

Answer 1

尝试使用 document.getElementsByTagName("h1") 获取所有这些。遍历它们，检查它们是否有 id，然后正常工作。尝试:

var h1s = document.getElementsByTagName("h1");
for (var i = 0; i < h1s.length; i++) {
    var h1 = h1s[i];
    if (!h1.id) {
        h1.id = "h1" + i + (new Date().getTime());
    }
}

演示: http://jsfiddle.net/kTvA2/

运行演示后，如果您检查 DOM，您会看到 4 个 h1 元素中的 3 个有一个新的、唯一的 id。排在第一位的 id 没有改变。

请注意，此代码需要在所有元素准备就绪/呈现后运行，这可以通过将代码放在 window.onload 处理程序中来实现。提供的演示设置为隐式运行代码。

---

更新:

使用 jQuery，您可以使用:

$(document).ready(function () {
    $("h1:not([id])").attr("id", function (i, attr) {
        return "h1" + i + (new Date().getTime());
    });
});

演示: http://jsfiddle.net/kTvA2/7/