HTML

difference between first of type and first child

<div class="parent">
  <h1>Child</h1>   <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

Difference between first child and first element child

const ul = document.querySelector( 'ul' );

console.log( ul.firstElementChild );
console.log( ul.firstChild );

Difference between first child and first element child

const ul = document.querySelector( 'ul' );

console.log( ul.firstElementChild );
console.log( ul.firstChild );