如何对具有相同 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标签里面的内容进行一些操作。

但是如果我通过 id 使用 DOM 到 select，div 中的哪个会被 selected，我如何确保我 select 所需元素 ?

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>

如何对具有相同 ID 的多个元素使用 javascript？

How to use javascript with multiple elememts having the same id?

html

javascript

dom

ambiguity

更具体的例子：