Уроки JavaScript – Основи маніпулювання елементами в DOM

Минулого разу ми розглянули деякі основи JavaScript і торкнулися різних аспектів об’єктної моделі документа, в тому числі способи доступу до вузлів і переміщення по DOM. Сьогодні ми поговоримо про те, як маніпулювати елементами в DOM.

Елементи для маніпулювання

В останньому уроці ми розглянули кроки, пов’язані з доступом до колекції вузлів DOM або окремого вузла DOM. Справжня магія виникає, коли ми потім маніпулюємо певними властивостями, що призводить до так званої «поведінки».

Кожен окремий вузол DOM має колекцію властивостей; більшість з цих властивостей надають основу для певної функціональності. Наприклад, якщо у вас є елемент абзацу з ідентифікатором «paragraph», ви можете досить легко змінити колір цього елемента за допомогою DOM API:

document.getElementById('paragraph').style.color = '#a9a9a9';

Щоб доступніше проілюструвати природу об’єкта/властивості цього API, ми розберемо його на складові, призначивши кожен об’єкт змінній:

var myDocument = document;
var myParagraph = myDocument.getElementById('paragraph');
var myParagraphStyles = myParagraph.style;
// а тепер ми можемо присвоїти новий колір:
myParagraphStyles.color = '#a9a9a9';

Тепер, коли у нас є посилання на об’єкт ‘style‘ в абзаці, ми можемо додати й інші стилі CSS:

myParagraphStyles.padding = '7px 5px 3px 10px';
myParagraphStyles.backgroundColor = '#ccc';
myParagraphStyles.marginTop = '25px';

Тут ми просто використовуємо основні імена CSS властивостей. Єдине що, CSS властивості, які мають тире (‘‘), в JavaScript пишуться у верблюжому регістрі. Тому замість «background-color» ми використовуємо «backgroundColor».

Приклад нижче не буде працювати і призведе до синтаксичної помилки, оскільки символ ‘‘ є оператором мінус в JavaScript та, окрім того, не існує такого імені властивості:

myParagraphStyles.padding-bottom = '100px'; // викличе синтаксичну помилку

Властивості можуть бути доступні у вигляді масиву. Наприклад, з цим знанням ми могли б створити невелику функцію для зміни будь-якого стилю даного елемента:

function changeCssStyle(element, property, value) {
  element.style[property] = value; // зверніть увагу на квадратні дужки, -- вони використовуються для доступу до властивості
}
// цю функцію можна використовувати, наприклад, так:
var myParagraph = document.getElementById('paragraph');
changeCssStyle(myParagraph, 'color', '#a9a9a9');

Крім властивості ‘style‘ існує безліч інших, які ви можете використовувати для маніпулювання певними аспектами вузла/елемента.

Не всі властивості відносяться до примітивних типів даних (рядки, числа, логічні значення і т.д.); Наприклад, властивість ‘style‘, яку ми обговорювали раніше, є об’єктом, в якому містяться свої власні властивості. Багато з властивостей елемента будуть доступні лише для читання (не можна змінити їх значення). Якщо ви спробуєте напряму змінити таку властивість, браузер видасть помилку виду Setting a property that has only a getter (встановлення властивості, яка має тільки гетер). Це те, що потрібно знати.

Одним із загальних завдань, які стосуються маніпулювання елементами DOM, є зміна вмісту всередині елемента. Для вирішення цього завдання є кілька різних способів. Найпростіший спосіб – використовувати властивість innerHTML, наприклад так:

var myParagraph = document.getElementById('paragraph');
// 1. заміна поточного контенту новим контентом:
myParagraph.innerHTML = 'Новий текст для цього <strong>піддослідного</strong> абзацу.';
// 2. додавання до поточного контенту:
myParagraph.innerHTML += '... ще якийсь контент ...';

Вузли (ноди)

При створенні контенту через DOM API вам необхідно знати про два різних типи вузлів: вузол елемента і текстовий вузол. Існують й інші типи вузлів, але на даний момент ми розглянемо тільки ці два.

Для створення елемента використовується метод ‘createElement‘, а для створення текстового вузла використовується метод ‘createTextNode‘:

var myParagraph = document.getElementById('paragraph');
// додаємо контент до абзацу
var someText = 'Новий текст, який ми хочемо додати';
var textNode = document.createTextNode(someText);
myParagraph.appendChild(textNode);

Тут ми використовуємо метод ‘appendChild‘, щоб додати наш новий текстовий вузол для абзацу. Це займає трохи більше часу, ніж метод innerHTML, але все ж важливо знати обидва ці способи.

А зараз розглянемо більш складний приклад використання методів DOM:

var myParagraph = document.getElementById('paragraph');
// додаємо посилання в абзац, та спочатку створюємо новий елемент для посилання:
var newLink = document.createElement('a'); // тег лінка
newLink.href = 'https://sebweo.com'; // адреса для лінка
newLink.appendChild(document.createTextNode('Відвідайте наш сайт')); // текст для лінка
// після цього додаємо посилання в абзац:
myParagraph.appendChild(newLink);

Маніпулювання елементами в DOM – це дуже велика тема, але сподіваємося, що інформація з сьогоднішнього уроку стане для вас достатньою основою для подальшого навчання.

Tags: JavaScript

Recent Posts

Як вивчити німецьку мову легко і весело? З допомогою Beste Freunde!

Німецька часто вважається складною мовою. Так, німецька лексика має «важкий» характер. Так, є дійсно дуже… Read More

27/09/2020

Опалення і гаряча вода коли треба, а не коли включать

Тепло в домі і гаряча вода в будь-який час для багатьох мешканців багатоквартирних та приватних… Read More

19/09/2020

Інструкція по завантаженню відео з сервісу TikTok (безкоштовно та без watermark)

Якщо ви ще не чули про TikTok, тоді рекомендуємо вам спочатку ознайомитися з цим коротким… Read More

17/09/2020

Що є в бюджетному ноутбуці – на які характеристики розраховувати?

Пройшли ті часи, коли пристойний ноутбук коштував від 1000 доларів. Сьогодні можна купити досить непоганий… Read More

16/09/2020

Що краще: цифрове телебачення Т2 чи інтернет-телебачення

Сучасне життя неможливо уявити без телебачення. Воно дозволяє дізнаватися про події в Україні та світі,… Read More

02/09/2020

Гіпоалергенна подушка. Чому вона важлива?

Зараз знайдеться мало людей, в яких немає алергії на продукти або пилок рослин. Вважається, що… Read More

28/08/2020