5/25/24, 10:35 AM Building Interactive Websites with JavaScript: JavaScript and the DOM Cheatsheet | Codecademy

Cheatsheets / Building Interactive Websites with JavaScript

JavaScript and the DOM

Nodes in DOM tree

A node in the DOM tree is the intersection of two branches containing data. Nodes can
represent HTML elements, text, attributes, etc. The root node is the top-most node of
the tree. The illustration shows a representation of a DOM containing different types of
nodes.

https://www.codecademy.com/learn/fscp-building-interactive-websites-with-javascript/modules/fecp-javascript-and-the-dom/cheatsheet 1/7
5/25/24, 10:35 AM Building Interactive Websites with JavaScript: JavaScript and the DOM Cheatsheet | Codecademy

HTML DOM

The DOM is an interface between scripting languages and a web page’s structure. The
browser creates a Document Object Model or DOM for each webpage it renders. The
DOM allows scripting languages to access and modify a web page. With the help of
DOM, JavaScript has the ability to create dynamic HTML.

Accessing HTML attributes in DOM

The DOM nodes of type Element allow access to the same attributes available to HTML <h1 id="heading">Welcome!</h1>
elements. For instance, for the given HTML element, the id attribute will be
accessible through the DOM.

The Document Object Model

The Document Object Model, or DOM is a representation of a document (like an HTML

page) as a group of objects. While it is often used to represent HTML documents, and
most web browsers use JavaScript interfaces to the DOM, it is language agnostic as a
model.
The DOM is tree-like and heirarchical, meaning that there is a single top-level object,
and other objects descend from it in a branching structure.

https://www.codecademy.com/learn/fscp-building-interactive-websites-with-javascript/modules/fecp-javascript-and-the-dom/cheatsheet 2/7
5/25/24, 10:35 AM Building Interactive Websites with JavaScript: JavaScript and the DOM Cheatsheet | Codecademy

The removeChild() Method

The .removeChild() method removes a specified child from a parent element. We const groceryList = document.getElementById('groceryList');
can use this method by calling .removeChild() on the parent node whose child we
const iceCream = document.getElementById('iceCream');
want to remove, and passing in the child node as the argument.
In the example code block, we are removing iceCream from our groceryList
element. groceryList.removeChild(iceCream);

The element.parentNode Property

The .parentNode property of an element can be used to return a reference to its <div id="parent">
direct parent node. .parentNode can be used on any node.
<p id ="first-child">Some child text</p>
In the code block above, we are calling on the parentNode of the #first-child
element to get a reference to the #parent div element. <p id ="second-child">Some more child text</p>
</div>
<script>
const firstChild = document.getElementById('first-child');
firstChild.parentNode; // reference to the #parent div
</script>

The document.createElement() Method

The document.createElement() method creates and returns a reference to a new const newButton = document.createElement("button");
Element Node with the specified tag name.
document.createElement() does not actually add the new element to the DOM, it
must be attached with a method such as element.appendChild() .

https://www.codecademy.com/learn/fscp-building-interactive-websites-with-javascript/modules/fecp-javascript-and-the-dom/cheatsheet 3/7
5/25/24, 10:35 AM Building Interactive Websites with JavaScript: JavaScript and the DOM Cheatsheet | Codecademy

The element.InnerHTML Property

The element.innerHTML property can be used to access the HTML markup that <box>
makes up an element’s contents.
<p>Hello there!</p>
element.innerHTML can be used to access the current value of an element’s
contents or to reassign it. </box>
In the code block above, we are reassigning the box element’s inner HTML to a
paragraph element with the text “Goodbye”.
<script>
const box = document.querySelector('box');
// Outputs '<p>Hello there!</p>':
console.log(box.innerHTML)
// Reassigns the value:
box.innerHTML = '<p>Goodbye</p>'
</script>

The document Object

The document object provides a Javascript interface to access the DOM. It can be const body = document.body;
used for a variety of purposes including referencing the <body> element, referencing
a specific element with ID, creating new HTML elements, etc.
The given code block can be used to obtain the reference to the <body> element
using the document object.

https://www.codecademy.com/learn/fscp-building-interactive-websites-with-javascript/modules/fecp-javascript-and-the-dom/cheatsheet 4/7
5/25/24, 10:35 AM Building Interactive Websites with JavaScript: JavaScript and the DOM Cheatsheet | Codecademy

The document.getElementById() Method

The document.getElementById() method returns the element that has the id // Save a reference to the element with id 'demo':
attribute with the specified value.
const demoElement = document.getElementById('demo');
document.getElementById() returns null if no elements with the specified ID
exists.
An ID should be unique within a page. However, if more than one element with the
specified ID exists, the .getElementById() method returns the first element in the
source code.

The .querySelector() Method

The .querySelector() method selects the first child/descendant element that // Select the first <div>
matches its selector argument.
const firstDiv = document.querySelector('div');
It can be invoked on the document object to search the entire document or on a
single element instance to search that element’s descendants.
In the above code block, we are using .querySelector() to select the first div // Select the first .button element inside .main-navigation
element on the page, and to select the first element with a class of button , inside the
const navMenu = document.getElementById('main-navigation');
.main-navigation element.
const firstButtonChild = navMenu.querySelector('.button');

The document.body Object

document.body returns a reference to the contents of the <body> HTML element

of a document/HTML page. The <body> element contains all the visible contents of
the page.

https://www.codecademy.com/learn/fscp-building-interactive-websites-with-javascript/modules/fecp-javascript-and-the-dom/cheatsheet 5/7
5/25/24, 10:35 AM Building Interactive Websites with JavaScript: JavaScript and the DOM Cheatsheet | Codecademy

The element.onclick Property

The element.onclick property can be used to set a function to run when an element let element = document.getElementById('addItem');
is clicked. For instance, the given code block will add an <li> element each time the
element.onclick = function() {
element with ID addItem is clicked by the user.
let newElement = document.createElement('li');
document.getElementById('list').appendChild(newElement);
};

The element.appendChild() Method

The element.appendChild() method appends an element as the last child of the var node1 = document.createElement('li');
parent.
document.getElementById('list').appendChild(node1);
In the given code block, a newly created <li> element will be appended as the last
child of the HTML element with the ID list .

The element.style Property

The element.style property can be used to access or set the CSS style rules of an let blueElement = document.getElementById('colorful-
element. To do so, values are assigned to the attributes of element.style .
element');
In the example code, blueElement contains the HTML element with the ID colorful-
element . By setting the backgroundColor attribute of the style property to blue, blueElement.style.backgroundColor = 'blue';
the CSS property background-color becomes blue.
Also note that, if the CSS property contains a hyphen, such as font-family or
background-color , Camel Case notation is used in Javascript for the attribute name,
so background-color becomes backgroundColor .

https://www.codecademy.com/learn/fscp-building-interactive-websites-with-javascript/modules/fecp-javascript-and-the-dom/cheatsheet 6/7
5/25/24, 10:35 AM Building Interactive Websites with JavaScript: JavaScript and the DOM Cheatsheet | Codecademy

The DOM Parent-Child Relationship

The parent-child relationship observed in the DOM is reflected in the HTML nesting <body>
syntax.
<p>first child</p>
Elements that are nested inside the opening and closing tag of another element are the
children of that element in the DOM. <p>second child</p>
In the code block, the two <p> tags are children of the <body> , and the <body> </body>
is the parent of both <p> tags.

Print Share

https://www.codecademy.com/learn/fscp-building-interactive-websites-with-javascript/modules/fecp-javascript-and-the-dom/cheatsheet 7/7