Built-in JavaScript DOM Classes

DOM elements are also objects of built-in classes. Let's look at an example. Let's say we have a paragraph:

<p>text</p>

Let's get a reference to it in a variable:

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

Let's output this paragraph to the console:

console.log(elem);

Now let's look at the list of properties and methods of our paragraph:

console.dir(elem);

We can determine what class our paragraph belongs to. To do this, we need to find the special property [[Prototype]] in the list of properties. In it, we see that the paragraph belongs to the class HTMLParagraphElement. Let's check this:

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

Examine the output of the following code:

<div>text</div>

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

Determine which class this tag belongs to.

Examine the output of the following code:

<input>

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

Determine which class this tag belongs to.

Examine the output of the following code:

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

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

Determine which class the result belongs to.

Examine the output of the following code:

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

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

console.dir(elems);

Determine which class the result belongs to.