Queryselector, Wildcard Element Match

querySelectorAll, wildcard element match?

It's possible to combine selector by concatenating without any space.

document.querySelectorAll("[id$='textBox'][id^='id1']")

How do I wildcard match a class name inside querySelectorAll?

[class^="foo bar row-id"] will match what you're looking for. This searches for all class staring with .foo bar row-id. You can swap class for any other HTML attribute as well.

[class$="foo bar row-id"] will match class ending with your query.

[class*="foo bar row-id"] will match all class that contains your query.

Example:

var items = document.querySelectorAll('[class^="foo bar row-id"]');

document.querySelectorAll('a[id=*]'); and wildcard or regex?

This grabs all anchor elements with an id attr. set:

document.querySelectorAll('a[id]');

This grabs all the anchor elements with no id:

document.querySelectorAll('a:not([id])');

Select each class starting with a given string in Pure javaScript

Use document.querySelectorAll and wild card selector. Here class^ mean that this query selector will select any element who have a class starting with fi

let k = document.querySelectorAll('[class^="fi"]');console.log(k)

<i class="fi-xmsl-user"></i><i class="fi-stsl-map"></i>

querySelector not detecting element until it's inspected

I had similar problem and what helped me was Get element from within an iFrame

Depending on your use case, you might want to switch the "context" of your console inputs... at least for the code testing purpose this might be useful and will not produce "null" results. (Image example included at the bottom)

However, please note that accessing iframe with different domain is not possible.
When using document.querySelector(".aAtlvd.bl").contentWindow.document I am getting this message:

Uncaught DOMException: Blocked a frame with origin "https://mail.google.com" from accessing a cross-origin frame.

For which you are going to need solution from SecurityError: Blocked a frame with origin from accessing a cross-origin frame
Which is basically disabling part of your browser security policies.

Example:

Why does querySelector('div span') match even though querySelector('div') does not?

console.log(p.querySelector('div'))

Finds nothing because

The querySelector() method of the Element interface returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors. -- mdn (emphasis mine)

console.log(p.querySelector('div span'))

Matches because

The entire hierarchy of elements is considered when matching, including those outside the set of elements including baseElement and its descendants; in other words, selectors is first applied to the whole document, not the baseElement, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of baseElement. The first match of those remaining elements is returned by the querySelector() method. -- mdn (emphasis mine):

Thank you evolutionxbox and G-Cyrillus for your comments.

document.querySelectorAll to find item based on multiiple condition?

The first .querySelector() call will only return a single element. If that does not match the selector in the querySelectorAll() call then no elements will be retured.

Try using a single selector, such as:

var products = document.querySelector("div.productDisplay[data-productId='" + id  + "']");

Javascript selector with wildcard

You can use a combination of multiple attribute selectors.

If you want to select all elements where the attribute aria-describedby starts with a certain string you can first select it using the ^= operator. Combining with the $= operator you can limit the selection even further and define how the end of the attribute should look like.

const prefix = 'gridx_Grid_';const suffix = '-9';
const collection = document.querySelectorAll(  `[aria-describedby^="${ prefix }"][aria-describedby$="${ suffix }"]`);
collection.forEach( element => console.log( element.innerText ) );

<div aria-describedby="gridx_Grid_13-9">Text 1</div><div aria-describedby="gridx_Grid_10-10">Text 2</div><div aria-describedby="gridx_Grid_11-9">Text 3</div>

---

Related Topics