Введение в DOM в JavaScript.

На самом базовом уровне веб-сайт состоит из файлов или документа HTML и CSS. Браузер создает представление документа, известное как объектная модель документа (DOM). Этот документ позволяет JavaScript получать доступ и управлять элементами и стилями веб-сайта.

Модель построена в виде древовидной структуры объектов и определяет:

1) HTML-элементы как объект.
2) Свойства и события элементов HTML.
3) Методы доступа к элементам HTML.

• Узел – это места элементов. Также помните, что атрибуты элементов и текста имеют свои собственные узлы, узлы атрибутов и текстовые узлы соответственно.
• ParentNode, childNodes, firstChild, lastChild, nextSibling – важные свойства, которые помогают нам перемещаться между узлами.
• Документ DOM является владельцем всех других объектов на вашей веб-странице, что означает, что если вы хотите получить доступ к любому объекту на вашей веб-странице, вам всегда нужно начинать с документа. Документ DOM также содержит множество важных свойств и методов, которые позволяют нам получать доступ к нашему веб-сайту и изменять его.
  Вот краткий список общих API в веб-сценариях и сценариях XML-страниц с использованием DOM, вы также можете называть их методами DOM.
  1. document.getElementById (‘id’)
  2. document.getElementsByTagName (‘element_name)
  3. document.createElement (‘name’)
  4. parentNode.appendChild (‘node’)
  5. element.innerHTML
  6. element.style
  7. element.setAttribute (‘attribute, value’)
  8. element.getAttribute (‘attributeName’)
  9. element.addEventListener (handler ())
  10. window.content
  11. window.onload
  12. window.dump ()
  13. window.scrollTo()

By the end of the training we will have covered all of them but for now we will only cover the basic ones. Here are the most common

1) Получение элемента по идентификатору («id_name»).
Метод getElementById () используется для получения отдельного элемента по его идентификатору. Давайте посмотрим на пример:

var title = document.getElementById ('myTitle');

В приведенном выше примере мы получим элемент DOM с идентификатором myTitle и сохраним его в переменной с именем title.
2) Получение элемента по имени класса («имя_класса»).
Мы также можем получить более одного объекта, используя метод getElementsByClassName (), который возвращает массив элементов. В приведенном ниже примере мы получим все элементы с классом list-items и сохраним их в переменной. 

В приведенном ниже примере мы получим все элементы с классом listItems и сохраним их в переменную items.
var items = document.getElementsByClassName (‘listItems’);
3). Получить элемент по имени тега ().
Мы также можем получить наши элементы по имени тега, используя метод getElementsByTagName (). В приведенном ниже примере мы получаем все элементы div нашего HTML-документа и сохраняем их в переменной divs.

var divs = document.getElementsByTagName ('div');

4) Queryselector ()
Метод QuerySelector () возвращает первый элемент, который соответствует указанному селектору CSS. Это означает, что вы можете получать элементы по идентификатору, классу, тегу и всем другим допустимым селекторам CSS.
Здесь я просто перечислю несколько самых популярных вариантов.
Получение по идентификатору:

var header = document.querySelector ('# header');

Получение по тегу:

var headings = document.querySelector ('h1');

Метод querySelectorAll () полностью совпадает с методом querySelector (), за исключением того, что он возвращает все элементы, подходящие для селектора CSS.

Изменение HTML-элементов.
HTML DOM позволяет нам изменять содержимое и стиль элемента HTML, изменяя его свойства.

Изменение HTML
Свойство innerHTML можно использовать для изменения содержимого элемента HTML.

document.getElementById(“#header”).innerHTML = “Hello World!”;

В приведенном выше примере мы получаем элемент с идентификатором заголовка и устанавливаем для внутреннего содержимого значение «Hello World!».
InnerHTML также можно использовать для размещения тегов в другом теге. В следующем примере мы помещаем тег h1 во все уже существующие div.

Изменение значения атрибута
Вы также можете изменить значение атрибута с помощью модели DOM.

document.getElementsByTag («img»). src = «test.jpg»;

Изменение стиля

Чтобы изменить стиль элемента HTML, нам нужно изменить свойство стиля наших элементов. Вот пример синтаксиса для изменения стилей:

document.getElementById (id) .style.property = новый стиль;

Теперь давайте рассмотрим пример, в котором мы получаем элемент и меняем нижнюю границу на сплошную черную линию:

document.getElementsByTag («h1»). Style.borderBottom = «solid 3px # 000»;