Разбиране на обектен модел на документ (DOM) в подробности

Всички сме чували за DOM, или Модел на документ, които се споменават от време на време, свързани с JavaScript. DOM е много важна концепция в уеб разработката. Без него нямаше да можем динамично модифициране на HTML страници в браузъра.

Научаването и разбирането на DOM води до по-добри начини достъп, промяна и наблюдение различни елементи на HTML страница. Обектният модел на документа може също да ни помогне намаляване на ненужното увеличение на времето за изпълнение на скрипта.

Дървета на структурата на данните

Преди да говоря за това, какво е DOM, как тя възниква, как съществува и какво се случва вътре в нея, искам да знаете за дърветата. Не от иглолистни и широколистни видове, а за дърво на структурата на данните.

Много по-лесно е да разберем концепцията за структурите от данни, ако опростим нейното определение. Бих казал, че има структура от данни подреждане на данните ви. Да, просто стара договореност, тъй като ще подредите мебелите в къщата или книгите на лавица за книги или всички различни групи храни, които имате за храна на чинията си, за да направи го смислено за теб.

Разбира се, това не е всичко за структурата на данните, но това е мястото, където всичко започва. Това “уговорка” е в основата на всичко това. Това е доста важно и в DOM. Но все още не говорим за DOM, така че нека да ви насоча към a структура на данните, с която може да сте запознати: масиви.

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

Масивите имат индекси и дължина, те могат да бъдат многоизмерен, и имат много повече характеристики. Колкото и да е важно да знаем тези неща за масивите, нека не се притесняваме с това точно сега. За нас масивът е доста прост. Това е, когато ти подреждайте различни неща в една линия.

По същия начин, когато мислим за дървета, да речем, става въпрос за поставяйки нещата под един друг, започвайки само с едно нещо на върха.

Сега можеш да вземеш единствената линия от преди, обърни го изправено, и ми кажи това “сега, всяка патица е под друга патица”. Тогава то ли е дърво? то е.

В зависимост от това какви са данните ви или как ще ги използвате, най-горните данни в дървото ви (наречени корен) може да е нещо, което е от голямо значение или нещо, което е само там поставете други елементи под него.

Така или иначе, най-горният елемент в структурата на дървените данни прави нещо много важно. Тя осигурява място започнете да търсите информация, която искате да извлечем от дървото.

Значението на 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 възел. Най- root node е възел на .

Най- DOM интерфейс в JavaScript се нарича документ (тъй като това е представянето на HTML документа). Така получаваме достъп до дървото DOM на HTML документ през документ интерфейс в JavaScript.

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

Как са проектирани възлите

Споменах преди, че всяка част от данни от HTML документ е записан като обект в JavaScript. И така, как данните, записани като обект, могат да бъдат логически подредени като дърво?

Възелите на дърво DOM имат определени характеристики или свойства. Почти всеки възел в едно дърво има родителски възел (възел над него), детски възли (възлите под него) и братя и сестри (други възли, принадлежащи на един и същи родител). Като това семейство горе, долу и около възел е това, което го квалифицира като a част от дърво.

Тази информация за семейството на всеки възел е запазени като свойства в обекта, представящ този възел. Например, деца е свойство на възел, който носи списък на дъщерните елементи на този възел, като по този начин логически подрежда неговите дъщерни елементи под възела.

Избягвайте прекалената обработка на DOM

Колкото и да е полезно актуализирането на DOM (за да променим дадена уеб страница), има такова нещо като прекалявам.

Кажете, че искате да актуализирате цвета на a