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 твърде дълго, защото все си мислех, че ще има нещо повече. А то всъщност е нещо доста просто и елементарно.