javascript - 影响多个相同元素并避免不在 DOM 中时发生 null 错误，纯 JavaScript 与 jQuery

Question

假设我有几个日期输入，我想在用户输入后更改颜色。使用 jQuery 我可以做到:

$('input[type="date"]').on('change', function() {
  var el = $(this).val();
  if (el === '') {
    $(this).css('color', '#9c9c9c');
  } else {
    $(this).css('color', '#000000');
  }
})

input[type="date"] {
  color: #9c9c9c;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" placeholder="MM/DD/YYYY">
<input type="date" placeholder="MM/DD/YYYY">

但是，当我尝试使用纯 JS(document.querySelector() 或 document.querySelectorAll().forEach())实现相同目标时，我不能。我只能使用 document.querySelector() 方法使第一个输入工作:

var el = document.querySelector('input[type="date"]');
el ? el.onchange = function() {
  if (this.value === '') {
    this.style.color = '#9c9c9c';
  } else {
    this.style.color = '#000000';
  }
} : "";

//tried also
/*document.querySelectorAll('input[type="date"]').forEach(function() {
   this.onchange = function() {
    if (this.value === '') {
      this.style.color = '#9c9c9c';
    } else {
      this.style.color = '#000000';
    }
  }
});*/

input[type="date"] {
  color: #9c9c9c;
}

<input type="date" placeholder="MM/DD/YYYY">
<input type="date" placeholder="MM/DD/YYYY">

基于this excellent SO answer ，我还使用三元运算符首先检查元素是否存在于 DOM 中，否则我会在输入不在 DOM 中的页面上收到错误。

如何使用纯 JS 实现此目的并避免不存在的 DOM 元素出现 null 错误？

Answer 1

当您使用document.querySelectorAll时，它始终返回一个数组。使用 forEach for 循环数组中的所有项目(数组可以为空，但它是空数组)。您可以使用 addEventListener 来监听 onchange 事件，示例如下:

var inputs = document.querySelectorAll('input[type="date"]');
inputs.forEach (function (item) {
  item.addEventListener('change', function () {
    this.classList.add("red");
  })
})

.red {
  background: red;
}

<input type="date">
<input type="date">
<input type="date">