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. |