How can I select one specific element without accidentally matching several?

Start with the kind of target you have in mind. If it has a known, unique ID, document.getElementById('status') is a direct choice: it returns that element or null if no element has that ID. IDs are intended to be unique; if a page accidentally contains duplicate IDs, this method returns the first matching element, so it does not reveal the duplication. [S1]

If you instead want to describe the target with CSS, use document.querySelector(...). It returns the first matching element, or null if nothing matches. [S2] The important distinction is that “first match” does not mean “the only match.” If several elements fit the selector, querySelector() still gives you just the first one.

Here is a small example using an assumed page element whose ID is status:

const status = document.getElementById('status');

if (status) {
  // Update the element here.
} else {
  // Handle the missing element here.
}

The check prevents the update from being attempted when no element was found. Choose a response appropriate to your page: you could skip an optional update or provide a fallback. The example assumes the page is meant to contain one element with that ID; it does not check whether duplicate IDs exist. getElementById() returning an element is not proof that the ID is unique. [S1]

Use querySelector() when a CSS selector expresses the target you want. For example, if the page is assumed to contain a button with class save-button, document.querySelector('button.save-button') returns the first matching button or null. [S2]

Make the selector describe the intended target, rather than a broad group such as 'button' if the page has several buttons. But remember: a more specific selector can still match multiple elements. If your task requires exactly one, inspect whether the page structure and selector really identify one, rather than relying on querySelector() to enforce uniqueness. The selector must also be valid CSS syntax; invalid syntax throws a SyntaxError rather than returning null. [S2]

Use querySelectorAll() when the task is to work with every match. It returns a static NodeList: it contains all matches, or is empty when there are none. Check its length before deciding what to do. [S3]

For example, assuming several notice elements may be present:

const notices = document.querySelectorAll('.notice');

if (notices.length === 0) {
  // Handle the case where no notices were found.
} else {
  // Handle every matching notice.
}

If you expected one notice, length also helps you spot when the selector matched more than one. Decide explicitly whether zero, one, or several matches are acceptable; do not silently treat a collection as a single element. These methods report matches, but the examples do not establish that your page’s markup is correct or that a chosen selector reflects your intended design.