如何使用具有相同ID的多个元素的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是最佳的，但是，在不可避免的情况下，您可以像这样使用它：

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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

更具体到您的示例：

＆＃13;

＆＃13;

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");

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;