querySelectorAll 不适用于多个相同的 id [重复]答案

【问题标题】：querySelectorAll not working for multiple same id [duplicate]querySelectorAll 不适用于多个相同的 id [重复]
【发布时间】：2020-10-26 17:36:37
【问题描述】：

如何解决？它不影响 HTML。我想为所有具有相同 id 的 a 标签从 javascript 添加 href。谢谢！

<a id='mySrct' style='background-color:red;color:#fff;border-radius:25px;padding:3px 8px;float:right;'>Demo</a>
<a id='mySrct' style='background-color:red;color:#fff;border-radius:25px;padding:3px 8px;float:right;'>Demo</a>
<a id='mySrct' style='background-color:red;color:#fff;border-radius:25px;padding:3px 8px;float:right;'>Demo</a>


<script>                
var name = "google.com"; 
var elms = document.querySelectorAll("#mySrct");
elems.forEach((elem) =< {
elem.href = "www." + name;
});
</script>

【问题讨论】：

Duplicate of How to get the div that has a duplicated id using querySelector()?.
每个 DOM 元素都应该有一个唯一的 ID。
ID 必须是唯一的 stackoverflow.com/questions/9454645/…

标签： javascript html foreach queryselectall

【解决方案1】：

对于您的代码，元素名称和箭头功能不正确。检查下面的代码。

var elems = document.querySelectorAll("#mySrct");

<a id='mySrct' style='background-color:red;color:#fff;border-radius:25px;padding:3px 8px;float:right;'>Demo</a>
    <a id='mySrct' style='background-color:red;color:#fff;border-radius:25px;padding:3px 8px;float:right;'>Demo</a>
    <a id='mySrct' style='background-color:red;color:#fff;border-radius:25px;padding:3px 8px;float:right;'>Demo</a>


    <script>                
    var name = "google.com"; 
    var elems = document.querySelectorAll("#mySrct");
    elems.forEach((elem) => {
    elem.href = "www." + name;
    });
    </script>

【讨论】：

【解决方案2】：

您不能有多个具有相同 id 的元素。尝试这样做：

var name = "https://www.google.com";
var elems = document.getElementsByClassName("mySrct");
var run = elems.href = name;

.mySrct {
  background-color: red;
  color: #fff;
  border-radius: 25px;
  padding: 3px 8px;
  float: right;
}

<a class='mySrct' href="">Demo</a>
<a class='mySrct' href="">Demo</a>
<a class='mySrct' href="">Demo</a>

【讨论】：

【解决方案3】：

正如其他几个人所说，id 的目的是唯一的。但是，您可能会以这种方式滥用它。

const elems = document.querySelectorAll('[id="no-proper-id"]');
for(const elem of elems) {
  console.log(elem.innerHTML);
}

<div id="no-proper-id">A</div>
<div id="no-proper-id">B</div>
<div id="no-proper-id">C</div>
<div id="no-proper-id">D</div>
<div id="no-proper-id">E</div>

【讨论】：