Що таке об’єктна модель документа і чому ви повинні знати, як нею користуватися.

Отже, ви вивчили HTML, створили свої перші теги, дізналися про CSS, зробили красиві форми, дивовижні кнопки, чуйні сторінки і почали показувати всім, наскільки це все було дивовижно.

Але тоді ви вирішили, що хочете зробити ще один крок у своєму навчанні, і почали дивуватися собі: «Як я можу додати анімацію на свою сторінку? Я би хотів, щоб ця кнопка зробила анімацію на моїй сторінці, коли я натиснув її! "

Ну, саме тут приходить DOM, щоб вирішити вашу проблему. Ви, напевно, багато про це чули, але, можливо, ще не знаєте, що це і які проблеми вирішує. Тож давайте копатись.

Отже, що таке DOM?

Чи знаєте ви всі ті круті анімації, які ви бачите навколо, що змушують вас подумати про себе: «Ого, я би хотів зробити щось подібне»? Усі ці анімації зроблені шляхом маніпулювання DOM. Зараз я поясню вам, як почати маніпулювати цим і зробити ваші веб-сайти виглядають крутішими.

DOM (об'єктна модель документа) - це інтерфейс, який відображає, як браузер читає ваші документи HTML і XML. Це дозволяє мові (JavaScript) маніпулювати, структурувати та стилізувати ваш веб-сайт. Після того, як браузер зчитує ваш документ HTML, він створює репрезентативне дерево, яке називається об’єктна модель документа, і визначає спосіб доступу до цього дерева.

Переваги

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

Як я вже говорив, у вас є безмежні можливості - вам просто потрібно використати свою творчість.

Представлення браузером

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

  1. Документ : обробляє всі документи HTML .
  2. Елементи : Усі теги, що знаходяться у вашому HTML або XML, перетворюються на елемент DOM.
  3. Текст : весь вміст тегів.
  4. Атрибути : Усі атрибути певного елемента HTML . На зображенні атрибут class = "hero" - це атрибут елемента < p>.

Маніпулювання DOM

Тепер ми дійшли до найкращої частини: починаємо маніпулювати DOM. По-перше, ми створимо елемент HTML як приклад, щоб побачити деякі методи та як працюють події.

      Entendendo o DOM (Document Object Model) 

00:00:00

Start Stop Reset

Дуже просто, правда? Зараз ми дізнаємось більше про методи DOM: як отримати наші елементи та почати маніпулювати.

Методи

DOM має безліч методів. Вони є зв’язком між нашими вузлами (елементами) та подіями, про що ми дізнаємось більше пізніше. Я покажу вам декілька найважливіших методів та спосіб їх використання. Є набагато більше методів, які я не збираюся вам показувати тут, але ви можете переглянути їх усі тут.

getElementById ()

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

var myStart = document.getElementsById('start');

myStart : Ім'я нашої змінної, схоже на переданий ідентифікатор .

старт : ідентифікатор передано. І якщо у нас немає жодного ідентифікатора з цим конкретним іменем, він повертає нуль .

getElementsByClassName ()

Цей метод повертає HTMLCollection усіх тих елементів, що містять певний переданий клас імен .

var myContainer = document.getElementsByClassName('container');

myContainer : Ім'я нашої змінної, схоже на переданий клас .

.container : наш клас пройшов. Якщо у нас немає жодного класу з цим конкретним іменем, він повертає null .

getElementsByTagName ()

Це працює так само, як і методи вище: він також повертає HTMLCollection, але цього разу з однією різницею: повертає всі ці елементи з переданим ім'ям тегу.

var buttons = document.getElementsByTagName('button');

кнопки : ім'я нашої змінної, яке схоже на ім'я переданого тегу .

button : назва тегу, яку ми хочемо отримати.

querySelector ()

Він повертає перший елемент , у якого передано конкретний селектор CSS . Тільки пам’ятайте, що селектор повинен дотримуватися синтаксису CSS . Якщо у вас немає жодного селектора , він повертає нуль .

var resetButton = document.querySelector('#reset');

resetButton : Ім'я нашої змінної, яке схоже на переданий селектор .

#reset : селектор передано, і якщо у вас немає жодного селектора, який відповідає, він повертає нуль .

querySelectorAll ()

Дуже схожий на метод querySelector () , але з єдиною різницею: він повертає всі елементи, що відповідають переданому CSS-селектору . Селектор повинен також дотримуватися синтаксис CSS . Якщо у вас немає жодного селектора , він повертає нуль .

var myButtons = document.querySelector('#buttons');

myButtons : ім'я нашої змінної, схоже на передане нашими селекторами .

#buttons : селектор передано, якщо у вас немає жодного селектора, який відповідає, повертає нуль .

Це одні з найбільш використовуваних методів DOM. Існує ще кілька методів, якими ви можете скористатися, наприклад createElement (), який створює новий елемент на вашій HTML-сторінці та setAttribute (), що дозволяє встановлювати нові атрибути для елементів HTML. Ви можете дослідити їх самостійно.

Знову ж таки, ви можете знайти всі методи тут, ліворуч у розділі Методи . Я справді рекомендую вам поглянути на деякі інші, тому що незабаром вам може знадобитися один з них.

Тепер ми дізнаємось про події - адже без них ми не можемо робити анімацію на наших сторінках.

Події

Елементи DOM мають методи , як ми щойно обговорювали, але вони також мають події . Ці події відповідають за інтерактивність на нашій сторінці. Але ось одне, чого ви можете не знати: події - це також методи .

натисніть

Однією з найбільш часто використовуваних подій є подія натискання. Коли користувач натискає певний елемент, він здійснить певну дію.

myStart.addEventListener('click', function(event) {
// Do something here.
}, false);

Параметри addEventListener ():

  1. Тип події, яку ви хочете (у цьому випадку " клацніть ").
  2. Функція зворотного дзвінка
  3. UseCapture за замовчуванням є хибним. Він вказує, чи хочете ви «захопити» подію чи ні.

виберіть

Ці події призначені для того, коли ви хочете надіслати щось, коли вибрано певний елемент. У цьому випадку ми будемо відправляти просте попередження .

myStart.addEventListener('select', function(event) {
alert('Element selected!');
}, false);

Це деякі найбільш часто використовувані події. Звичайно, у нас є багато інших подій, якими ви можете скористатися, наприклад події перетягування та скидання - коли користувач починає перетягувати якийсь елемент, ви можете зробити якусь дію, а коли він скине цей елемент, ви можете зробити іншу дію.

Тепер ми побачимо, як ми можемо пройти DOM і використовувати деякі властивості.

Подолання DOM

Ви можете пройти DOM і використовувати деякі властивості, які ми побачимо зараз. За допомогою цих властивостей ви можете повертати елементи, коментарі, текст тощо.

.childNodes

Ця властивість повертає nodeList дочірніх вузлів даного елемента. Він повертає текст, коментарі тощо. Отже, коли ви хочете ним користуватися, вам слід бути обережними.

var container = document.querySelector('.container');
var getContainerChilds = container.childNodes;

.firstChild

Ця властивість повертає перший дочірній елемент даного елемента.

var container = document.querySelector('.container');
var getFirstChild = container.firstChild;

.nodeName

Ця властивість повертає ім'я даного елемента. У цьому випадку ми передали div , тому він поверне “ div ”.

var container = document.querySelector('.container');
var getName = container.nodeName;

.nodeValue

Ця властивість специфічна для текстів та коментарів , оскільки повертає або встановлює значення поточного вузла . У цьому випадку, оскільки ми передали div, він поверне нуль .

var container = document.querySelector('.container')
var getValue = container.nodeValue;

.nodeType

Ця властивість повертає тип даного елемента. У цьому випадку він повертає " 1 ".

var container = document.querySelector('.container')
var getValue = container.nodeType;

Але що взагалі означає « 1 »? В основному це nodeType даного елемента. У цьому випадку це _ELEMENT_NODE_ і повертає нуль. Якби це був атрибут, він би повернувся як " 2 " нам і значенням атрибута.

Детальніше про nodeTypes ви можете прочитати тут.

Елементи

Ці властивості, замість наведених вище, повертають нам лише елементи . Їх частіше використовують і рекомендують, оскільки вони можуть спричинити меншу плутанину та легше зрозуміти.

.parentNode

Ця властивість повертає батьківський номер заданого вузла.

var container = document.querySelector('.container')
var getParent = container.parentNode;

.firstElementChild

Повертає перший дочірній елемент даного елемента.

var container = document.querySelector('.container')
var getValue = container.firstElementChild;

.lastElementChild

Повертає останній дочірній елемент даного елемента.

var container = document.querySelector('.container')
var getValue = container.lastElementChild;

Це деякі з багатьох властивостей, якими володіє DOM. Для вас дуже важливо знати основи про DOM, як він працює, а також його методи та властивості, тому що колись він може вам знадобитися.

Висновок

DOM надає нам кілька важливих API для створення фантастичних та інноваційних додатків. Якщо ви розумієте основи цього, ви можете створити неймовірні речі. Якщо ви хочете прочитати більше про DOM, ви можете натиснути тут і прочитати всі документи MDN.

? F ollow мене на Twitter!

F ollow мене на GitHub!

Я шукаю віддалену можливість, тому, якщо є, я хотів би про це почути, то, будь ласка, зв’яжіться зі мною!