Last Updated: 2024-11-21

I had to do some trial and error in selecting elements on a page because I didn't understand how these two ways to selecting differed:

1 Descendants

Format: x y

  // descendants - i.e. anything el whose id ends with 'result' and is contained 
  // within the `#calculator_result` (at an arbitrary level)
  document.querySelectorAll("#calculator_result [id$=result]")

2. Direct Children

Format: x > y

  // direct children - i.e. anything el whose id ends with 'result' and is
  // IMMEDIATELY under #calculator_result
document.querySelectorAll("#calculator_result > [id$=result]")