Handy DOM

handy dom stuff.

valueAsNumber

Get actual numbers.

<input id="a" type="number" />
<script>
  a.addEventListener('input', (e) => {
    console.log(typeof e.target.value); // string
    console.log(typeof e.target.valueAsNumber); // number
  });
</script>

valueAsDate

Get actual dates.

<input id="d" type="date" />
<script>
  d.addEventListener('input', (e) => {
    console.log(e.target.value); // string
    console.log(e.target.valueAsDate); // object
  });
</script>

document.createDocumentFragment

Create DOM trees off screen, in memory, and without causing reflows.

const real = document.querySelector('#ul');
const fragment = document.createDocumentFragment();
const letters = ['a', 'b', 'd'];
// Build our DOM nodes in memory.
letters.forEach((letter) => {
  const li = document.createElement('li');
  li.textContent = letter;
  li.classList.add(`list-item ${letter}`)
  fragment.appendChild(li);
});
// Append fragment "tree" all at once.
real.appendChild(fragment);