title: Impact multiple same elements & avoid null errors when not in DOM, plain JavaScript vs jQuery
body: <p>Let's say I have several date <code>inputs</code>, which I'd like to change <code>color</code> after user input. With jQuery I could do:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('input[type="date"]').on('change', function() {
    var el = $(this).val();
    if (el === '') {
      $(this).css('color', '#9c9c9c');
    } else {
      $(this).css('color', '#000000');
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="date"] {
    color: #9c9c9c;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="date" placeholder="MM/DD/YYYY"&gt;
  &lt;input type="date" placeholder="MM/DD/YYYY"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But, when I try to achieve the same with plain JS (<code>document.querySelector()</code> or <code>document.querySelectorAll().forEach()</code>), I'm unable to. I can only make the first input work with the <code>document.querySelector()</code> approach: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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';
      }
    }
  });*/</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="date"] {
    color: #9c9c9c;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="date" placeholder="MM/DD/YYYY"&gt;
  &lt;input type="date" placeholder="MM/DD/YYYY"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Based on <a href="https://stackoverflow.com/questions/46267161/decument-queryselector-on-elements-not-in-dom">this excellent SO answer</a>, I'm also using a ternary operator to check if the element exists in the DOM first, otherwise I'm getting error on pages where the inputs are not in the DOM. </p>
  
  <p><strong>How to achieve this with plain JS &amp; avoiding null errors on non-existent DOM elements?</strong></p>