JS DOM Traversal Cheat Sheet
By Web Dev Simplified https://courses.webdevsimplified.com
Element vs Node Element Node
Anything within an HTML document
Only HTML Elements including comments, text, HTML
Types <span>, <div>, <body>, <a>, etc. elements and much more
“text”, <!-- comment -->, <span>
A special type of node with all the
The most basic HTML piece with only the
Methods/Properties methods/properties of a node plus
most basic methods/properties
additional methods/properties
Can contain non-HTML elements so
Which To Use Almost always use elements
nodes are generally harder to work with
HTMLCollection vs NodeList HTMLCollection NodeList
Anything within an HTML document
Only HTML Elements including comments, text, HTML
Element Types <span>, <div>, <body>, <a>, etc. elements and much more
“text”, <!-- comment -->, <span>
Available Array Methods None Only forEach
map, forEach, reduce, filter, etc.
Live Updates
When a new element is added to the page Always Sometimes
and it would match the elements in the list
it is automatically added to the list
Use static NodeLists or convert to an
Generally don’t use as live updates can
Which To Use lead to hard to fix bugs
array since arrays have many additional
methods such as map and reduce
Parent
Name Return Type Description Results
Select the parent element of div
parentElement Element the current element
a.parentElement Select the div parent of the a “text” a span
Select the parent node of the div
parentNode Node current element
a.parentNode Select the div parent of the a “text” a span
Select the closest ancestor .c
closest element that matches the CSS
Element selector div
a.closest(“.c”) Select the first ancestor of the a tag with
the class c a b
Descendants
Name Return Type Description Results
Select the first element that
getElementById matches the id
Element #a #b #c #d
Select the element with the id b
document.getElementById(“b”) Only works on the document
Select all elements that match
div span
the class name that are
getElementsByClassName HTMLCollection
descendants of the current
Elements Only .a .b
div.getElementsByClassName(“a”) Live element
Select all elements with the class a that
are descendants of the div
.a .b .b .a
Select all elements of a
div span
specific type that are
getElementsByTagName HTMLCollection
descendants of the current
Elements Only a b
div.getElementsByTagName(“b”) Live element
Select all b elements that are
descendants of the div
a b b a
Select all elements that match
div span
the CSS selector that are
querySelectorAll NodeList
Elements Only
descendants of the current .a .b
div.querySelectorAll(“.a”) Static element
Select all element with the class a that
are descendants of the div
.a .b .b .a
Select the first element that
div span
matches the CSS selector that
querySelector is a descendant of the current
Element .a .b
div.querySelector(“.a”) element
Select the first element with the class a
that is a descendant of the div
.a .b .b .a
children HTMLCollection Select all child elements of the div
Elements Only current element
div.children Live Select the child elements of the div “text” a span
childNodes NodeList Select all child nodes of the div
All Nodes current element
div.childNodes Live Select the child nodes of the div “text” a span
Siblings
Name Return Type Description Results
Select the first element that
nextElementSibling Element
comes after the current
element
b div “text” a
div.nextElementSibling
Select the a element directly after the div
Select the first node that
nextSibling Node comes after the current
element
b div “text” a
div.nextSibling
Select the text node directly after the div
Select the first element that
previousElementSibling Element
comes before the current
element b div “text” a
div.previousElementSibling Select the b element directly before the
div
Select the first node that
previousSibling Node
comes before the current
element b div “text” a
div.previousSibling Select the b element directly before the
div
