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

Какво е DOM?

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

След извършване на това действие и редица други, браузърът продължава да визуализира страницата. В този процес той, разбира се, вече използва създаденото от него DOM дърво, а не оригиналния HTML.

DOM е обектният модел на документа, който браузърът създава в паметта на компютъра въз основа на HTML кода, който получава от сървъра.

Казано по-просто, HTML кодът е текстът на страница, а DOM е набор от свързани обекти, създадени от браузъра при анализиране на неговия текст.

В Chrome изходният код на страницата, която браузърът получава, може да се види в раздела „Източник“ в панела „Инструменти за уеб програмисти“.

В Chrome няма инструмент, който може да се използва за преглед на създаденото от него DOM дърво. Но има представяне на това DOM дърво под формата на HTML код, то е достъпно в раздела „Елементи“. Това DOM представяне, разбира се, е много по-удобно за работа с уеб програмист. Следователно няма инструмент, който да представя DOM под формата на дървовидна структура.

Обектите в този модел се формират от почти всичко, което е в HTML (тагове, текстово съдържание, коментари и др.), включително самия документ. Връзките между тези обекти в модела се формират въз основа на това как HTML елементите са разположени в кода един спрямо друг.

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

За да четем и променяме DOM програмно, браузърът ни предоставя DOM API или, с други думи, интерфейс за програмиране. По прост начин DOM API е колекция от огромен брой различни обекти, техните свойства и методи, които можем да използваме за четене и модифициране на DOM.

За работа с DOM в повечето случаи се използва JavaScript, т.к. към днешна дата това е единственият език за програмиране, на който скриптовете могат да се изпълняват в браузър.

Защо се нуждаем от DOM API?Имаме нужда от него, за да можем да използваме JavaScript, за да променяме страницата в движение, т.е. направете го динамичен и интерактивен.

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

Сега в мрежата практически няма сайтове, в чиито скриптове няма да има работа с DOM.

Какво представлява HTML кодът за страница?

Преди да пристъпите към изучаване на обектния модел на документа, първо трябва да запомните какъв е изходният код на уеб страница (HTML документ).

Изходният код на уеб страница се състои от тагове, атрибути, коментари и текст. Таговете са основният синтаксис на HTML. Повечето от тях са по двойки. В този случай единият от тях е началният, а другият е затварящият. Една такава двойка тагове образува HTML елемент. HTML елементите могат да имат Допълнителни опции- атрибути.

В документ за създаване на определено маркиране някои елементи са вътре в други. В резултат на това един HTML документ може да се разглежда като набор от вложени HTML елементи.

Като пример разгледайте следния HTML код:

Заглавие на статията

В този код основният елемент е html. Елементите на главата и тялото са вложени в него. Елементът head съдържа заглавието, докато елементът body съдържа h1 и div. Елементът div от своя страна съдържа h2 и p.

Сега нека да разгледаме как браузърът изгражда DOM дърво въз основа на HTML кода.

Как се изгражда DOM дървото на документа?

Както вече беше описано по-горе, браузърът изгражда дърво въз основа на HTML елементи и други обекти. програмен кодстраници. Когато изпълнява този процес, той взема предвид влагането на елементи един в друг.

В резултат на това браузърът използва полученото DOM дърво не само в своята работа, но също така ни предоставя API за удобна работас него чрез JavaScript.

Когато изгражда DOM, браузърът създава обекти от HTML елементи, текст, коментари и други обекти на този език ( DOM възли- дървета).

В повечето случаи уеб разработчиците се интересуват само от обекти (възли), образувани от HTML елементи.

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

Елементите, които са директно в даден елемент, са негови деца. И той е родител за всеки от тях. Освен това всички тези елементи по отношение един на друг са братя и сестри (братя).

Освен това в HTML всеки елемент винаги има един родител (HTML елемента, в който се намира директно). В HTML един елемент не може да има няколко родители. Единственото изключение е html елементът. Той няма родител.

За да получите DOM дървото, както го изгражда браузърът, трябва просто да "подредите" всички елементи в зависимост от връзката им един с друг.

Създаването на DOM дървото се извършва отгоре надолу.

Коренът на DOM дървото винаги е самият документ (възелът на документа). Освен това дървото се изгражда в зависимост от структурата на HTML кода.

Например HTML кодът, който разгледахме по-горе, ще има следното DOM дърво:

В самия връх на това дърво е възелът на документа. Този възел е свързан с html, той е негов дъщерен. HTML възелът се формира от html елемента ( ...). Главни възли ( ...) и тяло ( ...) са родители на html. Помежду си те са братя и сестри, т.к имат един родител. Главният възел е свързан със заглавието (lt;title>...), той е негово дете. Възлите h1 и div са свързани с тялото, за тях то е родителят. Възелът div е свързан с h2 (

...

) и p(), те са неговите деца.

Дървото започва, както е отбелязано по-горе, от документа на обекта (възела). Той от своя страна има един дъщерен възел, образуван от html елемента ( ...). елементи на главата ( ...) и тяло ( ...) са в html и следователно са негови деца. След това главният възел е родителят на заглавието (lt;title>...). Елементите h1 и div са вложени в тялото, което означава, че са негови деца. Div съдържа директно елементите h2 (

...

) и p(). Това означава, че div възелът за всеки от тях е родителят.

Ето как DOM дървото просто се изгражда в браузъра въз основа на HTML кода.

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

Упражнение

Въз основа на DOM дървото, показано на фигурата, създайте HTML кода.

Препратката съдържа описание на всички свойства и методи на стандартни вградени JavaScript обекти.

