Работа с узлами DOM и их свойствами в JavaScript

Манипуляции с DOM - это суть JavaScript. Без DOM нет JavaScript, а без него цифровой мир - это просто статическая страница, которая в наши дни может показаться скучной.

Итак, что такое DOM? Объектная модель документа (DOM) - это представление веб-страницы или документа, которое может быть изменено с помощью языка сценариев, такого как JavaScript, в соответствии с MDN.

Я узнал о DOM так, как будто смотрел на дерево вверх ногами. И каждый элемент в дереве документа называется узлом.

У большинства узлов есть начальный и конечный теги, но такие узлы, как тег img, являются самозакрывающимися, что означает, что вам не нужно добавлять ‹/img› в конце строки, вместо этого. вы делаете это как '‹img src =« my image link »/›'

В эти теги можно вкладывать вещи. Внутренний узел называется дочерним узлом, а внешний узел считается его родительским узлом. Сначала это сбивало меня с толку, но если вы попробуете это с помощью Chrome Dev Tools, вы лучше поймете, как это работает, и узнаете, какой элемент вы получите взамен. Ниже будет краткий пример того, как узел может получить доступ к своему родительскому узлу или узнать, что это дочерний узел. Вы говорите Nodeception?

Поскольку «документ» - это объект, у которого есть свойства и атрибуты, у него будут свойства и методы. Чтобы получить доступ к объектам внутри объекта, мы используем методы выбора и запроса для изменения содержимого, отображаемого в браузере.

Селекторы элементов

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

В этом простом примере HTML:

мы можем использовать :

• document.getElementById («list-1») ~ захватывает узел ‹ul› с идентификатором «list-1».
• document.getElementByClass («Class») ~ захватывает первый узел ‹div› с классом «Class».

Селекторы запросов

Это, вероятно, самый распространенный селектор при написании JavaScript. Он выполняет поиск по всему документу и выбирает первый элемент, который соответствует тому, что вы ищете.

Из приведенного выше примера HTML:

• document.querySelector («h2») ~ захватывает узел «h2».
• document.querySelector («# list-1») ~ захватывает узел ‹ul› с идентификатором «list-1». При поиске узла с идентификатором перед именем идентификатора необходимо указать «#».
• document.querySelector («. Class») ~ захватывает первый ‹div› с классом «Class». Точка (.) Требуется при поиске узла с именем класса.
• document.querySelectorAll («. Class») ~ Это дает вам коллекцию списка узлов всех совпадающих элементов.

Создание элемента

Когда вы создаете элемент с помощью JavaScript, вы создаете с намерением добавить его в DOM. Допустим, вы хотите добавить «элемент списка» ‹li› в первый «неупорядоченный список» ‹ul› в примере HTML выше:

Произведет на странице маркер:

.innerHTML / .innerText / .textContent

Существуют методы, которые мы используем для управления данными внутри узла, используя .innerHTML, .innerText, textContent.

Хотя они выглядят одинаково, каждый возвращает разные свойства.

document.querySelector('.Class').innerHTML
//=>  <div class="Class">
        <h3>List of items:</h3>
         <ul id="list-1">
          </ul> 
      </div>

.innerHTML возвращает всю разметку HTML.

document.querySelector('.Class').innerText
//=>  "List of items:"

.innerText возвращает строку и учитывает ее стиль CSS.

document.querySelector('.Class').textContent
//=>  "
         List of items:   
       
      
              "

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

При установке нового значения для текста внутри узла использование innerText или textContent может быть лучшим выбором, поскольку он менее разрушителен или не влияет на HTML-код этого узла. Если вы заменяете целую строку HTML на другую, которая вам больше нравится, тогда будет innerHTML. Подробнее об этом можно узнать на сайте MDN.

Изменение атрибутов

Одно простое изменение атрибута может выглядеть так:

const element = document.querySelector(".Class")
element.style.backgroundColor="#f0f0f0"
//=> changes the selected elements(in this case the 'Class' class) background color to grey

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

Удаление тега ‹h3› Список элементов: ‹/h3› может выглядеть следующим образом:

const div = document.querySelector('.Class') 
div.firstElementChild 
 // => <h3> .. </h3>
firstElementChild grabs the first child node of that <div> tag
div.firstElementChild.remove()
// => removes the h3 node from the DOM.
div.parentNode.remove()
// => removes the body of the HTML

Заключение

Это только часть того, что JavaScript может сделать с DOM. Язык эволюционировал в течение многих лет с новыми добавлениями стандартизации через ECMAScript, и интересно видеть, куда это пойдет в будущем.