使用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);