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.
This question is related to
javascript
dom
domparser
selectors-api
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"
[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
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;
}
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);
//> (...)
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.
Source: Stackoverflow.com