web-dev-qa-db-fra.com

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

Existe-t-il un moyen de faire correspondre le nom d'un élément générique à l'aide de querySelector ou querySelectorAll? Je vois un soutien pour les caractères génériques dans les requêtes d'attributs, mais pas pour les éléments eux-mêmes.

Le document XML que j'essaie d'analyser est en gros une liste plate de propriétés et je dois rechercher les éléments dont le nom contient des chaînes.

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

Toute solution, à l'exception de l'utilisation de XPath apparemment obsolète (IE9 l'a abandonnée), est acceptable.

javascriptdomdomparserselectors-api
92
Erik Andersson

[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'attribut name, il vous suffit de remplacer id par name.

Si vous parlez du nom de balise de l'élément, je ne crois pas qu'il soit possible d'utiliser querySelector

255
JaredMcAteer

J'étais en train de déconner/réfléchissant sur des options uniques impliquant querySelector () et je me suis retrouvé ici, et j'ai une réponse possible à la question OP en utilisant les noms de balises & querySelector (), avec des crédits à @JaredMcAteer pour avoir répondu à MA question, c'est-à-dire avec RegEx-like correspond à querySelector () dans Javascript Javascript

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, obtenir les trucs SRC, etc ...

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

Définissez le tagName comme 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 les balises imbriquées se terminant par _Sequence. Voir JaredMcAteer answer pour plus de détails.

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

Je n'ai pas dit que ce serait joli :) PS: Je recommanderais d'utiliser tag_name sur tagName, afin d'éviter toute interférence lors de la lecture d'attributs DOM implicites générés par ordinateur.

10
Lorenz Lo Sauer

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"
4
cruzanmo

Il y a un moyen de dire ce qui n'est pas. Il suffit de faire le pas quelque chose ce ne sera jamais. Une bonne référence au sélecteur css: https://www.w3schools.com/cssref/css_selectors.asp qui affiche le sélecteur: not not:

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

Voici un exemple: une div suivie de quelque chose (autre qu'une balise z)

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