使用javascript循环遍历html div并更改每个div的内部html答案

【问题标题】：Looping through html div with javascript and changing the inner html of each div使用javascript循环遍历html div并更改每个div的内部html
【发布时间】：2022-01-06 20:19:09
【问题描述】：

<!DOCTYPE html>
<html style="background-color: #D1D1D1 ">

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="./main.css" />
</head>
<body id="body">

    <h1 id="headerTitle"></h1>

    <div>
        <p id="header">November 29th</p>
    </div>

    <div>
        <p id="header">November 29th</p>
    </div>

    <div>
        <p id="header">November 29th</p>
    </div>

    <script src="./main.js"></script>
</body>
</html>

我正在尝试遍历正文并进入每个 div 并更改 11 月 29 日的文本。我得到的最接近的是这个：

var body = document.getElementsByTagName("div")

for (i = 0; i < body.length; i++) {
    document.getElementById("header").innerHTML = "Hello World!";
}

但它只会更改第一个 div 并停止。

【问题讨论】：

多个元素不能共享同一个id。

标签： javascript html loops dom-events

【解决方案1】：

//只要改变div里的数据就可以了

var div_s = document.getElementsByTagName("div")

    for (i = 0; i < div_s.length; i++) {
        div_s[i].innerHTML = "Hello World!";
    }

或要更改 p 中的数据，您需要每个标签的唯一 ID，如下所示。

<div title = "header1">
    <p id="header1">November 29th</p>
</div>

<div title = "header2">
    <p id="header2">November 29th</p>
</div>

<div title="header3">
    <p id="header3">November 29th</p>
</div>
<script>
    var divs = document.getElementsByTagName('div')

    for (i = 0; i < divs.length; i++) {
        document.getElementById(divs[i].title).innerHTML = "Hello World!";
    }
</script>

【讨论】：

【解决方案2】：

如前所述，您不应拥有超过 1 个具有相同 id 的元素。将 id 更改为 class，此代码应该可以工作：

[...document.querySelectorAll('.header')].map((elem) => elem.textContent = 'Hello World!');

【讨论】：

【解决方案3】：

它只是改变了第一个div，因为一个 id 应该只属于一个元素，所以它在找到那个元素后停止。将p 标签上的 id 字段更改为class，您可以使用

let body = document.getElementsByClassName()
for (let element of body) {
    element.innerHTML = "..."
}

【讨论】：