JavaНавчальний посібник із сценарієм DOM із прикладом
Джеймс Гартман
⚡ Розумний підсумок
JavaDOM сценаріїв та події надають сценаріям повний контроль над веб-сторінкою, дозволяючи коду зчитувати, змінювати, додавати або видаляти будь-який елемент, який відобразив браузер, а потім миттєво реагувати щоразу, коли відвідувач клацає, вводить текст або прокручує його.
У чому полягає DOM JavaСценарій?
JavaСкрипт може отримати доступ до всіх елементів веб-сторінки, використовуючи модель об'єктів документа (DOM). Фактично, веб-браузер створює DOM веб-сторінки під час її завантаження. Модель DOM створюється як дерево об'єктів, подібне до цього:
Кожен HTML-елемент на сторінці стає вузлом у цьому дереві. Браузери групують DOM-вузли на кілька основних типів: вузли елементів представляють такі теги, як <p> or <div>, текстові вузли містять видимі слова всередині тегу, вузли атрибутів зберігають значення, такі як id or class, а вузли коментарів зберігають <!-- --> розмітка. Найвищий вузол завжди є document об'єкт, а кожен інший елемент є його нащадком.
Використовуючи DOM, JavaScript може виконувати кілька завдань. Він може створювати нові елементи та атрибути, змінювати існуючі елементи та атрибути, і навіть видаляти існуючі елементи та атрибути. JavaСкрипт також може реагувати на існуючі події та створювати нові події на сторінці. У розділах нижче описано вибір елементів, їх зміну та налаштування обробників подій з практичними та запускаємими прикладами.
Варто пам’ятати, що DOM — це не те саме, що й вихідний HTML-файл. HTML, який завантажує браузер, — це статичний текст, але DOM, який він створює з цього тексту, — це активна, динамічна об’єктна модель. Будь-яка зміна JavaСкрипт, який передається до DOM, одразу відображається на екрані, без жодної зміни оригінального HTML-файлу.
Як вибрати елементи DOM у JavaScript
Перш ніж JavaСкрипт може змінити будь-що на сторінці, спочатку йому потрібно вибрати цільовий вузол. DOM надає кілька методів селекторів, кожен з яких підходить для різних ситуацій:
- отриматиЕлементЗаІдентифікатором(): повертає єдиний елемент, який відповідає заданому
idатрибут. - отриматиЕлементиЗаНазваКласу(): повертає активну HTMLCollection кожного елемента, що містить заданий клас.
- отриматиЕлементиЗаНазваТегу(): повертає активну HTMLCollection кожного елемента із заданим іменем тегу, наприклад,
porli. - querySelector(): повертає перший елемент, який відповідає будь-якому селектору CSS.
- запитВибірВсіх(): повертає статичний NodeList кожного елемента, що відповідає селектору CSS.
У таблиці нижче порівнюються чотири найпоширеніші методи вибору, щоб ви могли вибрати правильний для роботи.
| Метод | Повернення | Найкраще використовувати, коли |
|---|---|---|
| getElementById | Один елемент | Ви знаєте точний, унікальний ідентифікатор цілі. |
| getElementsByClassName | Жива колекція HTML | Вам потрібно, щоб кожен елемент мав одне спільне ім'я класу. |
| querySelector | Один елемент (перший збіг) | Ви хочете використовувати будь-який селектор CSS, а не лише id або class. |
| querySelectorAll | Статичний список вузлів | Вам потрібно перебрати кожен збіг за допомогою forEach. |
querySelector та querySelectorAll приймають будь-який дійсний селектор CSS, що робить їх найгнучкішим вибором для сучасного коду. Спробуйте фрагмент коду нижче на сторінці, яка містить елемент із id="title" та кілька елементів з class="item":
const heading = document.getElementById("title"); const itemsByClass = document.getElementsByClassName("item"); const firstItem = document.querySelector(".item"); const allItems = document.querySelectorAll(".item"); console.log(heading.textContent, itemsByClass.length, allItems.length);
getElementById та getElementsByClassName залишаються швидшими для простих пошуків, тоді як querySelector та querySelectorAll є кращими, коли логіка вибору потребує потужності повного синтаксису CSS, такого як селектори атрибутів або нащадків.
Як змінювати, створювати та видаляти елементи DOM
Після того, як елемент вибрано, JavaСкрипт може читати або перезаписувати його вміст, атрибути та навіть його існування в дереві. Використовуючи DOM, JavaСкрипт може створювати нові елементи та атрибути, змінювати існуючі елементи та атрибути, а також повністю видаляти існуючі елементи та атрибути.
Змініть вміст за допомогою getElementById та innerHTML
- getElementById: для доступу до елементів і атрибутів, ідентифікатор яких встановлено.
- innerHTML: для доступу до вмісту елемента.
Спробуйте самі цей приклад:
<html> <head> <title>DOM!!!</title> </head> <body> <h1 id="one">Welcome</h1> <p>This is the welcome message.</p> <h2>Technology</h2> <p>This is the technology section.</p> <script type="text/javascript"> var text = document.getElementById("one").innerHTML; alert("The first heading is " + text); </script> </body> </html>
Вікно сповіщення підтверджує, що getElementById знайшов заголовок, а innerHTML повернув текст, що зберігається всередині нього.
Читати кожен абзац за допомогою getElementsByTagName
getElementsByTagName: для доступу до елементів і атрибутів за допомогою імені тегу. Цей метод поверне an масив усіх елементів із однаковою назвою тегу.
Спробуйте самі цей приклад:
<html> <head> <title>DOM!!!</title> </head> <body> <h1>Welcome</h1> <p>This is the welcome message.</p> <h2>Technology</h2> <p id="second">This is the technology section.</p> <script type="text/javascript"> var paragraphs = document.getElementsByTagName("p"); alert("Content in the second paragraph is " + paragraphs[1].innerHTML); document.getElementById("second").innerHTML = "The orginal message is changed."; </script> </body> </html>
Оскільки getElementsByTagName повертає активну колекцію, paragraphs[1] посилається на другий абзац у документі, а оновлення innerHTML негайно перезаписує його текст на екрані.
Створення та видалення елементів за допомогою createElement та removeChild
Окрім зміни того, що вже є на сторінці, DOM дозволяє додавати нові елементи або видаляти існуючі:
- createElement(): створює новий вузол елемента в пам'яті.
- appendChild(): приєднує вузол як останній дочірній елемент батьківського елемента.
- встановитиАтрибут(): додає або оновлює атрибут, наприклад
classorhref, на елементі. - видалитиДитину(): видаляє вказаний дочірній вузол з його батьківського вузла.
У наведеному нижче прикладі створюється новий елемент списку, додається йому текст і клас, додається до існуючого списку, а потім видаляється перший елемент з цього ж списку:
const list = document.getElementById("myList"); const newItem = document.createElement("li"); newItem.textContent = "Freshly added item"; newItem.setAttribute("class", "highlight"); list.appendChild(newItem); list.removeChild(list.firstElementChild);
Сам по собі метод createElement() нічого не відображає, оскільки вузол все ще знаходиться лише в пам'яті. Він з'являється лише після того, як appendChild() або подібний метод, такий як prepend(), приєднає його десь у видимому дереві. Сучасні браузери також підтримують коротший метод node.remove(), який видаляє елемент безпосередньо без необхідності посилання на його батьківський елемент, на відміну від старішого синтаксису parent.removeChild(node).
Як обробляти події в JavaScript
Подія — це будь-яка дія, яку може виявити браузер, така як клацання, натискання клавіші або завантаження сторінки. Ви можете додати обробник подій до певного елемента двома основними способами.
Приєднайте обробник за допомогою onclick або addEventListener
Перший, старіший підхід, призначає функцію безпосередньо властивості on-event елемента:
document.getElementById(id).onclick=function()
{
lines of code to be executed
}
АБО, використовуючи сучасний та гнучкіший метод addEventListener():
document.getElementById(id).addEventListener("click", functionname)
addEventListener() зазвичай є кращим, оскільки він дозволяє приєднати більше одного обробника до однієї події на одному елементі, і він приймає необов'язковий третій аргумент, який керує захопленням, що розглядається пізніше в цьому розділі. Він також працює разом з removeEventListener(), який від'єднує обробник, коли він більше не потрібен, що властивість onclick не може зробити самостійно.
HTML також підтримує третій стиль: вбудований обробник, написаний безпосередньо на тезі, наприклад, <button onclick="clicked()">Click Me</button>Вбудовані обробники поєднують розмітку з логікою та швидко стають важкими для підтримки, тому більшість JavaРозробники скриптів резервують їх для швидких демонстрацій та покладаються на addEventListener() для реальних застосувань.
Спробуйте: приклад повної події кліку
Спробуйте самі цей приклад:
<html> <head> <title>DOM!!!</title> </head> <body> <input type="button" id="btnClick" value="Click Me!!" /> <script type="text/javascript"> document.getElementById("btnClick").addEventListener("click", clicked); function clicked() { alert("You clicked me!!!"); } </script> </body> </html>
Клацання кнопки запускає функцію clicked(), яка запускає JavaВікно сповіщення скрипта, яке підтверджує успішне виконання обробника подій.
Об'єкт події
Кожен обробник подій автоматично отримує об'єкт події як свій перший аргумент. Цей об'єкт містить корисну інформацію про те, що сталося, зокрема event.target (точний елемент, з якого виникла дія), event.type (назва події, наприклад, «клік») та методи, такі як event.preventDefault(), який зупиняє поведінку браузера за замовчуванням, таку як перехід за посиланням або надсилання форми.
document.getElementById("btnClick").addEventListener("click", function(event) { console.log("Clicked element: " + event.target.id); });
Ще дві властивості доповнюють об'єкт події: event.currentTarget завжди посилається на елемент, до якого приєднаний слухач, навіть якщо event.target повідомляє про вкладений дочірній елемент, а event.stopPropagation() зупиняє подію, перш ніж вона продовжить передавати або записувати далі. Разом із preventDefault() ці інструменти надають обробнику точний контроль над тим, що відбувається далі.
Event BubblЗахоплення, захоплення та делегування
Коли подія спрацьовує на вкладеному елементі, вона на цьому не зупиняється. У булькання На цьому етапі подія рухається вгору від цільового елемента через кожного предка аж до документа. захоплення фаза, яка виконується першою та є обов'язковою, подія замість цього переміщується вниз від документа до цільового об'єкта, перш ніж почнеться утворення бульбашок. Пас {capture: true} як третій аргумент addEventListener() для прослуховування під час фази захоплення.
Делегування заходу використовує перевагу бульбашкового типу: замість того, щоб приєднувати окремий слухач до кожного дочірнього елемента, ви приєднуєте один слухач до спільного батьківського елемента та перевіряєте event.target, щоб визначити, який дочірній елемент його запустив. Це використовує менше пам'яті та автоматично охоплює елементи, додані на сторінку пізніше.
const list = document.getElementById("myList"); list.addEventListener("click", function(event) { if (event.target.tagName === "LI") { alert("You clicked " + event.target.textContent); } });
Делегування, разом із бульбашками та захопленням, надає вам детальний контроль над тим, як DOM та події в JavaСкрипт реагує, коли сторінка стає більш інтерактивною.
