使用JavaScript按值比较带class类名的div元素失效问题咨询

• 元素选择逻辑错误：document.getElementById("horarios") 获取的是id为horarios的父级容器，该元素本身没有demo类，调用classList.contains('demo')只会返回布尔值false，布尔类型变量不存在getAttribute方法，代码执行到此处会直接抛出异常中断运行。
• 类选择器用法错误：class属性可对应多个DOM元素，要选中所有带demo类的元素，需使用querySelectorAll('.demo')方法，返回的是符合条件的DOM节点集合，需要遍历集合才能逐个获取元素的自定义属性，无法直接对集合调用getAttribute方法。
• 补充规范提示：自定义属性建议遵循HTML的data-*命名规范，比如将value改为data-value，通过DOM元素.dataset.value的方式获取，可避免原生属性冲突问题。另外原代码中比较逻辑输出的then为拼写错误，正确写法为than。

以下代码实现和原id版一致的逻辑，取第一个demo类元素的时间值做比较：

<body>
<div id="horarios">
<div class="demo" data-value="5:40:55">Le valor</div>
<div class="demo" data-value="5:40:55">Le valor1</div>
<div class="demo" data-value="5:40:55">Le valor2</div>
</div>
<script>
const regex = new RegExp(':', 'g');
const timeStr1 = '5:50:55';
// 选中父容器下第一个class为demo的元素
const targetElement = document.querySelector('#horarios .demo');
const timeStr2 = targetElement.dataset.value;

if(parseInt(timeStr1.replace(regex, ''), 10) < parseInt(timeStr2.replace(regex, ''), 10)){
  console.log('timeStr1 is smaller than timeStr2');
} else {
  console.log('timeStr2 is smaller than timeStr1');
}
</script>
</body>

如果需要遍历所有demo类元素逐一比较，可使用以下逻辑：

const demoList = document.querySelectorAll('#horarios .demo');
const timeNum1 = parseInt(timeStr1.replace(regex, ''), 10);
demoList.forEach((item, index) => {
  const timeNum2 = parseInt(item.dataset.value.replace(regex, ''), 10);
  if(timeNum1 < timeNum2){
    console.log(`第${index+1}个demo元素：timeStr1更小`);
  }else{
    console.log(`第${index+1}个demo元素：timeStr2更小`);
  }
})

内容的提问来源于stack exchange，提问作者Rob Carcacho Maldonado Valdes