javascript - 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();
    }
}