What is the best way to obtain various classed elements within a single node list?

Question

What is the best way to obtain various classed elements within a single node list?

I'm trying to select two different elements with different classes within the same node list. For example, if I could use this code:

document.querySelectorAll(".a, .b");

It would mean selecting elements with the ".a" class, but also including any elements with the ".b" class that are in between them in the list, not just at the end. They should be placed according to their position in the structure as if they all had the same class.

For instance, if I have the following HTML:

<div class="a">
<div class="b">
<div class="a">

The first element with the ".a" class would be listed first, followed by the ".b" element, and then the second element with ".a" class would be third in the list.

javascript css nodelist

Answer 1

Answer №1

Perhaps I may not fully grasp your inquiry, but it appears that the solution you have should suffice:

const elements = document.querySelectorAll(".x, .y");

console.log(elements);
for (let j = 0; j < elements.length; j++) {
    console.log(elements[j]);
}

http://jsfiddle.net/z8pcfs1j/2/

Answer 2

Perhaps I may not fully grasp your inquiry, but it appears that the solution you have should suffice:

const elements = document.querySelectorAll(".x, .y");

console.log(elements);
for (let j = 0; j < elements.length; j++) {
    console.log(elements[j]);
}

http://jsfiddle.net/z8pcfs1j/2/

What is the best way to obtain various classed elements within a single node list?

Answer №1

Similar questions

"Typescript React encounters issues with recognizing props handed over to a functional component, resulting in error code ts 274

The gap persists even when overflow is used in CSS

Disabling the default validation message in HTML form inputs

As you scroll, the header gradually reduces in size, but at the point where the reduction occurs, a slight flick

Javascript prototype issue - Variable stays undefined

Every time I attempt to publish a new page on my website, it doesn't load all at once. Instead, it loads in

The password prompt window refuses to align with the center of the screen. This

When the collapse button is clicked, I aim to increase the top value by 100. Subsequently, upon a second click, the top value should

WebStorm alerts users with a warning about an incomplete statement in JavaScript code style

CSS with a "true" space for a fixed element (ensuring the previous element does not overlap with the current fixed element)

The transition from Vuetify3's VSimpleTable to VTable is ineffective and unsuccessful

Modify the color of the footer area and eliminate any underlines present

Apply the :after pseudo-class to the specified element

The medium breakpoint is utilized in Bootstrap 4 for printing purposes

What is the method for printing a webpage that has been modified using JavaScript?

Tips for centering Font Awesome icons in your design:

What steps are necessary to add a Contact Us form to my HTML website?

Modify the code to interpret a new JSON structure

Error: The function `push` cannot be used on the variable `result` (TypeError)

Generic partial application fails type checking when passing a varargs function argument