Как манипулировать DOM в JavaScript – наиболее часто используемые методы
Всем привет! В этой статье я собираюсь рассказать все, что вам нужно знать о манипулировании DOM. По сути, каждый объект Element в DOM имеет свойства и методы, которые вы можете использовать для взаимодействия с этим элементом.
Теоретически манипулирование DOM кажется сложным, но, как вы увидите в этой статье, есть несколько методов, которые вы будете использовать снова и снова во многих сценариях. Как только вы узнаете об этих методах, вы повысите свой навык в манипулировании DOM. Давайте начнем!
Изменение содержимого элемента
Вы можете изменить значение или содержимое элемента, установив innerText свойство этого элемента.
Например, предположим, у вас есть элемент paragraph следующего вида:
<p class="myParagraph">This is a paragraph</p>Затем вы выбираете элемент и изменяете его innerText значение следующим образом:
const p = document.querySelector('.myParagraph');
p.innerText = 'A new day is dawning';Значение элемента p будет изменено, как вы видите ниже:
<p class="myParagraph">A new day is dawning</p>Манипулирование атрибутом класса
Вы можете добавить новый атрибут class к Element, используя метод add() объекта classList:
Element.classList.add('myClass');Вы можете удалить класс, используя метод remove():
Element.classList.remove('myClass');Объект classList - это объект коллекции, который вы можете использовать для манипулирования class атрибутом Element.
Вы не можете напрямую редактировать classList свойство, потому что это свойство доступно только для чтения. Но вы можете использовать его методы для изменения классов элементов.
Чтобы заменить существующий класс новым классом, используйте replace() метод:
Element.classList.replace('oldClass', 'newClass');Существует также метод toggle(), который работает как переключатель: добавляет класс, если его там нет, удаляет класс, если он там есть.
Element.classList.toggle('myClass');Чтобы проверить, содержит ли элемент определенный класс, используйте contains() метод и передайте класс, который вы хотите проверить, в виде строки:
Element.classList.contains('myClass');Метод возвращает значение true, когда указан класс. В противном случае он возвращает значение false.
Настройка стилей CSS с помощью JavaScript
Поскольку вы узнали, как устанавливать и удалять классы из элемента, вы можете управлять стилем элемента, добавляя или удаляя классы, которые изменяют правила оформления, применяемые к элементу.
Например, в вашем CSS-коде могут быть следующие правила оформления:
.color-primary {
color: #007bff;
}
.color-secondary {
color: #6c757d;
}
.bold {
font-weight: 700;
}Если у вас есть элемент с примененным color-primary классом, вы можете заменить его на класс color-secondary или добавить класс bold.
Предположим, у вас есть элемент paragraph следующим образом:
<p class="myParagraph">A new day is dawning</p>Вот как вы меняете стиль с помощью классов:
const p = document.querySelector('.myParagraph');
// add a class to the element
p.classList.add('color-primary');
// replace a class
p.classList.replace('color-primary', 'color-secondary');
// remove a class
p.classList.remove('color-secondary');Иногда вам может потребоваться применить CSS непосредственно к выбранному вами элементу DOM.
Объект Element предоставляет вам свойство style, которое управляет встроенным стилем элемента.
Например, вы можете изменить вес шрифта элемента, используя Element.style.fontWeight свойство следующим образом:
const p = document.querySelector('.myParagraph');
p.style.fontWeight = '700'; // set font weight
p.style.textTransform = 'uppercase'; // set to uppercase
p.style.color = '#007bff'; // set colorВы можете изменить стиль границы элемента следующим образом:
p.style.border = '1px solid black';Свойство style использует camelCase вместо дефисного регистра, поэтому font-weight становится fontWeight и text-transform становится textTransform.
И теперь вы знаете, как задавать стили CSS с помощью JavaScript. Я бы рекомендовал вам изменять стили элементов, добавляя и удаляя классы, потому что это более удобно в обслуживании и соответствует общему подходу.
Получите доступ к свойству style только в том случае, если вы больше нигде не будете использовать тот же стиль.
Создание, добавление и удаление элементов
Помимо создания дерева DOM из вашего HTML-файла, у вас также есть возможность создавать элементы DOM программно, используя JavaScript.
Это возможно, потому что у document объекта также есть createElement() метод, который позволяет вам создавать любой Element объект, который по сути является тегами, которые вы пишете в своем HTML-файле.
Например, вы можете создать элемент paragraph следующим образом:
const p = document.createElement('p');После создания этого элемента вы можете добавить к нему некоторый контент, используя innerText свойство:
p.innerText = 'This paragraph is created using JavaScript';Теперь вам нужно добавить его в существующее дерево DOM, чтобы он отображался на экране. Вы можете прикрепить элемент в любом месте существующей древовидной структуры.
Предположим, вы хотите добавить абзац в body тег. Затем вам нужно использовать querySelector() метод для выбора body и вызвать append() метод для элемента:
const p = document.createElement('p');
p.innerText = 'This paragraph is created using JavaScript';
const body = document.querySelector('body');
body.append(p);Абзац будет добавлен в качестве дочернего элемента body тега следующим образом:
<body>
<p>This paragraph is created using JavaScript</p>
</body>Если вы хотите удалить элемент, вы можете вызвать remove() метод из элемента, который вы хотите удалить.
Этот код удалит элемент paragraph:
p.remove();Вставка элемента в определенную позицию
Метод append(), который мы исследовали выше, вставит новый элемент в качестве последнего дочернего элемента родительского элемента.
Если вы хотите вставить элемент в определенную позицию, вы можете использовать insertBefore() метод.
Давайте рассмотрим простой пример. Предположим, у вас есть следующий HTML-контент:
<body>
<p id="first">The first paragraph</p>
</body>Чтобы вставить элемент перед первым абзацем, вам нужно вызвать метод insertBefore() из родительского элемента (который является body тегом) и передать ему два аргумента:
- Новый элемент, который вы хотите добавить
- Элемент, перед которым вставляется новый элемент
Вот пример создания второго абзаца и вставки его перед первым абзацем:
let p2 = document.createElement('p');
p2.innerText = 'The second paragraph';
let body = document.querySelector('body');
let p1 = document.querySelector('#first');
body.insertBefore(p2, p1);В результате запуска приведенного выше скрипта второй абзац будет вставлен перед первым абзацем:
<body>
<p>The second paragraph</p>
<p id="first">The first paragraph</p>
</body>Имейте в виду, что DOM не предоставляет метода insertAfter, потому что он не нужен.
Вы используете append() метод для вставки элемента в последнюю позицию, и если вы хотите управлять позицией, используйте insertBefore() метод.
Манипулирование атрибутами элемента
Объект classList предоставляет только методы для изменения class элемента. Если вы хотите изменить другие атрибуты, такие как id, href или src, вы можете использовать setAttribute() метод.
Метод setAttribute() принимает два аргумента:
- Имя атрибута для установки
- Значение атрибута для установки
Например, вот как установить src атрибут img тега:
<img id="profile-pic" src="feature-image.png" />Выберите img элемент с помощью querySelector(), затем вызовите setAttribute() метод для элемента:
const img = document.querySelector('#profile-pic');
img.setAttribute('src', 'new-image.jpg');Значение src атрибута будет изменено следующим образом:
<img id="profile-pic" src="new-image.jpg" />Если вы хотите изменить значение атрибута, вы можете использовать getAttribute() метод.
Передайте методу атрибут, который вы хотите проверить, в качестве аргумента. Если атрибут установлен, метод возвращает значение этого атрибута в виде строки. Если нет, он возвращает null:
img.getAttribute('src'); // new-image.jpg
img.getAttribute('href'); // nullВы можете использовать оба setAttribute() и getAttribute() методы для взаимодействия с любыми атрибутами HTML.
Если вы хотите удалить атрибут, используйте removeAttribute() метод:
const img = document.querySelector('#profile-pic');
// Delete the src attribute
img.removeAttribute('src');Манипулирование атрибутами данных
Атрибут data используется для хранения дополнительной информации об элементах HTML. Как вы используете данные, зависит от вас.
Предположим, у вас есть HTML-тег следующего вида:
<div id="intro" data-attribute-theme="light" data-session="2022">
Hello World!
</div>Вы можете получить доступ к атрибутам данных из dataset свойства элемента выше следующим образом:
// Select the div
let myDiv = document.querySelector('#intro');
// Access the dataset property
console.log(myDiv.dataset.session) // 2022
// Use camelCase when your data attribute is more than one word
console.log(myDiv.dataset.attributeTheme) // lightЕсли вы хотите изменить значение атрибута, вы можете переназначить нужное dataset свойство на новое значение напрямую:
// Select the div
let myDiv = document.querySelector('#intro');
// Change the value of a data attribute
myDiv.dataset.session = '2023'Если вы хотите удалить атрибут data, используйте removeAttribute() метод, аналогичный тому, как вы удаляете обычный атрибут:
let myDiv = document.querySelector('#intro');
// Remove data-session attribute
myDiv.removeAttribute('data-session');
// Remove data-attribute-theme attribute
myDiv.removeAttribute('data-attribute-theme');Заключение
И на этом пока все о манипуляциях с элементами DOM. На этом этапе, я надеюсь, вы понимаете, почему JavaScript требуется для создания современного веб-приложения. Это позволяет вам взаимодействовать и изменять контент, который существует на вашем веб-сайте. Это позволяет вносить множество динамических изменений в созданный вами веб-сайт.
