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/

Answer 2

使用querySelectorAll() 获取所有标题元素，然后遍历结果并为每个元素生成唯一的 id。

var headerElements = document.querySelectorAll('h1');
for(h in headerElements) {
    if(headerElements[h] instanceof Element) {
        headerElements[h].id=uniqueIDgenerator();
    }
}