5

Em "protótipos" já usei várias vezes o Element.prototype e o HTMLElement.prototype. Queria saber o que é cada um e qual a diferença entre eles em exemplo, se possível. Pois em algums testes, como estes, tive o mesmo resultado:

HTMLElement.prototype.tooltip(); // funciona com um elemento normalmente

Element.prototype.tooltip(); // funciona com o mesmo elemento normalmente

Alguém poderia me mostrar a diferença prática entre os dois, caso não algum conceito ou especificação.

Outra dúvida que é enquanto ao NodeList.prototype, sei até o momento que posso usá-lo para, por exemplo, o document.querySelectorAll('elemento'). Mas creio que teria que usar um forEach e aplicar um prototype já existente, assim:

HTMLElement.prototype.tooltip = function(){
    ...
}
NodeList.prototype.tooltip = function(){
  [].forEach.call(NodeList, function(el){ // O NodeList dessa Linha, como usá-lo?
    el.tooltip() // tooltip já criado para elementos em particulares
  })
}

No forEach estou tentando usar o NodeList como um Array, poderia usar também o Array.from(), mas o que passo como parâmetro ao invés do "NodeList", o this não funciona...

Agradeço desde já.

2
  • 2
    Você já tem a resposta, eu só queria apontar que geralmente estender esse tipo de protótipo não é recomendado, devido a particularidades de sua implementação e à possibilidade de colisões com propriedades que podem ser acrescentadas à especificação no futuro. Detalhes em perfectionkills.com/whats-wrong-with-extending-the-dom.
    – bfavaretto
    Commented 15/01/2016 às 15:44
  • 1
    @bfavaretto, apenas comecei a ler pois estou um pouco ocupado... mas já dando uma olhada superfial geral, achei bem interessante. Commented 15/01/2016 às 16:00

1 Resposta 1

7

Samir, Element representa qual quer elemento no Documento, seja texto, html, svg, xml, etc.

O HtmlElement representa apenas os elementos HTML, como por exemplo uma <div>, <input>, elementos como <svg> implementam a interface SVGElement.

Desta forma, HtmlElement tem como Base Element, então qual quer inclusão no prototype de Element irá refletir em todas as interfaces que tem Element como base, tais como HTMLElement e SVGelement.

Note que Element por sua vez tem como base a interface Node e NodeList é uma coleção de Node. Se deseja que apenas os HTMLElement sejam afetados, então faça o seguinte:

NodeList.prototype.forEach = function (callback) {
  var indice = 0;
  [].forEach.call(this, function (element) {
    if (element instanceof HTMLElement) {
      callback(element, indice);
      indice++;
    }
  });
};

var blocos = document.querySelectorAll(".bloco");
blocos.forEach(function (element, indice) {
	console.log(element, indice);
});
<div class="bloco"></div>
<div class="bloco"></div>
<div class="bloco"></div>
<svg class="bloco"></svg>
<div class="bloco"></div>

Agora o mesmo código sem a verificação do tipo do Elemento.

NodeList.prototype.forEach = function (callback) {
  [].forEach.call(this, function (element, indice) {
    callback(element, indice);
  });
};

var blocos = document.querySelectorAll(".bloco");
blocos.forEach(function (element, indice) {
	console.log(element, indice);
});
<div class="bloco"></div>
<div class="bloco"></div>
<div class="bloco"></div>
<svg class="bloco"></svg>
<div class="bloco"></div>

Se deseja que o tooltip() não possa ser aplicado sobre um <svg>, então use HTMLElement.prototype, caso contrario use Element.prototype

7
  • TobyMosque, muito obrigado por sua resposta, tirou até outra dúvida minha... Commented 15/01/2016 às 15:25
  • @SamirBraga, qual seria a outra duvida? Commented 15/01/2016 às 15:27
  • 1
    Toby, vale o alerta que deixei lá em cima ;)
    – bfavaretto
    Commented 15/01/2016 às 15:45
  • 1
    @bfavaretto, valeu pelo alerta, em particularmente prefiro criar uma "Classe" que receba o HTMLElement, no caso eu faria var ToopTip = function(element) { ... };, mas isto já é uma questão de preferencia. Commented 15/01/2016 às 16:05
  • 1
    Também acho que embalar o objeto nativo em outro é a melhor maneira de resolver.
    – bfavaretto
    Commented 15/01/2016 às 16:30

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 .