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 :

<p>text</p>

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

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

Regardons notre paragraphe dans la console :

console.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.

Étudiez la hiérarchie des classes pour cette balise :

<div>text</div>

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

Étudiez la hiérarchie des classes pour cette balise :

<input>

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

Étudiez la hiérarchie des classes pour cette collection :

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

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

Étudiez la hiérarchie des classes pour cette collection :

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

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

console.dir(elems);