javascript - 使 getElementsByClassName 定位到每个元素

Question

我试图让这个脚本以我的两个具有相同类名的类元素为目标，但它只以第一个为目标。我怎样才能让它同时定位到具有相同类名的两个或所有类？

https://jsfiddle.net/cprtkhmd/2/ `

var d = new Date();
var month = d.getMonth() + 1; //.getMonth() is 0-11
var day = d.getDate();

if (day < 10) {
  day = '0' + dd;
}

if (month < 10) {
  month = '0' + month;
}

if (document.getElementsByClassName( 'date-display-single day' )[0].innerHTML == `${day}.${month}`) {
  document.getElementById("mydivid").className += " today";
}

.today {
  border: 2px solid red;
  color: red;
}

<div id="mydivid">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

<div id="mydivid">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

`

Answer 1

您遇到的问题是页面上有非唯一的 id 属性。所有 id 值对于 DOM 都应该是唯一的。

请参阅下面的示例，了解如何通过引用父节点来解决此问题。本质上，您可以遍历具有给定类名的所有元素并访问 parentNode 属性以访问其父节点以修改 CSS。

var elements = document.getElementsByClassName( 'date-display-single day' );

for(var i=0; i<elements.length; i++) {
    if(elements[i].innerHTML == `${day}.${month}`) {
        elements[i].parentNode.className += " today";
    }
}