DOM: the object tree behind the web page

Useful to know

The web page has a text source, but the browser also works with its representation in memory. This representation is called Document Object Model, or DOM. The document is organized as a tree of nodes and objects. Through the provided interfaces, the program can find elements, change their content and add new parts. Thus, the button, title, and list are not just visible forms on the screen, but parts of a structure available for program work. [1]

DOM is not the language itself JavaScript. It is a programming interface for documents that is often used through JavaScript in the browser. [1] The distinction is useful in learning: variable, condition, and function are concepts of the language, while finding an element in the page uses the interfaces of the environment. A beginner may understand cycles and still need to learn how to select and update specific elements. The two knowledges complement each other without being the same.

Let's have a fictional list of books and a separate field for the number of results. After selecting a category, we want the inscription to show the new number. To describe the change, we can first indicate which element holds the inscription and what text we expect after the selection. This is a small task with a clear result. It is not necessary to replace the entire document to explain how one of its parts is updated after a visitor action.

The textContent property represents the text content of a node and its descendants. When setting a value, its existing children are replaced by a text node. [2] This has practical significance: if there is a separate icon in the inscription as a child element, the mechanical setting of textContent on the entire container will remove it. Therefore, the structure of the example must be considered before the change. The convenient method has a specific behavior that does not depend on the programmer's intention.

Different is the use of innerHTML, which processes the content as HTML. For plain text, MDN recommends textContent, instead of unnecessary use of HTML processing. [2] In a learning interface, we can compare a book name containing a smaller character with a true HTML element. The goal is to see if we want to show symbols or create a structure. A clear distinction prevents errors where data is unintentionally treated as instructions for building the page.

When checking the change, it is useful to observe both the final inscription and the adjacent elements. Is there an icon left? Has only the correct result been changed? Does it work again? These questions turn the abstract tree into a specific maintenance task. DOM gives access to the document, and a good solution selects the exact part of the structure and the simplest operation that corresponds to the desired result.