document.querySelector() تعيد أول عنصر في الصفحة يطابق محدد CSS:

document.querySelector('h1');            // first h1
document.querySelector('#menu');         // by id
document.querySelector('.card');         // first .card
document.querySelector('input[type="email"]');

إذا لم تجد شيئًا تعيد null.

لكل العناصر

document.querySelectorAll('.card').forEach(card => {
  card.classList.add('ready');
});

داخل عنصر محدد

const menu = document.querySelector('#menu');
menu.querySelector('a');  // first link inside the menu

ميزتها أنها تستخدم المحددات نفسها التي تعرفها من CSS.