3

Não sei se "caminho" é a melhor definição. Mas, usando o QuerySelector é possível obter um elemento especificando um "caminho", como por exemplo:

main section.sobre .view-more

Mas, como posso fazer o oposto?

Se eu tiver um elemento, como <button class="view-more">, como posso fazer para verificar se ele é o main section.sobre .view-more?

A única forma que encontrei seria fazer um QuerySelector e então comparar este elemento com o elemento atual:

window.document.addEventListener("click", function(e) {

  [].forEach.call(window.document.querySelectorAll("main section.sobre .view-more"), function(el) {
    if (el == e.target) {
      window.console.log("Isso é o main section.sobre .view-more");
    }
  });

}, true);
<html lang="en">

<body>
  <main>
    <section class="sobre">
      <button class="view-less">View Less</button>
      <button class="view-close">View Less</button>

      <button class="view-more">View More</button>
      <button class="view-more">View More</button>
    </section>
  </main>
</body>

</html>

O problema é se for buscar por vários "caminhos" terá que executar vários querySelectorAll. Isso é, se quiser saber se o elemento é main .a, main .b, main .c, main .d, teria que fazer um querySelectorAll para cad um, então comparar. Isso ainda piora se houverem múltiplos elementos com o mesmo "caminho", como o caso acima, já que terá que iterar pelo próprio querySelectorAll.

Isso funciona, mas não me parece correto. Existe outra forma, mais eficiente e nativa, de atingir esse objetivo?

2
  • Tem algum caso prático de uso disso ? O que iria fazer diferente com base no pai ? Não seria caso de usar um seletor que inclua o pai também ?
    – Isac
    26/10/2018 às 15:20
  • Eu estou usando o GopherJS, então dificulta dar um uso prático, mas é similar ao exemplo. Por simplicidade é mais fácil adicionar um único EventListener em "cada section" e nele monitorar os elementos. Por exemplo, num site de página única, cada section recebe um listener. Isso permite que adicione e remova os elementos e continue com um único listener. Dai teria um mapa map[caminho]Listener(e dom.Event), por página. Então bastaria fazer dentro do único EventListener um if listen, ok := mapa[caminho(event)]; ok { listen(event) }. Isso é usa o listenner do elemento, previamente definido.
    – Inkeliz
    26/10/2018 às 15:30

2 Respostas 2

1

Existe uma função para isso, matchesSelector

Sintaxe:

element.matchesSelector(selectorString)

Onde element é qualquer elemento HTML e selectorString é uma string que representa um seletor CSS válido. A função retorna um booleano, true caso o seletor CSS represente um possível caminho para o elemento, e false caso contrário

Muitos navegadores implementam essa função com o seu prefixo, por exemplo, o chrome possui o webkitMatchesSelector, você pode usar esse polyfill que está na documentação da MDN:

if (!Element.prototype.matches)
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1            
        }

Exemplo de uso:

if (!Element.prototype.matches)
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1            
        }

document.addEventListener("click", function(e) {
  if (e.target.matches('main section.sobre .view-more'))
    console.log("Isso é o main section.sobre .view-more");
}, true);
<html lang="en">
<head>
</head>
<body>
  <main>
    <section class="sobre">
      <button class="view-less">View Less</button>
      <button class="view-close">View Less</button>

      <button class="view-more">View More</button>
      <button class="view-more">View More</button>
    </section>
  </main>
</body>
</html>

0

Você pode usar a propriedade .parent para ir subindo na árvore de componentes e buscar as classes e tags pais e assim montar sua consulta apenas uma única vez.

window.document.addEventListener("click", function(e) {
        let parent1 = e.target.parentElement;
        let parent2 = parent1.parentElement;
        if(!parent1 || !parent2) return;

        let tree = parent2.nodeName.toLowerCase() + ' ' + parent1.nodeName.toLowerCase() + '.' + parent1.className +  ' .' + e.target.className;

        console.log(tree == 'main section.sobre .view-more');

}, true);
1
  • Isso resolve mais ou menos. Se houver lacunas do "caminho" não funcionará, se for algo como "main .view-more", faltando o "section". Uma outro problema é se tiver o id ou o elemento, como main button.view-more. Em casos "gerais" isso não me parece funcionar.
    – Inkeliz
    26/10/2018 às 18:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .