DOM Manipulation может сделать веб-приложения настраиваемыми, а данные веб-страницы могут быть обновлены без обновления страницы. С помощью манипуляций с DOM мы можем добавлять, изменять и удалять любые элементы или атрибуты HTML, а также стили CSS, связанные с ними. К элементу также можно привязать любое событие.

Давайте узнаем, что такое модель DOM и как она создается.

Что такое модель DOM?

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

Узел также может иметь прикрепленные к ним события, при срабатывании которых выполняется прикрепленный к ним обработчик событий. DOM также действует как интерфейс между JavaScript и документом HTML или XML, который позволяет создавать настраиваемые веб-страницы.

Как создается модель DOM?

Браузер считывает HTML-код веб-страницы в формате необработанных байтов и преобразует их в отдельные символы. Затем строка символов преобразуется в отдельные токены, как указано W3C. Знаки для строки между угловыми скобками ‹› имеют особое значение и имеют свой собственный набор правил. После создания токенов они преобразуются в объекты, у которых есть свои свойства и правила. Эти объекты структурированы в виде древовидной структуры с родительско-дочерними отношениями в соответствии с тегами в разметке HTML, которая является DOM.

Процесс выглядит следующим образом:

Методы манипулирования DOM

Методы DOM предоставляют доступ к дереву, с помощью которого мы можем вносить изменения в структуру DOM и манипулировать DOM по мере необходимости. Ниже приведены наиболее распространенные методы и способы управления DOM.

  • document.createElement (tagName) - динамически создает новый узел элементов HTML в вашем коде JavaScript.
 var paraEle = document.createElement(‘p’);
  • document.createTextNode (текст) - создать текстовый узел.
var node = document.createTextNode(“This is a para”);
  • document.createDocumentFragment () -. Фрагмент документа - это, по сути, виртуальный невидимый HTML-элемент . .createDocumentFragment () используется для создания фрагмента документа, добавления элементов к фрагменту документа, а затем добавления фрагмента документа в дерево DOM. . В дереве DOM фрагмент документа заменяется всеми его дочерними элементами.
var fragment = document.createDocumentFragment();
  • Если мы пишем страницу, которая выполняет большое количество манипуляций с DOM, использование этого метода может значительно повысить производительность вашей страницы. Добавление дочерних элементов к фрагменту предотвращает переформатирование пользовательского интерфейса, что увеличивает производительность, и поэтому createElement () отличается от createDocumentFragment ().
  • parentElement.appendChild (newElement): этот метод вставляет дочерний узел (переданный в аргументе) как последний дочерний узел родительского элемента. т.е. он добавляет элемент дочернего узла к элементу родительского узла
paraEle.appendChild(node);
fragment.appendChild(paraEle);
document.body.appendChild(fragment);
  • parentElement.insertBefore (newElement, element): позволяет вставить новый элемент дочернего узла (переданный в качестве первого аргумента) в существующий элемент родительского узла перед одним из его дочерних узлов ( передается как второй аргумент) в родительском элементе.
const list = document.createElement('ul');
document.body.insertBefore(list, paraEle);
  • Node.setAttribute (имя, значение): динамически устанавливает атрибут элемента в HTML.
paraEle.setAttribute('class','paragraph');

Затем мы можем установить CSS для абзаца класса, и стили будут применены к элементу.

  • Node.textContent (): Позволяет устанавливать и получать текстовое содержимое узла (обычно известного как элемент ).
const para = document.getElementByClassName('paragraph');
console.log(para.textContent); // console the para text
para.textContent = "This is the changed paragraph" ; /*set the paragraph text*/
  • Node.innerHTML (): установите внутреннее содержимое HTML.
para.innerHTML = '<em>This is the changed paragraph</em>'; // text will be italics

Разница между innerHTML () и textContent () заключается в том, что innerHTML () может устанавливать как HTML-теги, так и текст внутри элемента, но в текстовом Content () может быть установлен только текст.

  • Node.classList: позволяет изменять классы, прикрепленные к элементу.
console.log(paraEle.classList); 
//console all the classes attached
paraEle.classList.add('myClass') 
//styles of myClass class will be applied
paraEle.classList.remove('myClass'); 
// remove the class
paraEle.classList.replace('myClass1','myClass2'); 
//replaces one class with other;
paraEle.classList.toggle('myClass') 
//if class present removes it, else if not present attaches the class to the element;
paraEle.classList.contains('myClass')
//returns true or false whether the class is in the classList or not
  • Node.dataset: позволяет устанавливать и получать значения настраиваемых атрибутов данных, которые у нас есть в элементах HTML.
//HTML file
<div id="myDiv" data-name="Item" data-item-price="10"></div>
//JavaScript
const myDiv = document.getElementById('myDiv');
console.log(myDiv.dataset)
//{name:"Iteml", item-price:"10"}
myDiv.dataset.name = "new Item1" 
//changes the name property of 
myDiv.removeAttribute('data-name')
//removes the name attribute of data
  • Node.cloneNode: позволяет сделать копию или клонировать узел.
var paraCopy = paraEle.cloneNode();
//It doesn't include the childNode by default it only copies the current node which is <p></p>
var paraCopy = paraEle.cloneNode(true);
//deep copy happends i.e. childNode will also be copied
document.body.appendChild(paraCopy);
  • Node.nextElementSibling: дает следующий элемент вызываемого вами элемента.
  • Node.nextSibling: предоставляет следующий узел. Он также учитывает любые типы узлов, включая текстовые, но nextElementSibling этого не делает.
  • Element.getBoundingClientRect (): этот метод возвращает объект, содержащий свойства элемента, такие как ширина, высота, верхнее, левое, правое, нижнее значение, а также x , y -координаты.
console.log(paraEle.getBoundingClientRect());

  • Element.outerHTML: предоставляет внешний HTML-код, который является тегом элемента, включая идентификатор, классы и т. д.
  • document.getElementById ( idname ): позволяет найти элемент с предоставленным идентификатором.
  • document.getElementByClassName ( classname ): позволяет найти элемент с указанным ClassName.
  • Element.querySelector ( селектор ): позволяет найти первый элемент, соответствующий селектору CSS.
document.querySelector('#myDiv');
//gives element with the above selector i.e. id of myDiv
document.querySelector('.myClass');
//gives element with the above selector i.e. class of myClass
  • Element.querySelectorAll ( селектор ) - позволяет найти список элементов, соответствующих селектору CSS.
document.querySelectorAll('.myClass');
//gives the array of element with the above selector
  • window.parent: документ равен window.parent.document, ссылаясь на наш HTML-документ.

Прежде чем браузер отобразит страницу, создается модель DOM. В результате нам необходимо обеспечить максимально быструю доставку HTML в браузер. Чрезмерные манипуляции с DOM приводят к тому, что страница снова и снова отображается, вызывая перекомпоновку пользовательского интерфейса, что является дорогостоящим и требует высокой производительности.

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