Using document.querySelectorAll() to Select Buttons

Selecting All <button> Elements

To select every <button> on the page, simply use the tag name as the selector. For example:

const allButtons = document.querySelectorAll('button');
// allButtons is a NodeList of every <button> element in the document
console.log(allButtons); // e.g. NodeList(3) [button, button, button, …]

This returns a **NodeList** containing all <button> elements^[3][2]. In the above code, allButtons might look like NodeList(...) when logged, and you can access each button by index (e.g. allButtons[0]) or use methods like forEach. Treehouse’s example confirms that querySelectorAll('button') will “return **ALL** of the elements that match the selector, all the buttons in this case”^[3]. In practice, you can then loop over allButtons or call methods on each button to modify them or attach events.

Selecting Buttons by Class

To select buttons with a specific **CSS class**, prefix the class name with a **dot** (.) in the selector. For example, if you have <button class="primary">, use:

const primaryButtons = document.querySelectorAll('button.primary');
// primaryButtons is a NodeList of all <button> elements with class="primary"

This selects only <button> elements that also have the class **primary**. The dot in 'button.primary' means “tag <button> with class primary”. For instance, W3Schools shows a similar example with paragraphs: document.querySelectorAll("p.example") selects all <p> elements of class example^[4]. By analogy, document.querySelectorAll("button.primary") will select all <button> elements that have class="primary". In the code above, primaryButtons will be a NodeList (possibly empty if none match) containing only those buttons with the given class. You can then iterate over primaryButtons like any array to inspect or manipulate those buttons.

Selecting Buttons by Attribute

You can select elements based on **attributes** using **CSS attribute selectors**. For example, suppose your buttons have custom data attributes like <button data-action="save"> or <button data-action>. To select all buttons with a data-action attribute (regardless of value), use:

const actionButtons = document.querySelectorAll('button[data-action]');
// actionButtons is a NodeList of all <button> elements that have a data-action attribute

Here, [data-action] matches any element with that attribute. Similarly, you can match a specific value: 'button[data-action="save"]' would select only buttons where data-action="save". MDN provides an example using iframe[data-src] to select iframes with a data-src attribute^[5]; by the same principle, button[data-action] finds all buttons with data-action. In the code, actionButtons will include every <button> that carries the data-action attribute. You could then check or use the attribute (e.g. button.dataset.action) inside a loop or forEach.

Combining Class and Attribute Selectors

You can **chain multiple selectors** to narrow down elements. In CSS, writing selectors one after another without a comma means **“AND”** (all conditions must match). For example:

const saveButtons = document.querySelectorAll('button.special[data-action="save"]');
// saveButtons selects all <button> elements that have class="special" AND data-action="save"

In this selector, button.special ensures the element is a <button> with class special, and [data-action="save"] requires it to have data-action="save". Both conditions must be true. MDN shows combining selectors with commas (e.g. "div.note, div.alert" selects elements matching either selector^[6]). In our case, we aren’t using commas (which would select either/or); instead we directly concatenate selectors to refine the match. Thus 'button.special[data-action="save"]' picks all <button> elements that meet both criteria. For example, if your HTML has <button class="special" data-action="save">, that button would be included in saveButtons, while <button class="special"> without the attribute would not match.

Example: Attaching Event Listeners to All Selected Buttons

Once you have a NodeList of buttons (from any of the selectors above), you can **iterate over it** (e.g. using forEach or a loop) to add behavior. For example, to add a click listener to every button on the page:

const buttons = document.querySelectorAll('button');
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    console.log('Button clicked:', btn);
    btn.classList.toggle('active');
  });
});

This code calls querySelectorAll('button') to get all buttons, then uses forEach to attach a click handler to each one. When any button is clicked, it logs a message and toggles the **active** class on that button. A StackOverflow solution similarly demonstrates using querySelectorAll and forEach to add listeners to multiple elements:

js document.querySelectorAll('.box').forEach(box => box.addEventListener('click', () => box.classList.toggle('red')) );^[7]

In the same way, buttons.forEach(...) works because a **NodeList can be iterated over**. (If you needed to support very old browsers, you could convert the NodeList to an array or use a simple for loop instead.) The key point is that querySelectorAll gives a collection of elements, and you must **loop over that collection** to affect each element (you cannot call addEventListener directly on the NodeList itself).