Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
896 views

Javascript DOM Cheat-Sheet

This document provides a cheat sheet for traversing the DOM (Document Object Model) in JavaScript. It defines key terms like Element vs Node and describes commonly used methods for traversing parent nodes, descendants, children, and siblings. Methods covered include getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll.

Uploaded by

DHANARAJ BASAVARAJ BHASKAR
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
896 views

Javascript DOM Cheat-Sheet

This document provides a cheat sheet for traversing the DOM (Document Object Model) in JavaScript. It defines key terms like Element vs Node and describes commonly used methods for traversing parent nodes, descendants, children, and siblings. Methods covered include getElementById, getElementsByClassName, getElementsByTagName, querySelector, and querySelectorAll.

Uploaded by

DHANARAJ BASAVARAJ BHASKAR
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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

You might also like