Hierarchie der eingebauten Klassen in der OOP in JavaScript

Eingebaute Klassen haben ebenfalls eine Hierarchie. Schauen wir uns das an einem Beispiel eines Absatzes an:

<p>text</p>

Wir holen uns eine Referenz auf den Absatz in eine Variable:

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

Schauen wir uns unseren Absatz in der Konsole an:

console.dir(elem);

Wie Sie bereits wissen, befindet sich in der Eigenschaft [[Prototype]] der Name der Klasse des Absatzes. Das ist HTMLParagraphElement. Wenn man die Liste der Eigenschaften und Methoden dieser Klasse aufklappt, findet sich unten wiederum die Eigenschaft [[Prototype]], die dann bereits die übergeordnete Klasse enthält, und das wird HTMLElement sein. Für diese kann man ebenfalls einen Elternteil finden und so weiter.

Studieren Sie die Klassenhierarchie für diesen Tag:

<div>text</div>

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

Studieren Sie die Klassenhierarchie für diesen Tag:

<input>

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

Studieren Sie die Klassenhierarchie für diese Sammlung:

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

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

Studieren Sie die Klassenhierarchie für diese Sammlung:

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

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

console.dir(elems);