Розуміння об'єктної моделі документа (DOM) у деталях

Ми всі чули про DOM, або Об'єктна модель документа, які час від часу згадуються, пов'язані з JavaScript. DOM є досить важливою концепцією у веб-розробці. Без цього ми б не змогли динамічно змінювати сторінки HTML у браузері.

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

Структура даних дерев

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

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

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

Масиви та дерева

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

Аналогічно, коли мислимо про дерева, скажімо, йдеться про розставляючи один одного, починаючи з однієї вершини.

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

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

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

Сенс DOM

DOM означає Об'єктна модель документа. Документ вказує на HTML (XML) документ який представлений як об'єкт. (У JavaScript все може бути тільки як об'єкт!)

Модель є створений браузером що приймає документ HTML і створює об'єкт, який його представляє. Ми можемо отримати доступ до цього об'єкта за допомогою JavaScript. А оскільки ми використовуємо цей об'єкт для маніпулювання HTML-документом і побудови власних додатків, DOM в основному є API.

Дерево DOM

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

Отже, це в основному фізичне розташування даних DOM в коді: все є як об'єкти. Логічно, однак, це дерево.

DOM Parser

Кожне програмне забезпечення браузера має назву програми DOM Parser що відповідає за розбір HTML-документа в DOM.

Браузери читають HTML-сторінку і перетворюють її дані на об'єкти, що складають DOM. Інформація, що міститься в цих об'єктах JavaScript DOM, логічно розташована як дерево структури даних, відоме як дерево DOM.

Розбір даних з HTML до дерева DOM

Візьміть простий файл HTML. Він має кореневий елемент . Його під-елементи є і , кожна з них має багато власних дитячих елементів.

Так по суті, браузер читає дані в документі HTML, щось подібне до цього:

І, впорядковує їх у дерево DOM подобається це:

Представлення кожного елемента HTML (і його приналежності) у дереві DOM відоме як a Вузол. The кореневий вузол є вузлом .

The Інтерфейс DOM у JavaScript називається документ (оскільки це подання документа HTML). Таким чином, ми отримуємо доступ до дерева DOM документа HTML крізь документ інтерфейс у JavaScript.

Ми не можемо тільки отримати доступ, але й маніпулювати документом HTML через DOM. Ми можемо додавати елементи до веб-сторінки, видаляти та оновлювати їх. Кожен раз, коли ми змінюємо або оновлюємо будь-які вузли дерева DOM, воно відображається на веб-сторінці.

Як розробляються вузли

Я згадував раніше, що кожен фрагмент даних з HTML-документа є збережено як об'єкт у JavaScript. Отже, як дані, збережені як об'єкт, можуть бути логічно розташовані як дерево?

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

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

Уникайте переборювання маніпуляції DOM

Наскільки ми можемо вважати корисним оновлення DOM (для того, щоб змінити веб-сторінку), є така річ перестаратися.

Скажімо, потрібно оновити колір a