使用Vanilla JS更改多個h1和h2元素的值

Question

我希望遍歷並更新網站上和元素中的文本。 我已經嘗試了以下方法，但是它不會更新H1標簽。

document.getElementsByTagName("H1").innerHTML = "My New H1";

document.getElementsByTagName("H1")[0].innerHTML = "My New H1";

我還需要能夠獲取頁面上元素的數量，還可以遍歷每個元素並更新它們？ 您將如何在Vanilla JS中執行此操作？ 它不能使用jQuery。

Answer 1

可能是您在其他代碼中有錯誤。 這應該工作

document.getElementsByTagName("h1")[0].innerHTML = "My New H1";

您也可以使用querySelectorAll

document.querySelectorAll("h1")[0].innerHTML = "My New H1";

querySelectorAll和getElementsByTagName不區分大小寫，因此應該可以在H1和h1工作

對於循環，可以使用（ES5）：

var elems = document.querySelectorAll('h1');
if (elems.length) { 
  for(var i=0; i<elems.length; i++){
    elems[i].innerHTML = 'text';
  }
}

Answer 2

如果您有多個標簽Hx，請使用for()遍歷集合。

var tagsh1 = document.querySelectorAll('h1');
for(var i=0; i<tagsh1.length; i++){
  tagsh1[i].innerHTML ='some text';
}

Answer 3

document.getElementsByTagName("H1")[0].innerHTML = "My New H1";

上面的代碼應該在您的第一個h1標簽節點上起作用。

要遍歷所有h1元素，可以使用forEach函數。

var h1 = document.getElementsByTagName("h1");
h1.forEach((d,i)=>d.innerText = "New h1 text " + i);