querySelector, Platzhalterelementübereinstimmung?

133

Gibt es eine Möglichkeit, eine Wildcard-Elementnamenübereinstimmung mit querySelectoroder querySelectorAlldurchzuführen? Ich sehe Unterstützung für Platzhalter in Attributabfragen, aber nicht für die Elemente selbst.

Das XML-Dokument, das ich analysieren möchte, ist im Grunde eine flache Liste von Eigenschaften, und ich muss Elemente finden, deren Namen bestimmte Zeichenfolgen enthalten.

Mir ist klar, dass das XML-Dokument wahrscheinlich einer Umstrukturierung bedarf, wenn ich dies benötige, aber das wird einfach nicht passieren.

Jede Lösung, außer die Verwendung des scheinbar veralteten XPath (IE9 hat ihn gelöscht), ist akzeptabel.

Erik Andersson
quelle
Mit "Name" meinen Sie den Tag-Namen?
Kennytm
1
Die Antwort von @ JaredMcAteer ist es sehr wert, als Antwort akzeptiert zu werden. Beachten Sie bitte.
RBT

Antworten:

345

[id^='someId']stimmt mit allen IDs überein, die mit beginnen someId.

[id$='someId']wird mit allen IDs übereinstimmen, die mit enden someId.

[id*='someId']stimmt mit allen IDs überein, die enthalten someId.

Wenn Sie nach dem nameAttribut suchen, ersetzen Sie es einfach iddurch name.

Wenn Sie über den Tag-Namen des Elements sprechen, glaube ich nicht, dass es einen Weg gibt, ihn zu verwenden querySelector

JaredMcAteer
quelle
4
Danke, ich meinte den Tag-Namen.
Erik Andersson
hmm ich kann nicht document.querySelectorAll ("div. [id $ = 'foo']")
SuperUberDuper
4
Die Zeit dort ist wahrscheinlich document.querySelectorAll("div[id$='foo']")durcheinander. IE8 hat nur teilweise QSA-Unterstützung. Ich denke, sie unterstützen nur CSS2.1-Selektoren, daher funktionieren diese Selektoren in IE8 nicht, aber IE9 + wird funktionieren.
JaredMcAteer
Diese Antwort hat mir das Leben gerettet! Danke dir!!
Menas
28

Ich habe über Einzeiler mit querySelector () nachgedacht und bin hier gelandet und habe eine mögliche Antwort auf die OP-Frage mit Tag-Namen und querySelector () erhalten, mit Credits an @JaredMcAteer für die Beantwortung meiner Frage, auch bekannt als RegEx-like stimmt mit querySelector () in Vanille-Javascript überein

In der Hoffnung, dass Folgendes nützlich ist und den Bedürfnissen des OP oder allen anderen entspricht:

// 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"]');

Dann können wir zum Beispiel das src-Zeug bekommen, etc ...

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

Legen Sie den tagName als explizites Attribut fest:

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

Ich brauchte dies selbst für ein XML-Dokument mit verschachtelten Tags, die auf enden _Sequence. Weitere Informationen finden Sie in der Antwort von JaredMcAteer .

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

Ich habe nicht gesagt, dass es hübsch wäre :) PS: Ich würde empfehlen, tag_nameüber tagName zu verwenden, damit Sie beim Lesen von 'computergenerierten' impliziten DOM-Attributen nicht auf Interferenzen stoßen.

Lorenz Lo Sauer
quelle
8

Ich habe gerade dieses kurze Drehbuch geschrieben. scheint zu funktionieren.

/**
 * 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"
Cruzanmo
quelle
Das von querySelectorAll zurückgegebene Objekt unterstützt nicht unbedingt Filter in allen Browsern (da es sich nicht immer um ein reguläres Javascript-Array handelt). Stellen Sie sicher, dass Sie diese Zusicherung in der Produktion überprüfen, entweder bevor das Skript generiert wird (wenn das Skript dynamisch generiert wird) oder indem Sie Bedingungsanweisungen verwenden.
Dmitry
Sehr schöne Antwort ... Dies war das Abschlussspiel, das ich zu meinem Problem gefunden habe. Ich arbeite mit benutzerdefinierten Elementen und Funktionen wie diese sind leider immer noch Handarbeit.
Codepleb
-1

Es gibt einen Weg zu sagen, was nicht ist. Mach einfach das nicht etwas, was es niemals sein wird. Eine gute CSS-Selektorreferenz: https://www.w3schools.com/cssref/css_selectors.asp, die den: not-Selektor wie folgt anzeigt:

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

Hier ist ein Beispiel: ein div gefolgt von etwas (alles andere als ein az-Tag)

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