6 The Document Object Model API

In the previous chapter, we covered the current state of JavaScript and ECMAScript syntax. Now it’s time to look at how browser APIs let us manage the user interface in Vanilla JavaScript through the DOM API.

The DOM is the in-memory representation of the document that the rendering engine uses to paint the page. It is a tree of nodes where every element, text node, and comment has a position and relationships to parent, children, and siblings. Understanding that structure is the foundation for manipulating UI with JavaScript.

You do not need a library to work with the DOM. The platform already provides selectors, node constructors, insertion and removal helpers, and a rich event system. Many helpers from the past are no longer necessary today.

Performance matters when changing the DOM. Making many uncoordinated edits can result in additional layout and painting work, so using it properly can make a difference in the user experience.

This section covers the document model, the most used interfaces, how to query and modify the tree, and the event patterns you will use daily. With these tools, you can build rich interfaces with no external dependencies.

6.1 The DOM tree

6.2 The API

6.2.1 HTMLElement interface

6.2.2 Global DOM objects

6.2.3 Working with different documents

6.2.4 Querying the document

6.2.5 Browsing the tree

6.2.6 Elements available

6.2.7 Modifying elements

6.2.8 Properties vs. attributes

6.2.9 Creating elements

6.2.10 Element arrangement

6.2.11 Custom properties with dataset

6.2.12 Working with styles

6.2.13 Working with events

6.3 Browser Web APIs

6.4 Summary