Какво е Дом:-

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

За да разберем по-добре защо DOM е полезен, нека първо обсъдим какво се има предвид под „обект“ в компютърното програмиране.

Какво е обект?

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

Колкото повече прави една програма, толкова повече данни трябва да обработва и управлява. Без измерима, организирана система за това, нарастващата сложност би причинила грешки. Никой не обича буболечки.

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

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

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

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

Основният извод тук е, че обектите комбинират данни по логичен, класифициран начин. За да разберете по-добре това, е полезно да си представите обект като дърво. Добре, като друго дърво, което е с главата надолу. Името на обекта е като „корена“ на дърво, а всичките му клони са като данните, съхранявани вътре. Ето едно дърво за визуализация на обекта на нашия дом:

Защо имаме нужда от DOM

Преди да се увлека да планирам своето имение, нека свържем тази концепция за обект обратно към HTML. Разгледайте този основен HTML файл:

Забележете, че неговите части също са структурирани в йерархия. Тагът ‹html› действа като най-горната „къща“ в нашия пример. В нашата HTML „къща“ имаме етикети ‹head› и ‹body›, които са като нашите стаи. И накрая, има най-специфичните елементи: ‹title›, ‹h1›, ‹h2›, ‹p›, ‹img› и ‹button›. Мислете за това като за специфични за стаята предмети, като леглото и лампата.

Елементите в HTML документ са структурирани по този начин поради същата причина като обектите: йерархичната структура помага на компютърните програми да четат и обработват информацията. В случая с HTML вашият уеб браузър е програмата, а скриптовите езици като JavaScript са това, което променя и модифицира HTML кода.

Но има проблем. HTML документите сами по себе си не са обекти. Те не могат да бъдат прочетени от JavaScript без някакъв вид превод от файл към обект. Тук се намесва DOM.

DOM представлява цял HTML документ като един обект. За да създаде DOM, уеб браузърът, който чете HTML файла, взема всички негови части, от основния елемент ‹html› до най-малките тагове ‹span›, и ги извежда като обект, който JavaScript разбира.