DOM: дървото от обекти зад уеб страницата

Полезно е да знаеш

Уеб страницата има текстов източник, но браузърът работи и с нейно представяне в паметта. Това представяне се нарича Document Object Model, или DOM. Документът се организира като дърво от възли и обекти. Чрез предоставените интерфейси програмата може да намира елементи, да променя съдържанието им и да добавя нови части. Така бутонът, заглавието и списъкът не са само видими форми на екрана, а части от структура, достъпна за програмна работа. [1]

DOM не е самият език JavaScript. Това е програмен интерфейс за документи, който често се използва чрез JavaScript в браузъра. [1] Разграничението е полезно при учене: променлива, условие и функция са понятия на езика, докато намирането на елемент в страницата използва интерфейсите на средата. Един начинаещ може да разбира цикли и пак да има нужда да научи как се подбират и обновяват конкретни елементи. Двете знания се допълват, без да са едно и също.

Нека имаме измислен списък с книги и отделно поле за броя на резултатите. След избор на категория искаме надписът да показва новия брой. За да опишем промяната, можем първо да посочим кой елемент държи надписа и какъв текст очакваме след избора. Това е малка задача с ясен резултат. Не е необходимо целият документ да бъде заменян, за да обясним как една негова част се актуализира след действие на посетителя.

Свойството textContent представя текстовото съдържание на възел и неговите наследници. При задаване на стойност съществуващите му деца се заменят с текстов възел. [2] Това има практическо значение: ако в надписа има отделна иконка като дъщерен елемент, механичното задаване на textContent върху целия контейнер ще я премахне. Затова структурата на примера трябва да бъде разгледана преди промяната. Удобният метод има конкретно поведение, което не зависи от намерението на програмиста.

Различно е използването на innerHTML, което обработва съдържанието като HTML. За обикновен текст MDN препоръчва textContent, вместо ненужно използване на HTML обработка. [2] В учебен интерфейс можем да сравним име на книга, съдържащо знак за по-малко, с истински HTML елемент. Целта е да се види дали искаме да покажем символи или да създадем структура. Ясното разграничение предотвратява грешки, при които данните неволно се третират като инструкции за изграждане на страницата.

При проверка на промяната е полезно да се наблюдават както крайният надпис, така и съседните елементи. Останала ли е иконката? Променен ли е само правилният резултат? Работи ли повторен избор? Тези въпроси превръщат абстрактното дърво в конкретна задача за поддръжка. DOM дава достъп до документа, а доброто решение избира точната част от структурата и най-простата операция, която отговаря на желания резултат.