javascript - 如何将 javascript 与具有相同 ID 的多个元素一起使用？

Question

我需要使用 javascript 操作具有某些 id 的某些元素。我不控制代码，所以不幸的是我不能用唯一的 ID 重写代码。例如:

<div id="abc">
     <p class="xyz">10</p>
</div>

<div id="abc">
   <p class="xyz">20</p>
</div>

p标签内的内容保证是唯一的。所以，我需要根据p标签里面的内容进行一些操作。

但是如果我使用 DOM 按 id 选择，将选择哪个 div，我如何确保我选择了所需的元素？

Answer 1

显然，拥有唯一 ID 是最佳选择，但是，在不可避免的情况下，您可以这样使用它:

var abcs = document.querySelectorAll("#abc");

abcs[0].querySelector(".xyz").style.background = "green";

abcs[1].querySelector(".xyz").style.background = "red";

<div id="abc">
     <p class="xyz">10</p>
</div>

<div id="abc">
   <p class="xyz">20</p>
</div>

请注意使用 document.querySelectorAll() 而不是 document.getElementById()。这是因为 querySelectorAll 会抓取所有匹配的元素，而 getElementById() 只会抓取第一个元素。

更具体到你的例子:

var abcs = document.querySelectorAll("#abc");


function setAbcByContent(contentValue, color) {
  abcs.forEach(function (elem) {
    if (elem.querySelector(".xyz").innerText === contentValue) {
      elem.style.background = color;
    }
  });
}

setAbcByContent("10", "green");
setAbcByContent("20", "red");

<div id="abc">
     <p class="xyz">10</p>
</div>

<div id="abc">
   <p class="xyz">20</p>
</div>