The DOM, or Document Object Model, is the API used by web browsers and other applications to access the contents of an HTML document.

The DOM represents the structure as a tree, nodes can contain child-nodes, nodes with no children are said leaf nodes.

With it, one can manipulate the structure and properties of the document and its constituent parts.

Major topics include finding elements, accessing style information, and animation.

Most work with the DOM is done using the JavaScript language, but the API is open to any language.

Attributes are a specific type of object in the DOM API. In earlier versions of the DOM API, they inherited from the Node type, but this was changed in version 4.

In the examples referring to dataset, "modern browsers" specifically excludes versions of Internet Explorer less than 11. See caniuse.com for more up to date information.

Origin of events

Events dont start at the thing you trigger the event on (a button for example).

Instead

It touches every element in its path and it inform every element that an event is happening. Events also go back up after they reach their destination, informing the elements again of its occurrence.

Capturing & Bubbling

As we learned, events start from the top of DOM tree, informs every node in its path down to its destination, then goes back up when it reaches its destination, also informing every element it touches on its way up about its occurrence.

Events going down the DOM tree are in the capturing phase, events going up the DOM tree are in the bubbling phase.

By default events are listened to in the bubbling phase. To change this you can specify which phase the event gets listened to by specifying the third parameter in the addEventListener function. (code example in the capture section)

The interfaces detailed herein were introduced in DOM Level 2 Style, which came out at approximately the same time as DOM Level 2 Core and is thus considered "part of DOM version 2".