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

document.querySelector / document.querySelectorAll

Метод document.querySelectorвозвращает первый элемент в документе, который соответствует данному селектору (ам).

Метод document.querySelectorAllвозвращает список узлов, представляющих список элементов документа, соответствующих данному селектору (ам).

// returns the first list
const list = document.querySelector('ul');
// returns all div elements with class intro or warning
const elements = document.querySelectorAll('div.info, div.warning');

document.createElement

Этот метод создает новый HTMLElementпо указанному имени тега. Возвращаемым значением является вновь созданный элемент.

Node.appendChild

Node.appendChild()Метод добавляет узел в конец списка детей данного родительского узла. Обратите внимание, что если данный дочерний элемент является ссылкой на существующий узел в документе, он будет перемещен на новую позицию.

Давайте посмотрим на эти два в действии:

let list = document.createElement('ul'); // creates a new list
['Paris', 'London', 'New York'].forEach(city => {
    let listItem = document.createElement('li');
    listItem.innerText = city;
    list.appendChild(listItem);
});
document.body.appendChild(list);

Node.insertBefore

Этот метод вставляет данный узел перед дочерним ссылочным узлом в пределах указанного родительского узла (и возвращает вставленный узел). Быстрый псевдокод будет примерно таким:

  1. Париж
  2. Лондон
  3. Нью-Йорк

↓

Node.insertBefore (Сан-Франциско, Париж)

↓

  1. Сан-Франциско
  2. Париж
  3. Лондон
  4. Нью-Йорк
let list = document.querySelector('ul');
let firstCity = list.querySelector('ul > li'); // here we could use list.firstChild, but the purpose of this article is to show DOM API methods
let newCity = document.createElement('li');
newCity.textContent = 'San Francisco';
list.insertBefore(newCity, firstCity);

Node.removeChild

Node.removeChildМетод удаляет дочерний узел из DOM и возвращает удаленный узел. Обратите внимание, что возвращаемый узел больше не является частью DOM, но все еще существует в памяти. При неправильном обращении это может привести к утечке памяти.

let list = document.querySelector('ul');
let firstItem = list.querySelector('li');
let removedItem = list.removeChild(firstItem);

Node.replaceChild

Этот метод заменяет дочерний узел в родительском узле (и возвращает замененный старый дочерний узел). Обратите внимание, что этот метод, если не обрабатывается должным образом, может вызвать утечки памяти, как Node.removeChild.

let list = document.querySelector('ul');
let oldItem = list.querySelector('li');
let newItem = document.createElement('li');
newItem.innerHTML = 'Las Vegas';
let replacedItem = list.replaceChild(newItem, oldItem);

Node.cloneNode

Этот метод создает дубликат данного узла, на котором этот метод был вызван. Полезно, когда вам нужно создать новый элемент, который должен совпадать с существующим элементом на странице. Он принимает необязательный booleanпараметр, флаг, который указывает, следует ли клонировать дочерние узлы или нет.

let list = document.querySelector('ul');
let clone = list.cloneNode();

Element.getAttribute / Element.setAttribute

Element.getAttributeМетод возвращает значение данного атрибута на элемент , и , наоборот, Element.setAttributeустанавливает значение атрибута на данном элементе.

let list = document.querySelector('ul');
list.setAttribute('id', 'my-list');
let id = list.getAttribute('id');
console.log(id); // outputs my-list

Element.hasAttribute / Element.removeAttribute

Element.hasAttributeМетод проверяет , имеет ли данный элемент указанного атрибута или нет. Возвращаемое значение boolean. Вызывая метод, Element.removeAttributeмы можем удалить атрибут с заданным именем из элемента.

let list = document.querySelector('ul');
if (list.hasAttribute('id')) {
    console.log('list has an id');
    list.removeAttribute('id');
};

Element.insertAdjacentHTML

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

  1. beforebegin
  2. afterbegin
  3. beforeend
  4. afterend
<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  <p>Hello World</p>
  <!-- beforeend -->
</div>
<!-- afterend -->

Пример:

var list = document.querySelector('ul');
list.insertAdjacentHTML('afterbegin', '<li id="first-item">First</li>');

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

Заключение и дальнейшее чтение

Я надеюсь, что вы найдете этот список полезным, и это поможет вам понять DOM. Правильная обработка дерева DOM чрезвычайно важна, и неправильное ее выполнение может привести к серьезным последствиям. Убедитесь, что вы всегда выполняете очистку памяти и корректно очищаете строки HTML / XML.