Eingebaute DOM-Klassen in JavaScript

DOM-Elemente stellen ebenfalls Objekte eingebauter Klassen dar. Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben einen Absatz:

html<p>text</p>

Holen wir uns eine Referenz darauf in eine Variable:

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

Geben wir diesen Absatz in der Konsole aus:

javascriptconsole.log(elem);

Schauen wir uns nun die Liste der Eigenschaften und Methoden unseres Absatzes an:

javascriptconsole.dir(elem);

Man kann bestimmen, zu welcher Klasse unser Absatz gehört. Dafür muss in der Eigenschaftenliste nach der speziellen Eigenschaft [[Prototype]] gesucht werden. Darin sehen wir, dass der Absatz zur Klasse HTMLParagraphElement gehört. Prüfen wir das:

javascriptconsole.log(elem instanceof HTMLParagraphElement); // true
Задание 1

Untersuchen Sie das Ergebnis der Ausführung des folgenden Codes:

html<div>text</div>
javascriptlet elem = document.querySelector('div');
console.dir(elem);

Bestimmen Sie, zu welcher Klasse dieses Tag gehört.

Задание 2

Untersuchen Sie das Ergebnis der Ausführung des folgenden Codes:

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

Bestimmen Sie, zu welcher Klasse dieses Tag gehört.

Задание 3

Untersuchen Sie das Ergebnis der Ausführung des folgenden Codes:

html<div>text</div>
<div>text</div>
<div>text</div>
javascriptlet elems = document.querySelectorAll('div');
console.dir(elems);

Bestimmen Sie, zu welcher Klasse das Ergebnis gehört.

Задание 4

Untersuchen Sie das Ergebnis der Ausführung des folgenden Codes:

html<div>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>
javascriptlet elem = document.querySelector('div');
let elems = elem.children;

console.dir(elems);

Bestimmen Sie, zu welcher Klasse das Ergebnis gehört.