In what situations use each type of prototype in HTML elements?

Question

In what situations use each type of prototype in HTML elements?

Navigation

#1 by (7 votes)

5

In "prototypes" I have used the Element.prototype and HTMLElement.prototype several times. I wanted to know what each one is and what the difference between them is, if possible. Because in some tests, like these, I had the same result:

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

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

Could someone show me the practical difference between the two, if not some concept or specification.

Another question that is while at NodeList.prototype , I know so far that I can use it for, for example, document.querySelectorAll('elemento') . But I think I'd have to use forEach and apply an already existing prototype , like this:

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
  })
}

I am trying to use forEach as an Array, I could also use NodeList , but what I pass as a parameter instead of the "NodeList", Array.from() does not work ...

p>

Thank you in advance.

javascript

asked by anonymous 15.01.2016 / 15:54

1 answer

What is the difference between * and * | * Passing optional arguments in Java

score 7 · Accepted Answer

Samir, Element represents any element in the Document, either text, html, svg, xml, etc.

The HtmlElement represents only the HTML elements, such as <div> , <input> , elements like <svg> implement interface SVGElement .

In this way, HtmlElement is based on Element , so any inclusion in the prototype of Element will reflect on all interfaces that have Element as base, such as HTMLElement and SVGelement .

Note that Element is based on the interface Node and NodeList is a collection of Node . If you want only% w_ of% to be affected, then do the following:

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>

Now the same code without checking the type of the Element.

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>

If you want the HTMLElement can not be applied to a tooltip() , then use <svg> , otherwise use HTMLElement.prototype