querySelector, correspondance d'élément générique?

134

Existe-t-il un moyen de faire une correspondance de nom d'élément générique en utilisant querySelectorou querySelectorAll? Je vois la prise en charge des caractères génériques dans les requêtes d'attribut mais pas pour les éléments eux-mêmes.

Le document XML que j'essaie d'analyser est essentiellement une liste plate de propriétés et j'ai besoin de trouver des éléments qui ont certaines chaînes dans leurs noms.

Je me rends compte que le document XML a probablement besoin d'une restructuration si j'en ai besoin, mais cela n'arrivera tout simplement pas.

Toute solution, sauf le retour à l'utilisation du XPath apparemment obsolète (IE9 l'a abandonné) est acceptable.

Erik Andersson
la source
Par «nom», vous entendez le nom de la balise?
kennytm
1
La réponse de @ JaredMcAteer est très digne d'être acceptée comme réponse. Veuillez considérer.
RBT

Réponses:

348

[id^='someId']correspondra à tous les identifiants commençant par someId.

[id$='someId']correspondra à tous les identifiants se terminant par someId.

[id*='someId']correspondra à tous les identifiants contenant someId.

Si vous recherchez l' nameattribut, remplacez-le idpar name.

Si vous parlez du nom de balise de l'élément, je ne pense pas qu'il existe un moyen d'utiliser querySelector

JaredMcAteer
la source
4
Merci, je voulais dire le nom de la balise.
Erik Andersson
hmm Je ne peux pas faire document.querySelectorAll ("div. [id $ = 'foo']")
SuperUberDuper
4
La période là-dedans est probablement gâchée document.querySelectorAll("div[id$='foo']")IE8 n'a qu'un support QSA partiel, je pense qu'ils ne supportent que les sélecteurs CSS2.1, donc ces sélecteurs ne fonctionneront pas dans IE8, mais IE9 + fonctionnera.
JaredMcAteer
Cette réponse m'a sauvé la vie! Je vous remercie!!
Menas le
28

J'étais en train de déconner / méditer sur des one-liners impliquant querySelector () et je me suis retrouvé ici, et j'ai une réponse possible à la question OP en utilisant des noms de balises & querySelector (), avec des crédits à @JaredMcAteer pour avoir répondu à ma question, alias avoir RegEx-like correspond à querySelector () en Javascript vanille

En espérant que ce qui suit sera utile et répondra aux besoins du PO ou de tous les autres:

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

Ensuite, nous pouvons, par exemple, récupérer les trucs src, etc ...

console.log(youtubeDiv.src);
//> "http://www.youtube.com/embed/Jk5lTqQzoKA"
console.debug(youtubeDiv);
//> (...)
StéphaneAG
la source
12

Définissez le tagName comme un attribut explicite:

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

J'en avais besoin moi-même, pour un document XML, avec des balises imbriquées se terminant par _Sequence. Voir la réponse de JaredMcAteer pour plus de détails.

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

Je n'ai pas dit que ce serait joli :) PS: Je recommanderais d'utiliser tag_nameover tagName, de sorte que vous ne rencontriez pas d'interférences lors de la lecture des attributs DOM implicites "générés par ordinateur".

Lorenz Lo Sauer
la source
8

Je viens d'écrire ce court script; semble fonctionner.

/**
 * 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
la source
objet renvoyé par querySelectorAll ne prend pas nécessairement en charge le filtre sur tous les navigateurs (car il ne s'agit pas toujours d'un tableau javascript normal). Assurez-vous de vérifier cette assertion en production, soit avant la génération du script (si le script est généré dynamiquement), soit en utilisant des instructions de condition.
Dmitry
Très belle réponse ... C'était la correspondance finale que j'ai trouvée à mon problème. Je travaille avec des éléments personnalisés et des fonctionnalités comme celle-ci sont toujours un travail manuel, malheureusement.
codepleb le
-1

Il y a un moyen de dire ce qui n'est pas. Faites juste le pas quelque chose qu'il ne sera jamais. Une bonne référence de sélecteur css: https://www.w3schools.com/cssref/css_selectors.asp qui montre le sélecteur: not comme suit:

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

Voici un exemple: un div suivi de quelque chose (tout sauf une balise az)

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