querySelector, correspondência de elemento curinga?


133

Existe uma maneira de corresponder um nome de elemento curinga usando querySelectoror querySelectorAll? Vejo suporte para curingas em consultas de atributo, mas não para os próprios elementos.

O documento XML que estou tentando analisar é basicamente uma lista simples de propriedades e preciso encontrar elementos que tenham determinadas cadeias de caracteres em seus nomes.

Sei que o documento XML provavelmente precisa de uma reestruturação, se eu precisar disso, mas isso simplesmente não vai acontecer.

Qualquer solução, exceto voltar a usar o XPath aparentemente obsoleto (o IE9 descartou) é aceitável.


Por "nome", você quer dizer o nome da tag?
Kennytm

1
A resposta do @ JaredMcAteer é muito digna de ser aceita como resposta. Por favor considere.
RBT

Respostas:


346

[id^='someId']corresponderá a todos os IDs começando com someId.

[id$='someId']corresponderá a todos os IDs terminados em someId.

[id*='someId']corresponderá a todos os IDs que contêm someId.

Se você estiver procurando pelo nameatributo, substitua-o idpor name.

Se você está falando sobre o nome da tag do elemento, não acredito que exista uma maneira de usar querySelector


4
Obrigado, eu quis dizer o nome da tag.
Erik Andersson

hmm Eu não posso fazer document.querySelectorAll ("div. [id $ = 'foo']")
SuperUberDuper

4
O período em que há provavelmente está atrapalhando o document.querySelectorAll("div[id$='foo']")IE8 apenas com suporte parcial ao QSA, acho que eles suportam apenas seletores CSS2.1, portanto, esses seletores não funcionarão no IE8, mas o IE9 + funcionará.
JaredMcAteer

Esta resposta salvou minha vida! Obrigado!!
Menas

28

Eu estava bagunçando / meditando sobre one-liners envolvendo querySelector () e acabei aqui, e tenho uma possível resposta para a pergunta OP usando nomes de tags & querySelector (), com créditos para @JaredMcAteer por responder MINHA pergunta, também conhecido como RegEx-like corresponde a querySelector () em baunilha Javascript

Esperar que o seguinte seja útil e atenda às necessidades do OP ou de todos os outros:

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

Então, podemos, por exemplo, obter o material src, etc ...

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

12

Defina o tagName como um atributo explícito:

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

Eu mesmo precisava disso, para um documento XML, com tags aninhadas terminando em _Sequence. Veja a resposta JaredMcAteer para mais detalhes.

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

Eu não disse que seria bonito :) PS: Eu recomendaria usar tag_namesobre tagName, para que você não tenha interferências ao ler atributos DOM implícitos 'gerados por computador'.


8

Acabei de escrever este pequeno roteiro; parece funcionar.

/**
 * 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"

O objeto retornado por querySelectorAll não oferece suporte necessariamente ao filtro em todos os navegadores (pois nem sempre é uma matriz javascript regular). Verifique esta asserção na produção, antes de o script ser gerado (se o script for gerado dinamicamente) ou usando instruções de condição.
Dmitry

Resposta muito boa ... Essa foi a correspondência que encontrei com o meu problema. Estou trabalhando com elementos personalizados e recursos como este ainda são trabalhos manuais, infelizmente.
codepleb 30/01

-1

Existe uma maneira de dizer o que não é. Basta fazer o não algo que nunca será. Uma boa referência de seletor de css: https://www.w3schools.com/cssref/css_selectors.asp que mostra o seletor: not da seguinte maneira:

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

Aqui está um exemplo: uma div seguida por algo (qualquer coisa, exceto a tag az)

div > :not(z){
 border:1px solid pink;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.