JavaScript Id / Class Targetting

Question

我只想知道JavaScript是否可以设置与其他ID相同的单独ID的变量，但由于class / div分配仍然是分开的。这是我的代码。

HTML（摘录）

<div id="actions">
  <a class="action" id="0"><br>0</a>
  <a class="action" id="1"><br>1</a><br>
  <a class="action" id="2"><br>2</a>
  <a class="action" id="3"><br>3</a>
</div>
<div id="status">
  <a class="status" id="0" width="100" height="50"></a>
  <a class="status" id="1" width="100" height="50"></a>
  <a class="status" id="2" width="100" height="50"></a>
  <a class="status" id="3" width="100" height="50"></a>
  <a class="status" id="4" width="100" height="50"></a>
</div>

CSS（摘录）

#actions  {
    position: relative;
    left: 150px;
    top: 50px;
}
.action  {
    display: inline-block;
    box-shadow: inset 0px 0px 50px rgba(0, 0, 0, .5);
    width: 125px;
    height: 60px;
    background: #FFF;
    border: 1px solid #000;
    text-align: center;
    margin-left: 25px;
}

JavaScript（未知和写入尝试）

var wood = document.getElementByClass("actions") #nope
var actions = {
 "attack": document.getElementById("0").getElementByClassName("action"); #not even possible           

Answer 1

According to the w3c spec (emphasis mine):

  

值必须在元素的主子树中的所有ID中是唯一的，并且必须至少包含一个字符。该值不得包含任何空格字符。

JS在这种情况下无关紧要。有效的HTML不得包含重复的ID。

如果您只想以不同方式关联数据或管理标识符，则必须使用其他属性。

我建议使用<div id="actions"> <a class="action" data-id="0"><br>0</a> <a class="action" data-id="1"><br>1</a><br> <a class="action" data-id="2"><br>2</a> <a class="action" data-id="3"><br>3</a> </div> <div id="status"> <a class="status" data-id="0" width="100" height="50"></a> <a class="status" data-id="1" width="100" height="50"></a> <a class="status" data-id="2" width="100" height="50"></a> <a class="status" data-id="3" width="100" height="50"></a> <a class="status" data-id="4" width="100" height="50"></a> </div> 属性，尤其是因为您可以通过dataset API访问它们：

npm install -g node-inspector