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:

html<p>text</p>

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

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

Schauen wir uns unseren Absatz in der Konsole an:

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

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