The DOM is a convention used for interacting with HTML elements - a platform independent model, meaning it is up to the vendor to implement it.
HTML nodes are in a tree format, so using JavaScript it is possible to create, update, delete HTML elements. It is a combination of an API and a tree data structure.
We can also add or trigger events, change css styles et al - all using the DOM API provided by the browser.
Finding an element
element.querySelector(cssElement);
document.getElementById(idOfElement);
Single elements that are returned by the DOM implement the HTMLElement, Element, Node, EventTarget, ParentNode, ChildNode interfaces.
Nodelists and Live nodelists
A Nodelist is just that, a list (an Array-like object, but not an Array) of DOM nodes.
The difference between "live" and "not live" is "live" is a reference to the node, so changes are reflected in the list - live updates of DOM elements.
These selectors produce live node lists:
element.getElementsByClassName(cssClassName);
element.getElementsByTagName(tagName);
document.getElementById('elementId').childNodes;
Static list:
element.querySelectorAll(cssSelector);
HTMLElement
Every html element has a LOT of properties including the following:
- innerHTML
- innerText
- dataset
- textContent
- id
- className
- classList
- tagName
They also have these methods:
- setAttribute
- getAttribute
- hasAttribute
- removeAttribute
- addEventListener
- removeEventListener
You'll be using these ones a lot.
Traversal
As the DOM is a tree structure, to traverse the tree you can use methods on any element:
- parentNode
- children
- childNodes
- firstElementChild
- lastElementChild
- nextElementSibling
- previousElementSibling
CRUD methods
As well as traversing, we can create nodes. You have to have a starting point, so that will be a node that you have selected.
- removeChild
- appendChild
- insertBefore
- insertAdjacentHTML
Events and EventTarget
We can add interactivity using the DOM methods addEventListener, removeEventListener, dispatchEvent. The event object has a type, target, currentTarget. The callback takes an event object - which is the event on the DOM element, hence event.target is the element that had the event triggered.
There are also methods on this event object such as preventDefault, stopPropagating, stopImmediatePropagation.
Event phases
There are 4 phases, NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
CAPTURING_PHASE: trickles down from window to target's parent, executing handlers added with useCapture = trueAT_TARGETor 'Target phase': on the target itself, executes handlers with useCapture = falseBUBBLING_PHASEor 'Bubbling phase': Bubbles up from the target's parent to window, executing handlers with useCapture = false