Ingebouwde DOM Klassen JavaScript

DOM elementen zijn ook objecten van ingebouwde klassen. Laten we een voorbeeld bekijken. Stel we hebben een paragraaf:

<p>tekst</p>

We halen een referentie erop in een variabele:

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

Laten we deze paragraaf naar de console uitvoeren:

console.log(elem);

En laten we nu de lijst van eigenschappen en methodes van onze paragraaf bekijken:

console.dir(elem);

We kunnen bepalen tot welke klasse onze paragraaf behoort. Hiervoor moeten we in de lijst van eigenschappen de speciale eigenschap [[Prototype]] zoeken. Hierin zien we dat de paragraaf tot de klasse HTMLParagraphElement behoort. Laten we dit controleren:

console.log(elem instanceof HTMLParagraphElement); // true

Bestudeer het resultaat van de uitvoering van de volgende code:

<div>tekst</div>

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

Bepaal tot welke klasse deze tag behoort.

Bestudeer het resultaat van de uitvoering van de volgende code:

<input>

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

Bepaal tot welke klasse deze tag behoort.

Bestudeer het resultaat van de uitvoering van de volgende code:

<div>tekst</div>
<div>tekst</div>
<div>tekst</div>

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

Bepaal tot welke klasse het resultaat behoort.

Bestudeer het resultaat van de uitvoering van de volgende code:

<div>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
</div>

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

console.dir(elems);

Bepaal tot welke klasse het resultaat behoort.