javascript - 如何使用具有相同 id 的多个 elememts 的 javascript？

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>