Манипуляция домом (часть 1)

Технический термин, с помощью которого JavaScript взаимодействует с браузером, называется манипулирование DOM.

DOM означает объектная модель документа. Это дает нам возможность манипулировать html и CSS, тем самым изменяя внешний вид нашего веб-сайта. Прежде всего, DOM представляет html в виде дерева. HTML-теги представлены в виде элементов. Некоторые элементы или узлы являются дочерними или прямыми дочерними элементами родительского элемента. Тег Html находится в корневом узле. Учтите это.

Из структуры тег ‹html› является корневым узлом, а ‹head› и ‹body› — его непосредственными дочерними узлами. ‹p› является прямым дочерним элементом тега body и потомком тега ‹html›.

Принцип работы DOM заключается в том, что нам нужно найти способ настроить html-тег, которым мы хотим управлять, и сохранить его в переменной. HTML-тег, который всегда является первым тегом, описывается как «документ», а соответствующие верхние элементы описываются как «свойства документа». Они включают:

<head> //document.head
<body> //document.body

#ChildNodes

Дочерние узлы, иначе называемые дочерними, являются элементами того же уровня, которые являются прямыми потомками родительского элемента. Например, теги head и body являются потомками тега html.

Однако потомки охватывают как прямые, так и косвенные дочерние элементы элемента. Если мы включим тег p, то коллекция будет потомком тега html.

#firstChild

Это просто первый прямой потомок элемента. Head является первым потомком html.

#lastChild

THis относится к последнему дочернему элементу. Тело в этот момент является последним дочерним элементом нашего HTML-тега.

#Запрос или поиск элементов

Рассмотрим этот html

Элементы поиска:

Существуют различные способы поиска элементов.

#document.getElementById( ‘id’ ):

Это используется для доступа к элементам, которые имеют идентификатор. Из примера давайте получим доступ к firstDiv и сохраним его в переменной.

let div1 = document.getElementById( ‘firstDiv’ );

#document.getElementsByTagName( ‘nameOfTag’ ) :

Это используется для доступа к элементам с заданным именем тега, таким как «div», «input», «h1», «p» и т. д.

давайте нацелимся на наш тег h1

```js

let h1 = document.getElementByTagName( ‘h1’ )

```

#document.getElementsByClassName( ‘класс’):

Нацелены на элементы с одинаковым именем класса.

```js

let classes = document.getElementByClassName( ‘myClass’ );

```

#QuerySelector():

Это принимает имя, такое как tagName, class, id и т. д. Его можно использовать для доступа к любому из них.

```js

// searching an id
let div1 = document.querySelector( ‘#firstDiv’ );
//searching a class
let classes = document.querySelector( ‘myClass’ );
//searching by tagname
let h1 = document.querySelector( ‘h1’ );

```

Обратите внимание, что этот метод возвращает только первый элемент, который выполняет поиск. Например, если есть три класса, на которые вы хотите ориентироваться, он возвращает или нацеливается только на первый встречающийся класс.

Если вы хотите вернуть все элементы в этой категории, используйте

#QuerySelectorAll():

Если вы хотите вернуть или настроить таргетинг на все элементы в этой категории, используйте этот метод.

```js

//searching a class
let classes = document.querySelectorAll( ‘myClass’ );