The DOM Cheatsheet By Chloe

The DOM stands for 'Document Object Model'
It is a built in object that allows programming languages to manipulate the context, structure and style of a website.
To represent the DOM internally, the browser creates what is known as a tree, with the document object being the ROOT node.
All elements in the DOM are referred to as nodes. Which are parent, child or siblings depending on the relation to other nodes.
Everything is the child of the DOCUMENT NODE.
In our image:
The body would be the parent of the anchor tag, the head would be the sibling of the body tag and the title would be the child of the head tag.
To identify what kind of node an element is you can use the .nodeType property and it will return a number.
CLICK HERE to see a full list of the node types.

Accessing Elements using the DOM

There are five different methods to access elements using the document object. I will outline them here and then you can CLICK HERE to see examples on the JS examples page.

ELEMENT IT ACCESSES METHOD
ID document.getElementById('id-name')
CLASS document.getElementsByClassName('class-name')
TAG NAME document.getElementsByTagName('tag-name')
QUERY SELECTOR(single) document.querySelector()
QUERY SELECTOR (all) document.querySelectorAll()

Traversing the DOM

You sometimes will not want to move through the DOM by specifying each and every element beforehand.
This is where traversing across the DOM is essential to move up and down branches, using the parent, child and sibling nodes.

PARENT NODES:
The parent nodes are the nodes that are ONE level above another node. There are two methods to retrieve the parent nodes:
.parentNode - retrieves the parent node.
.parentElementNode - retrieves the parent element node.
.parentNode.parentNode - using the method twice will retrieve the grandparent.

CHILD NODES:
Child nodes are the nodes that are ONE level below a node. Any nodes further down than that are known as descendants. The methods to retrieve child nodes are:
.childNode - will return a list of all child nodes. Including text.
.firstChild - returns the first child node.
.lastChild - returns the last child node.
.children - returns all the element child nodes.
.firstElementChild - returns the first child element node.
.lastElementChild - returns the last child element node.

The for...of loop can be used the iterate through all child nodes.

SIBLING NODES:
Siblings nodes are are the same level of the DOM tree and do not have to be the same type of node. I.e. text, elements and comments can all be siblings. The methods to retrieve siblings nodes are:
.previousSibling - returns the previous sibling node.
.nextSibling - returns the next sibling node.
.previousElementSibling - returns the previous sibling element node.
.nextElementSibling - returns the next sibling element node.

CLICK HERE to see examples of traversing the DOM using parent/child/sibling nodes.

Creating, inserting and removing nodes using the DOM

In a dynamic website, elements and text are often added using JavaScript, so that they can be manipulated and changed interactively. I will outline the methods here, CLICK HERE to see an example of how to apply it.

CREATING NEW NODES:
METHOD WHAT IT DOES
createElement() Creates a new element node
createTextNode() Creates a new text node
node.textContent Get or set the text content of an element node.
node.innerHTML Get or set the HTML content of an element.


INSERTING NODES INTO THE DOM:
METHOD WHAT IT DOES
node.appendChild() Add a node as the last child of a parent element.
node.insertBefore() Insert a node into a parent element before a specified sibling node.
node.replaceChild() Replace an existing node with a new node.


REMOVING NODES:
METHOD WHAT IT DOES
node.removeChild() Remove child node
node.remove() Remove node.


Modifying Attributes

An attribute contains information about an element. For example, the src attribute tells the browser where to retrieve the image from.
Using JS you are able to modify the attributes. I will outline what they do here, to see examples CLICK HERE.

MODIFYING ATTRIBUTES:
METHOD WHAT IT DOES
element.hasAttribute(); Returns a boolean value.
element.getAttribute(); Returns value of specified attribute or null.
element.setAttribute(); Adds or updates value of a specified attribute.
element.removeAttribute(); Removes an attribute from an element.


Modifying Classes

Classes are used in CSS to style elements, in JS we have the following methods to modify the classes. We will outline the methods here, CLICK HERE to see examples.

METHOD WHAT IT DOES
element.className(); Gets or sets class value
classList.add(); Adds one or more class values.
classList.toggle(); Toggles a class on or off.
classList.contain(); Check if class value exists.
classList.replace(); Replace existing class value with a new class value.
classList.remove(); Removes a class value.