Меню

Уроци

Влез Излез

JavaScript и работа с DOM

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

Наскоро някой е търсил разяснения за JavaScript и DOM, и ако статистиката на Google Analytics е правилна е прекарал близо половин час на сайта ми. Въпреки, че в цели 6 поста можете да срещнете да се говори за DOM, така и не съм обяснил точно какво е това.

DOM – Document Object Model

Нека започнем със самото съкращение. В буквален превод това е „Обектен модел на документа“. Този обектен модел има дървовидна структура, която следва структурата на HTML документа, създадена чрез различните тагове. DOM обаче включва не само таговете, но и асоциираните към тях event handler-и и JavaScript функции. Именно по тази причина, когато говорим за редактиране на HTML таговете/възлите на текущата страница, ние всъщност говорим за DOM манипулации.

DOM и JavaScript

Споменахме за event handler-ите и JavaScript функциите, но освен тях DOM включва и всикчи глобални променливи (както и функции, тъй като в JavaScript функциите се съдържат в променливи), които ние сме дефинирали.

С помощта на JavaScript ние можем да достъпваме информация и да правим промени не само по самият документ, но и като цяло в прозореца (поне дотолкова, доколкото функциите в JavaScript го позволяват).

Developer Tools

За прегледна форма на DOM можете да използвате така наречените инструменти за разработчици (developer tools) при различните браузъри – Chrome и Safari си имат Web Inspector, Firefox си има Firebug (това е addon, така че може да се наложи да си го инсталирате), а от няколко версии насам си има и вграден inspector, Opera си има Dragonfly, дори и Internet Explorer (8+) си има… нещо подобно, но много по-ограничено, отколкото при останалите браузъри. В повечето случаи можете да видите тези инструменти или като натиснете F12 или като кликнете с десен бутон върху някой елемент и изберете „Inspect“ (или и по двата начина – Chrome и Firefox).

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

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

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax