JavaScript и работа с DOM

Според статистиките на сайта, наскоро някой е търсил разяснения за JavaScript и DOM. Ако статистиката е правилна е прекарал близо половин час на сайта ми. Въпреки, че в цели 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 (това е add-on, така че може да се наложи да си го инсталирате). От няколко версии насам си има и вграден inspector.
  • Opera си има Dragonfly.
  • Дори и Internet Explorer (8+) си има… нещо подобно, но много по-ограничено, отколкото при останалите браузъри.

В повечето случаи можете да видите тези инструменти като натиснете F12. Ако ли не — кликнете с десен бутон върху някой елемент и изберете “Inspect”.

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

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

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

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

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните ви за коментари.