js auto selector dom by providing id All In One

there’s a global variable named by id that references the element

<button id="btn">Subscribe</button>

<script>
  // auto selector by id ✅
  btn.addEventListener('click', () => {
    console.log('click btn');
  });
  let click = new Event("click");
  btn.dispatchEvent(click);
</script>

<button id="btn">Subscribe</button>

<script>
  // querySelector
  const btn = document.querySelector(`#btn`);
  btn.addEventListener('click', () => {
    console.log('click btn');
  });
  let click = new Event("click");
  btn.dispatchEvent(click);
</script>

demo

Chrome

Safari

closest

closest(selectors);

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

const el = document.getElementById('div-03');

// the closest ancestor with the id of "div-02"
console.log(el.closest('#div-02')); // <div id="div-02">

// the closest ancestor which is a div in a div
console.log(el.closest('div div')); // <div id="div-03">

// the closest ancestor which is a div and has a parent article
console.log(el.closest("article > div")); // <div id="div-01">

// the closest ancestor which is not a div
console.log(el.closest(":not(div)")); // <article>

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest