In what situations use each prototype type in HTML elements?

Question

In "prototypes" I have used several times the Element.prototype and the HTMLElement.prototype. I wanted to know what is each and what is the difference between them in example, 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 the NodeList.prototype, I know until the moment I can use it to, for example, the document.querySelectorAll('elemento'). But I guess I’d have to wear one forEach and apply a prototype already existing, thus:

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

In the forEach I’m trying to use the NodeList as an Array, could also use the Array.from(), but what I pass as parameter instead of "Nodelist", the this doesn’t work...

Thank you in advance.

Answer 1

Samir, Element represents whatever element in the Document, be it text, html, svg, xml, etc.

Htmlelement represents only HTML elements, for example a <div>, <input>, elements such as <svg> implement the interface SVGElement.

In this way, HtmlElement is based Element, so what do you want to include in the Element will reflect on all interfaces you have Element as a basis, such as HTMLElement and SVGelement.

Note that Element in turn is based on the interface Node and NodeList is a collection of Node. If you wish only the HTMLElement are affected, so 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 Element type.

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 wish the tooltip() cannot be applied on a <svg>, then use HTMLElement.prototype, otherwise use Element.prototype