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:

html<p>text</p>

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

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

Let's output this paragraph to the console:

javascriptconsole.log(elem);

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

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

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

Задание 1

Examine the output of the following code:

html<div>text</div>

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

Determine which class this tag belongs to.

Задание 2

Examine the output of the following code:

html<input>

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

Determine which class this tag belongs to.

Задание 3

Examine the output of the following code:

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

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

Determine which class the result belongs to.

Задание 4

Examine the output of the following code:

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

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

console.dir(elems);

Determine which class the result belongs to.