使用 querySelectorAll 选择多个元素并在 JavaScript 中应用事件答案

【问题标题】：Selecting multiple elements with querySelectorAll and applying event in JavaScript使用 querySelectorAll 选择多个元素并在 JavaScript 中应用事件
【发布时间】：2022-02-14 11:00:46
【问题描述】：

输入上有一个 onchange 事件，并希望它在更改时使用“number”类更改跨度的值，因此这里是 HTML：

function myFunction() {
  var x = document.getElementById("myText").value
  document.querySelectorAll(".number").innerText = x
}

<div class="uper-container">
  <p>Metric/Imperial unit conversion</p>
  <!-- *********************************************************************************************** -->
  <!-- this input will change the value of 6's span below with the class of "number" -->
  <!-- ********************************************************************************************** -->
  <input type="text" id="myText" placeholder="number here" value="20" onchange="myFunction()">
</div>
<div class="lower-container">
  <p>Length(Meter/Feet)</p>
  <p>
    <span class="number"></span> meters = <span class="d"></span>feet |
    <span class="number"></span> feet = <span class="d"></span>meters
  </p>
  <p>Volume(Liters/Gallons)
    <</p>
      <p>
        <span class="number"></span> liter = <span class="d"></span>gallon |
        <span class="number"></span> gallon = <span class="d"></span>liter
      </p>
      <p>Mass(Kilograms/Pounds)</p>
      <p>
        <span class="number"></span> kilogram = <span class="d"></span>pound |
        <span class="number"></span> pound = <span class="d"></span>kilogram
      </p>
</div>

那么如何使 class="number" 的 span 与 input id="myText" 具有相同的值？还有一件事是我使用 scrimba 编辑器。

【问题讨论】：

标签： javascript html

【解决方案1】：

与 jQuery 不同，Vanilla JS 不会对 querySelectorAll 通过内联调用返回的每个节点执行 innerText。您需要遍历它们。

下面的代码应该可以工作：

function myFunction() {
    var x = document.getElementById("myText").value;
    var spans = document.querySelectorAll(".number");
    for (let i = 0; i < spans.length; i++) {
        spans[i].innerText = x;
    }
}

【讨论】：

这并不奇怪，因为querySelectorAll 返回一个NodeList。 jQuery 增加了便利方法。
当然：developer.mozilla.org/en-US/docs/Web/API/Document/…。来自文档：“返回匹配元素的 NodeList 后，您可以像检查任何数组一样检查它。如果数组为空（即其长度属性为 0），则找不到匹配项。否则，您可以使用标准数组表示法来访问列表的内容。您可以使用任何常见的循环语句"
querySelector 只会返回第一个匹配项。它返回一个节点。
我不会说“提供信息”。 querySelectorAll 只获取节点并在 NodeList 中返回它们。通过检查其length，您将知道找到了多少个节点。然后，您可以根据需要对其中一个、几个或全部执行操作。
讨厌 jQuery 已经流行了多年，但它确实很方便。（当然不是说你讨厌。）

【解决方案2】：

您也可以使用 for-of 循环。

function myFunction() {
    const x = document.getElementById("myText").value;
    const numberElements = document.querySelectorAll(".number");

    for (let element of numberElements) {
        element.innerText = x;
    }
}

【讨论】：