Hiérarchie des classes intégrées en POO en JavaScript

Les classes intégrées ont également une hiérarchie. Regardons sur l'exemple d'un paragraphe :

html<p>text</p>

Obtenons une référence au paragraphe dans une variable :

javascriptlet elem = document.querySelector('p');

Regardons notre paragraphe dans la console :

javascriptconsole.dir(elem);

Comme vous le savez déjà, dans la propriété [[Prototype]] se trouve le nom de la classe du paragraphe. C'est HTMLParagraphElement. Si vous dépliez la liste des propriétés et méthodes de cette classe, alors en bas, vous retrouverez la propriété [[Prototype]], qui contiendra déjà la classe parent et ce sera HTMLElement. Pour celle-ci, on peut également trouver un parent et ainsi de suite.

html<div>text</div>

javascriptlet elem = document.querySelector('div');
console.dir(elem);

html<input>

javascriptlet elem = document.querySelector('input');
console.dir(elem);

html<div>text</div>
<div>text</div>
<div>text</div>

javascriptlet elems = document.querySelectorAll('div');
console.dir(elems);

html<div>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

javascriptlet elem = document.querySelector('div');
let elems = elem.children;

console.dir(elems);