JavaScript在HTML文檔中獲取h1元素並更新唯一ID

Question

我有一個舊的HTML文檔，其中包含沒有ID的H1元素。 我想要實現的是能夠使用JavaScript獲取所有h1，然后為每個h1添加一個唯一的ID。

我已經搜索過，但是找不到有效的解決方案。

Answer 1

嘗試使用document.getElementsByTagName("h1")獲取所有這些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();
    }
}