querySelector wildcard element match

Question

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

User · Answer

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.

User · Answer

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  lt p gt  element   Here is an example  a div followed by something  anything but a z tag   div  gt   not z    border 1px solid pink

User · Answer

I was messing musing on one-liners involving querySelector    amp  ended up here   amp  have a possible answer to the OP question using tag names  amp  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  amp  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      gt   http   www youtube com embed Jk5lTqQzoKA  console debug youtubeDiv      gt

User · Answer

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

User · Answer

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

[javascript] querySelector, wildcard element match?

Examples related to javascript

Examples related to dom

Examples related to domparser

Examples related to selectors-api