javascript - 如何使用 javascript 更改 html 页面的“h1”标签的内容？

Question

当使用javascript加载页面时，我需要更改我的html文件中所有“h1”标签的内容。

所以我写了下面的代码

window.onload = function () {
    var h1html = document.createElement("h1");
    var h1htmltext = document.createTextNode("header 1");

    h1html.appendChild(h1htmltext);

    document.getElementsByTagName("h1").appendChild(h1html);
};

Answer 1

如果你确定你只有一个h1标签，你可以简单地做

window.onload = function () {
    document.getElementsByTagName("h1")[0].innerHTML = "header 1";
}

如果存在多个h1标签，您可以这样做

window.onload = function () {
    var h1Elems = document.getElementsByTagName("h1");
    var pos;
    for (pos in h1Elems) {
        h1Elems[pos].innerHTML = "header 1";
    }
}

Answer 2

用这个：

for(var i = 0, elems = document.getElementsByTagName('h1'); i < elems.length; i++) { 
   elems[i].innerHTML = "new";
}

小提琴

Answer 3

您需要更改每个元素的 innerHTML，例如

function changeall(){
    var headers=document.getElementsByTagName("h1");
    var newheadertext="hello";
    for(var i in headers){
         headers[i].innerHTML=newheadertext;
    }
}

Answer 4

getElementsByTagName返回一个节点列表；你需要遍历它。

var headers = document.getElementsByTagName("h1");

for(var i = 0; i < headers.length; i++) {
    var header = headers[i];
    var text = document.createTextNode("header 1");

    while(header.childNodes.length) {
        header.removeChild(header.firstChild);
    }

    header.appendChild(text);
}

我在那里做了一些假设：

• 您实际上并不想嵌套标题
• 你想替换内容
• 您想要一种符合旧标准的方式

如果您不需要对旧浏览器的支持，只需使用textContent：

var headers = document.getElementsByTagName("h1");

for(var i = 0; i < headers.length; i++) {
    headers[i].textContent = "header 1";
}