Работа с DOM от конзолата

Можете да изследвате и модифицирате DOM, като използвате инструментите за разработка, вградени в браузъра. Нека да видим средствата за това на примера на Google Chrome.

Достъп до елемент

Отворете документа losi.html и в инструментите за разработчици отидете в раздела Елементи.

За да анализирате всеки елемент:

Изберете го в раздела Елементи.
... Или в долната част на раздела Елементи има лупа, когато щракнете върху нея, можете да изберете елемент, като щракнете върху.
... Или, което обикновено е най-удобно, просто щракнете с десния бутон върху желаното място на страницата и изберете „Check Element“ от менюто.

Вдясно ще има различна информация за елемента:

Изчисляван стил Последните CSS свойства на елемент, който той е придобил в резултат на прилагането на цялата каскада от стилове, включително външни CSS файлове и атрибута style. Стил Каскадата на стила, приложена към елемента. Всяко правило за стил е отделно, тук също можете да промените стилове, като щракнете върху. Метрики Размерите на елемента. ... И някои по-рядко използвани раздели, които ще станат ясни, докато изследвате DOM.

От друга страна, в Elements можете да видите CSS псевдоелементи като: before,: after. Това също е за удобство, те не съществуват в DOM.