Javascript DOM (объектная модель документа) - это интерфейс, который позволяет разработчикам управлять содержимым, структурой и стилем веб-сайта. В этой статье мы узнаем, что такое DOM и как вы можете управлять им с помощью Javascript. Эту статью также можно использовать в качестве справочника по основным операциям DOM.

Что такое DOM?

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

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

Места элементов называются узлами. Не только элементы получают узлы, но также атрибуты элементов и текста получают свои собственные узлы (узлы атрибутов и текстовые узлы).

Документ DOM

Документ DOM является владельцем всех других объектов на вашей веб-странице. Это означает, что если вы хотите получить доступ к какому-либо объекту на своей веб-странице, вам всегда нужно начинать с документа. Он также содержит множество важных свойств и методов, которые позволяют нам получать доступ к нашему веб-сайту и изменять его.

Поиск элементов HTML

Теперь, когда мы понимаем, что такое документ DOM, мы можем начать получать наши первые элементы HTML. Есть много разных способов сделать это с помощью Javascript DOM, вот самые распространенные:

Получить элемент по ID

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

var title = document.getElementById(‘header-title’);

Здесь мы получаем элемент с идентификатором header-title и сохраняем его в переменной.

Получить элементы по имени класса

Мы также можем получить более одного объекта, используя метод getElementsByClassName (), который возвращает массив элементов.

var items = document.getElementsByClassName(‘list-items’);

Здесь мы получаем все элементы с классом list-items и сохраняем их в переменной.

Получить элемент по имени тега

Мы также можем получить наши элементы по имени тега, используя метод getElementsByTagName ().

var listItems = document.getElementsByTagName(‘li’);

Здесь мы получаем все элементы li нашего HTML-документа и сохраняем их в переменной.

Queryselector

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

Получить по идентификатору:

var header = document.querySelector(‘#header’)

По классам:

var items = document.querySelector(‘.list-items’)

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

var headings = document.querySelector(‘h1’);

Получите более конкретные элементы:

Мы также можем получить более конкретные элементы с помощью селекторов CSS.

document.querySelector(“h1.heading”);

В этом примере мы ищем тег и класс одновременно и возвращаем первый элемент, который проходит CSS-селектор.

Запрос

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

var heading = document.querySelectorAll(‘h1.heading’);

В этом примере мы получаем все теги h1, которые имеют класс заголовок, и сохраняем их в массиве.

Изменение HTML-элементов

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

Изменение HTML

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

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

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

InnerHTML также можно использовать для размещения тегов в другом теге.

document.getElementsByTagName("div").innerHTML = "<h1>Hello World!</h1>"

Здесь мы помещаем тег h1 во все уже существующие div.

Изменение значения атрибута

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

document.getElementsByTag(“img”).src = “test.jpg”;

В этом примере мы меняем src всех тегов ‹img /› на test.jpg.

Смена стиля

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

document.getElementById(id).style.property = new style

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

document.getElementsByTag(“h1”).style.borderBottom = “solid 3px #000”;

Свойства CSS должны быть записаны в верблюжьем регистре вместо обычного имени свойства css. В этом примере мы использовали borderBottom вместо border-bottom.

Добавление и удаление элементов

Теперь мы посмотрим, как мы можем добавлять новые элементы и удалять существующие.

Добавление элементов

var div = document.createElement(‘div’);

Здесь мы просто создаем элемент div с помощью метода createElement (), который принимает тэг в качестве параметра и сохраняет его в переменной. После этого нам просто нужно дать ему некоторый контент, а затем вставить его в наш документ DOM.

var newContent = document.createTextNode("Hello World!"); 
div.appendChild(newContent);
document.body.insertBefore(div, currentDiv);

Здесь мы создаем контент с помощью метода createTextNode (), который принимает String в качестве параметра, а затем мы вставляем наш новый элемент div перед div, который уже существует в нашем документе.

Удаление элементов

var elem = document.querySelector('#header');
elem.parentNode.removeChild(elem);

Здесь мы получаем элемент и удаляем его методом removeChild ().

Заменить элементы

Теперь давайте посмотрим, как мы можем заменять предметы.

var div = document.querySelector('#div');
var newDiv = document.createElement(‘div’);
newDiv.innerHTML = "Hello World2"
div.parentNode.replaceChild(newDiv, div);

Здесь мы заменяем элемент с помощью метода replaceChild (). Первый аргумент - это новый элемент, а второй аргумент - это элемент, который мы хотим заменить.

Запись непосредственно в выходной поток HTML

Мы также можем писать выражения HTML и JavaScript непосредственно в выходной поток HTML с помощью метода write ().

document.write(“<h1>Hello World!</h1><p>This is a paragraph!</p>”);

Мы также можем передавать выражения JavaScript, такие как объект даты.

document.write(Date());

Метод write () также может принимать несколько аргументов, которые будут добавлены к документу в порядке их появления.

Обработчики событий

HTML DOM также позволяет Javascript реагировать на события HTML. Здесь я перечислил некоторые из наиболее важных:

  • щелчок мышью
  • загрузка страницы
  • движение мыши
  • изменение поля ввода

Назначить события

Вы можете определять события прямо в вашем HTML-коде, используя атрибуты ваших тегов. Вот пример события onclick:

<h1 onclick=”this.innerHTML = ‘Hello!’”>Click me!</h1>

В этом примере текст ‹h1 /› изменится на «Привет!» при нажатии на кнопку.

Вы также можете вызывать функции при запуске события, как вы можете видеть в следующем примере.

<h1 onclick=”changeText(this)”>Click me!</h1>

Здесь мы вызываем метод changeText () при нажатии кнопки и передаем элемент как атрибут.

Мы также можем назначить те же события в нашем коде Javascript.

document.getElementById(“btn”).onclick = changeText();

Назначить слушателей событий

Теперь давайте посмотрим, как вы можете назначить слушателей событий вашим HTML-элементам.

document.getElementById(“btn”).addEventListener('click', runEvent);

Здесь мы только что назначили событие clickevent, которое вызывает метод runEvent при щелчке по нашему элементу btn.

Вы также можете назначить несколько событий одному элементу:

document.getElementById(“btn”).addEventListener('mouseover', runEvent);

Узловые отношения

Узлы в DOM Document имеют иерархические отношения друг с другом. Это означает, что узлы структурированы как дерево. Мы используем термины родительский, родственный и дочерний для описания отношений между узлами.

Верхний узел называется корневым и является единственным узлом, не имеющим родителя. Корнем в обычном HTML-документе является тег ‹html /›, потому что он не имеет родителя и является верхним тегом документа.

Перемещение между узлами

Мы можем перемещаться между узлами, используя следующие свойства:

  • parentNode
  • childNodes
  • Первый ребенок
  • последний ребенок
  • nextSibling

Вот пример того, как вы можете получить родительский элемент h1.

var parent = document.getElementById(“heading”).parentNode

Рекомендуемая литература:



Ускоренный курс по TypeScript
Typescript - это типизированный надмножество JavaScript, призванное упростить разработку больших приложений JavaScript… medium.freecodecamp.org



Заключение

Вы добрались до конца! Надеюсь, что эта статья помогла вам разобраться в Javascript DOM и в том, как использовать ее для управления элементами на вашем веб-сайте.

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

Если у вас есть какие-либо вопросы или отзывы, дайте мне знать в комментариях ниже.

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

Первоначально опубликовано на gabrieltanner.org.