querySelector, wildcard element match?

queryselectorall
queryselectorall wildcard class
javascript get element by attribute name
document queryselector() returns null
queryselector data attribute
document.queryselector click
queryselectorall not working
queryselector vs queryselectorall

Is there a way to do a wildcard element name match using querySelector or querySelectorAll? I see support for wildcards in attribute queries but not for the elements themselves.

The XML document I'm trying to parse is basically a flat list of properties and I need to find elements that have certain strings in their names.

I realize the XML document is probably in need of a restructuring if I need this but that's just not going to happen.

Any solution except going back to using the apparently deprecated XPath (IE9 dropped it) is acceptable.

[id^='someId'] will match all ids starting with someId.

[id$='someId'] will match all ids ending with someId.

[id*='someId'] will match all ids containing someId.

If you're looking for the name attribute just substitute id with name.

If you're talking about the tag name of the element I don't believe there is a way using querySelector

querySelectorAll, wildcard element match?, It's possible to combine selector by concatenating without any space. document. querySelectorAll("[id$='textBox'][id^='id1']"). Is there a way to do a wildcard element name match using querySelector or querySelectorAll? I see support for wildcards in attribute queries but not for the elements themselves. The XML document I’m trying to parse is basically a flat list of properties and I need to find elements that have certain strings in their names.

I was messing/musing on one-liners involving querySelector() & ended up here, & have a possible answer to the OP question using tag names & querySelector(), with credits to @JaredMcAteer for answering MY question, aka have RegEx-like matches with querySelector() in vanilla Javascript

Hoping the following will be useful & fit the OP's needs or everyone else's:

// basically, of before:
var youtubeDiv = document.querySelector('iframe[src="http://www.youtube.com/embed/Jk5lTqQzoKA"]')

// after     
var youtubeDiv = document.querySelector('iframe[src^="http://www.youtube.com"]');
// or even, for my needs
var youtubeDiv = document.querySelector('iframe[src*="youtube"]');

Then, we can, for example, get the src stuff, etc ...

console.log(youtubeDiv.src);
//> "http://www.youtube.com/embed/Jk5lTqQzoKA"
console.debug(youtubeDiv);
//> (...)

Element.querySelectorAll(), The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the� Is there a way to do a wildcard element name match using querySelector or querySelectorAll? I see support for wildcards in attribute queries but not for the elements themselves. The XML document I'm trying to parse is basically a flat list of properties and I need to find elements that have certain strings in their names.

Set the tagName as an explicit attribute:

for(var i=0,els=document.querySelectorAll('*'); i<els.length;
          els[i].setAttribute('tagName',els[i++].tagName) );

I needed this myself, for an XML Document, with Nested Tags ending in _Sequence. See JaredMcAteer answer for more details.

document.querySelectorAll('[tagName$="_Sequence"]')

I didn't say it would be pretty :) PS: I would recommend to use tag_name over tagName, so you do not run into interferences when reading 'computer generated', implicit DOM attributes.

Document.querySelectorAll(), Is there a way to do a wildcard element name match using querySelector or querySelectorAll? I see support for wildcards in attribute queries but not for the� The document.querySelector(), document.querySelectorAll(), Element.closest(), and Element.matches() methods all accept CSS selectors are their argument. One thing people often don’t realize is that you can pass in any valid CSS selector. That includes comma-separated selectors for targeting multiple different selectors. For example, in CSS, if you wanted to add a font-weight of bold to both

I just wrote this short script; seems to work.

/**
 * Find all the elements with a tagName that matches.
 * @param {RegExp} regEx  regular expression to match against tagName
 * @returns {Array}       elements in the DOM that match
 */
function getAllTagMatches(regEx) {
  return Array.prototype.slice.call(document.querySelectorAll('*')).filter(function (el) { 
    return el.tagName.match(regEx);
  });
}
getAllTagMatches(/^di/i); // Returns an array of all elements that begin with "di", eg "div"

querySelector, wildcard element match?, Is there a way to do a wildcard element name match using querySelector or querySelectorAll ? I see support for wildcards in attribute queries� The examples below show how to use wildcards in your CSS selectors. To use a selector you need to take advantage of the attribute selector, for example div[attribute=’property’] . The attribute selector can be used on any valid element attribute – id, class, name etc.

There is a way by saying what is is not. Just make the not something it never will be. A good css selector reference: https://www.w3schools.com/cssref/css_selectors.asp which shows the :not selector as follows:

:not(selector)  :not(p) Selects every element that is not a <p> element

Here is an example: a div followed by something (anything but a z tag)

div > :not(z){
 border:1px solid pink;
}

querySelector, wildcard element match?, The querySelectorAll function returns all elements it finds that match whatever selector you provide: var elements = document.querySelectorAll( "< CSS selector >" );� Definition and Usage The querySelector () method returns the first element that matches a specified CSS selector (s) in the document. Note: The querySelector () method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll () method instead.

Finding Elements In The DOM Using querySelector, querySelectorAll(css) returns all elements inside elem matching the given CSS selector. Here we look for all <li> elements that are last� Is there a way to do a wildcard element name match using querySelector or querySelectorAll? I see support for wildcards in attribute queries but not for the elements themselves. The XML document I'm trying to parse is basically a flat list of properties and I need to find elements that have certain strings in their names.

Searching: getElement*, querySelector*, Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of� For getting the id that begins or ends with a particular string in jQuery selectors, you shouldn’t use the wildcards $ ('#name*'), $ ('#name%'). Instead use the characters ^and $. The ^ is used is used to get all elements starting with a particular string. The $ is used is used to get all elements ending with a particular string. Example

document.querySelectorAll, I see support for wildcards in attribute queries Is there a way to do a wildcard element name match using querySelector or querySelectorAll? I see support for�

Comments
  • By "name" you mean the tag name?
  • @JaredMcAteer's answer is very worthy of getting accepted as an answer. Please consider.
  • Thanks, I meant the tag name.
  • hmm I can't do document.querySelectorAll("div.[id$='foo']")
  • The period in there is probably messing it up document.querySelectorAll("div[id$='foo']") IE8 only has partial QSA support, I think they only support CSS2.1 selectors, so these selectors won't work in IE8, but IE9+ will work.
  • This answer saved my life! Thank you!!
  • object returned by querySelectorAll does not necessarily support filter on all browsers(as it is not always a regular javascript array). Make sure to check this assertion in production, either before the script is generated(if the script is generated dynamically), or using condition statements.
  • Very nice answer... This was the closes match I found to my issue. I'm working with custom elements and features like this one are still manual work, sadly.