Обектен модел на документ

Обектен модел на документ(Document Object Model, DOM) е интерфейс за програмиране на приложения (API) за XML, който е разширен за работа и с HTML.

В DOM цялото съдържание на страницата (елементи и текст) е представено като йерархия от възли. Разгледайте следния код:

Здравей свят!

Този код може да бъде представен с помощта на DOM като йерархия от възли:

Като представя документ като дърво от възли, DOM API дава на разработчиците пълен контрол върху съдържанието и структурата на уеб страница.

Когато се описва дървовидната структура на DOM, се използва терминология, заимствана от родословните дървета.

По този начин възел, разположен директно над даден възел, се нарича родителски възел на дадения възел. Възлите, разположени едно ниво под този възел, се наричат ​​деца на този възел. Възли, които са на едно и също ниво и имат един и същ родител, се наричат ​​братя или сестри. Възлите, разположени произволен брой нива под даден възел, се наричат ​​негови наследници. Родителите, бабите и дядовците и всички други възли, разположени на произволен брой нива над даден възел, се наричат ​​негови предци.

Препратката към DOM съдържа описание на обектите Document, Element, Event и NodeList, включително описание на техните методи и свойства:

Справочник на BOM

BOM (Обектен модел на браузъра в превод от английски - Browser Object Model) осигурява достъп до прозореца на браузъра и ви позволява да манипулирате него и неговите елементи.

BOM обектите предоставят достъп до функционалността на браузъра, независимо от съдържанието на уеб страницата. Темата за BOM е интересна и сложна в същото време, тъй като поради дългото отсъствие на спецификацията, производителите на браузъри свободно разширяват BOM, както намерят за добре. Много елементи, подобни на различни браузъри, са станали де факто стандарти, които се спазват и до днес поради съображения за взаимна съвместимост. За да стандартизира тези основни аспекти на JavaScript, W3C дефинира основните елементи на BOM в спецификацията на HTML5.

Работа с DOM модела

Всеки обект Window има свойство документ A, който препраща към обект Document. Този обект Document не е самостоятелен обект. Това е централният обект на богат API, известен като Document Object Model (DOM), който определя как се осъществява достъп до съдържанието на документ.

Преглед на DOM

Обектен модел на документ (DOM)е основен интерфейс за приложно програмиране, който предоставя възможност за работа с HTML съдържаниеи XML документи. Интерфейсът за приложно програмиране на DOM (API) не е особено сложен, но има много архитектурни характеристики, с които трябва да сте наясно.

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

И възли, представляващи редове от текст. Един HTML документ може също да съдържа възли, представляващи HTML коментари. Помислете за следния прост HTML документ:

Това е HTML документ

Пример простотекст.

DOM представянето на този документ е показано на следната диаграма:

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

Всеки правоъгълник в тази диаграма е възел на документ, който е представен от обекта възел. Моля, имайте предвид, че фигурата показва три различни видовевъзли. Коренът на дървото е възелът на документа, който представлява целия документ. Възлите, които представляват HTML елементи, са възли от тип Element, а възлите, които представляват текст, са възли от тип Text. Документ, Елемент и Текст са подкласове на класа Node. Document и Element са двата най-важни класа в DOM.

Типът Node и неговите подтипове образуват йерархията на типове, показана на диаграмата по-долу. Обърнете внимание на формалните разлики между общите типове Document и Element и типовете HTMLDocument и HTMLElement. Типът документ представлява HTML и XML документ, а класът елемент представлява елемент от този документ. Подкласовете HTMLDocument и HTMLElement представляват конкретно HTML документ и неговите елементи:

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

Избор на елементи на документа

Мажоритарна работа клиентски програмина JavaScriptпо някакъв начин свързани с манипулирането на елементите на документа. По време на изпълнение тези програми могат да използват глобалната променлива на документа, която препраща към обекта Document. Въпреки това, за да извърши каквато и да е манипулация върху елементите на документа, програмата трябва по някакъв начин да получи или избере обектите Element, които се отнасят до тези елементи на документа. DOM дефинира няколко начина за избор на елементи. Можете да изберете елемент или елементи от документ:

по стойността на атрибута id;

по стойността на атрибута name;

по име на етикет;

по името на CSS класа или класовете;

за да съответства на конкретен CSS селектор.

Всички тези техники за избор на елементи са описани в следващите подраздели.

Избор на елементи по стойност на атрибут id

Всички HTML елементи имат id атрибути. Стойността на този атрибут трябва да бъде уникална в рамките на документа - два елемента в един и същи документ не трябва да имат една и съща стойност на атрибут id. Можете да изберете елемент по уникална стойност на атрибута id, като използвате метода getElementById()Обект на документа:

Var section1 = document.getElementById("section1");

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

Версии Internet Explorerпод IE8 getElementById метод() търси стойности на атрибута id по начин, който не е чувствителен към малки и главни букви и също така връща елементи, които съответстват на стойността на атрибута name.

Избор на елементи по стойността на атрибута name

Атрибутът за име на HTML първоначално е бил предназначен за именуване на елементи на формуляр и стойността на този атрибут е използвана, когато данните от формуляра са изпратени на сървъра. Подобно на атрибута id, атрибутът name присвоява име на елемент. Въпреки това, за разлика от id, стойността на атрибута name не трябва да бъде уникална: няколко елемента могат да имат едно и също име наведнъж, което е доста често срещано, когато се използва в радио бутони и формуляри за квадратчета за отметка. Освен това, за разлика от id, атрибутът name може да бъде указан само в определени HTML елементи, включително формуляри, елементи на формуляри и елементи.