Осваиваем DOM для Javascript в 2023

Итак, если вы хотите узнать больше или вспомнить базу DOM, то читайте следующие 8 подсказок:

Введение в DOM

DOM является объектной моделью документа который открыт у вас в браузере. Это представление в HTML разметке.

Пример: 
console.log(document); // WOW. Выводит всю структуру DOM-дерева! 

Захват элемента

Как получить объект узла / тэга в DOM дереве? Довольно просто, используйте querySelector, getElementById.

Пример: 
let myElement = document.querySelector("#myID"); 
console.log(myElement); // Выводит элемент с идентификатором 'myID'

Меняем классы в DOM

Менять ID и классы очень просто. Представим, что это одежда и вам иногда надо переключиться с одного наряда в другой. Смена происходит очень просто:

Пример:
myElement.className = "newClass";
console.log(myElement.className); // Выводит "newClass"

Создаем новые узлы DOM дерева

Вставка, Удаление, Замена. Ваш DOM похож на комнату; иногда вам просто нужно переставить мебель, чтобы освободить место. В этом вам помогут appendChild, removeChild и replaceChild.

Пример: 
let newElement = document.createElement('div'); 
document.body.appendChild(newElement); // Добавляет новый div к body 

Игра по Правилам

Атрибуты и Свойства. Атрибуты в DOM подобны негласным правилам дружбы — нет, подождите, они действительно прописаны прямо в HTML! Будь то установка src изображения или изменение атрибутов data-*, знание, как их изменять, является важным.

Пример:
myElement.setAttribute('data-info', 'awesome'); 
console.log(myElement.getAttribute('data-info')); // Выводит "awesome"

Манипуляция Атрибутами и Классами

Чувствовали ли вы когда-либо необходимость менять свою прическу на лету? HTML-элементы переживают похожий кризис идентичности, и благодаря DOM вы можете менять их с JavaScript.

Пример:
let headline = document.getElementById("headline");
headline.setAttribute("class", "new-class"); // Новый облик, кто это?

Эффективное Отображение Больших Списков и Таблиц

Когда Вы Не Можете Справиться с Нагрузкой. У всех нас бывают дни, когда мы перегружены задачами, и мы хотели бы отображать их более эффективно. JavaScript понимает вашу боль. С помощью методов, таких как DocumentFragment, вы можете избежать заморозки страницы при загрузке больших списков или таблиц. Примерно так и работает виртуальный DOM.

Пример: 
let fragment = document.createDocumentFragment(); 
for (let i = 0; i < 1000; i++) { 
  let listItem = document.createElement('li'); 
  listItem.innerHTML = Элемент ${i+1};
  fragment.appendChild(listItem);
} 
document.getElementById("long-list").appendChild(fragment); // Одно обновление DOM! 

Обход DOM

Плавание по DOM, как пират в поисках сокровищ. Если вы когда-либо чувствовали себя потерянными при плавании по бескрайнему морю DOM, вы не одиноки. Иногда вам нужно найти тот один конкретный элемент, который где-то утонул в бездне вашей HTML-структуры. Вы можете использовать методы, такие как parentNode, nextSibling и их команда, чтобы перескакивать с одного элемента на другой, как пират перепрыгивает с корабля на корабль.

Корабль и Его Экипаж В DOM каждый элемент похож на корабль на море. И у корабля есть много компонентов, таких как firstChild, lastChild и так далее. Знание, как перемещаться между ними, может сделать ваш код на JavaScript более читаемым и эффективным.

Пример: 
// Начнем с сундука с сокровищами 
const treasureChest = document.getElementById('treasureChest');
// Найдем первый добытчик (надеюсь, это золото) 
const firstGold = treasureChest.firstChild;
// Найдем последний добытчик (пожалуйста, пусть это не будет проклятием) 
const possiblyCursedItem = treasureChest.lastChild;
// Перемещение к родительскому узлу (остров, на котором зарыт сундук) 
const island = treasureChest.parentNode;
// Найдем следующее сокровище (если есть) 
const nextTreasure = treasureChest.nextSibling;
console.log(firstGold, possiblyCursedItem, island, nextTreasure); 
Ай, теперь вы плаваете плавно по DOM!

Итого

Мы рассмотрели самые популярные операции с DOM деревом в мире JS. Оказывается манипуляция DOM является не сложной операцией и закрепив практикой вы сможете разобраться ещё лучше!