DOM Cheatsheet

Some examples of how to use the Document Object Model

May 09, 2023

Introduction
Copy link

The DOM, or Document Object Model, provides methods to add, change, and remove HTML elements using JavaScript.

Prerequisites

  • HTML Elements, Variables, Strings, Objects

Each section will first show the code with the word placeholder, followed by examples of what can replace the placeholder. Next, there will be examples of how to use this method. This will usually involve using a variable, just remember that the variable names are your choice.

Here's a table of the methods detailed in this article.

GoalMethod
Selectdocument.getElementById('your-element-id');document.getElementById('your-element-id');
Add a classyourHtmlElement.classList.add('your-class');yourHtmlElement.classList.add('your-class');
Remove a classyourHtmlElement.classList.remove('your-class');yourHtmlElement.classList.remove('your-class');
Createdocument.createElement('div');document.createElement('div');
Add to the pageyourParentElement.appendChild(yourHtmlElement);yourParentElement.appendChild(yourHtmlElement);
Remove from the pageyourParentElement.removeChild(yourHtmlElement);yourParentElement.removeChild(yourHtmlElement);
Adjust the inner HTMLyourHtmlElement.innerHTML = 'Your new text';yourHtmlElement.innerHTML = 'Your new text';

Select an HTML element
Copy link

  • document.getElementById(placeholder);document.getElementById(placeholder);
  • Replace placeholderplaceholder with a string that matches the id of the element you want to select, such as 'about''about' or 'menu-item''menu-item'.

Examples
Copy link

The code below is part of the HTML file.

index.html
index.html
<body>
  <h1>Hello</h1>
  <div id="about-section"></div>
</body>
index.html
index.html
<body>
  <h1>Hello</h1>
  <div id="about-section"></div>
</body>

The code below selects the <div><div> element on line 6 using its id 'about-section''about-section' and stores it in a variable named aboutabout.

script.js
script.js
const about = document.getElementById('about-section');
script.js
script.js
const about = document.getElementById('about-section');

Add a Class to an HTML Element
Copy link

  • placeholder1.classList.add(placeholder2)placeholder1.classList.add(placeholder2)
  • Replace placeholder1placeholder1 with your HTML element.
  • Replace placeholder2placeholder2 with the class you want to add as a string, such as 'container''container' or 'serif-header''serif-header'.

Examples
Copy link

The code below is in the HTML file.

index.html
index.html
<body>
  <h1 id="greeting">Hello</h1>
  <div id="home"></div>
</body>
index.html
index.html
<body>
  <h1 id="greeting">Hello</h1>
  <div id="home"></div>
</body>

To add the 'serif-header''serif-header' class to the <h1><h1> on line 2, use the code below.

script.js
script.js
// select the h1 by it's id
const h1Element = document.getElementById('greeting');
// add a class to the h1
h1Element.classList.add('serif-header')
script.js
script.js
// select the h1 by it's id
const h1Element = document.getElementById('greeting');
// add a class to the h1
h1Element.classList.add('serif-header')

Alternatively, you can do this without a variable.

script.js
script.js
//    select the element             add a class
document.getElementById('greeting').classList.add('serif-header');
script.js
script.js
//    select the element             add a class
document.getElementById('greeting').classList.add('serif-header');

After either of the above JavaScript code examples run, the HTML in the browser will be updated. This will not change the HTML code you wrote in your code editor.

index.html
index.html
<body>
  <h1 id="greeting" class="serif-header">Hello</h1>
  <div id="home"></div>
</body>
index.html
index.html
<body>
  <h1 id="greeting" class="serif-header">Hello</h1>
  <div id="home"></div>
</body>

Remove a Class from an HTML Element
Copy link

  • placeholder1.classList.remove(placeholder2)placeholder1.classList.remove(placeholder2)
  • Replace placeholder1placeholder1 with your HTML element.
  • Replace placeholder2placeholder2 with the class you want to remove as a string, such as 'container''container' or 'serif-header''serif-header'.

Examples
Copy link

The code below is in the HTML file.

index.html
index.html
<body>
  <h1 id="greeting" class="serif-header">Hello</h1>
  <div id="home"></div>
</body>
index.html
index.html
<body>
  <h1 id="greeting" class="serif-header">Hello</h1>
  <div id="home"></div>
</body>

To remove the 'serif-header''serif-header' class from the <h1><h1> on line 2, use the code below.

script.js
script.js
// select the h1 by it's id
const h1Element = document.getElementById('greeting');
// remove a class from the h1
h1Element.classList.remove('serif-header')
script.js
script.js
// select the h1 by it's id
const h1Element = document.getElementById('greeting');
// remove a class from the h1
h1Element.classList.remove('serif-header')

Alternatively, you can do this without a variable.

script.js
script.js
//    select the element             remove a class
document.getElementById('greeting').classList.remove('serif-header');
script.js
script.js
//    select the element             remove a class
document.getElementById('greeting').classList.remove('serif-header');

After either of the above JavaScript code examples run, the HTML in the browser will be updated. This will not change the HTML code you wrote in your code editor.

index.html
index.html
<body>
  <h1 id="greeting">Hello</h1>
  <div id="home"></div>
</body>
index.html
index.html
<body>
  <h1 id="greeting">Hello</h1>
  <div id="home"></div>
</body>

Create an HTML Element
Copy link

  • document.createElement(placeholder);document.createElement(placeholder);
  • replace placeholderplaceholder with an HTML tag as a string, such as 'div''div', 'img''img', or 'section''section'

Examples
Copy link

The code below creates a new <div><div> element and stores it in a variable named newElementnewElement. The element is not on the page yet.

script.js
script.js
const newElement = document.createElement('div');
script.js
script.js
const newElement = document.createElement('div');

The code below creates a new <p><p> element and stores it in a variable named newParagraphnewParagraph. The element is not on the page yet.

script.js
script.js
const newParagraph = document.createElement('p');
script.js
script.js
const newParagraph = document.createElement('p');

Add an Element to the Page
Copy link

  • placeholder1.appendChild(placeholder2)placeholder1.appendChild(placeholder2)
  • Replace placeholder1placeholder1 with your parent element, or the element that you want your element to be inside of.
  • Replace placeholder2placeholder2 with your child element, or the element that will go inside the other element.

Examples
Copy link

The code below is part of the HTML file.

index.html
index.html
<div id="about-section">
 
</div>
<div id="contact-section">
 
</div>
index.html
index.html
<div id="about-section">
 
</div>
<div id="contact-section">
 
</div>

To add a new <p><p> element to the about section, use the code below.

script.js
script.js
// create the new element
const newParagraph = document.createElement('p');
// select the parent element
const aboutSection = document.getElementById('about-section');
// add the new element to the parent element
aboutSection.appendChild(newParagraph);
script.js
script.js
// create the new element
const newParagraph = document.createElement('p');
// select the parent element
const aboutSection = document.getElementById('about-section');
// add the new element to the parent element
aboutSection.appendChild(newParagraph);

After the code above is executed, the HTML in the browser will be updated. This will not change the HTML code written in your code editor.

index.html
index.html
<div id="about-section">
  <p></p>
</div>
<div id="contact-section">
 
</div>
index.html
index.html
<div id="about-section">
  <p></p>
</div>
<div id="contact-section">
 
</div>

Remove an Element from the Page
Copy link

  • placeholder1.removeChild(placeholder2)placeholder1.removeChild(placeholder2)
  • Replace placeholder1placeholder1 with your parent element, or the element that surrounds the element you wish to remove.
  • Replace placeholder2placeholder2 with your child element, or the element that you want to remove from the page.

Examples
Copy link

The code below is part of the HTML file.

index.html
index.html
<div id="about-section">
  <p id="about-paragraph">This is a paragraph in the about section.</p>
</div>
<div id="contact-section">
 
</div>
index.html
index.html
<div id="about-section">
  <p id="about-paragraph">This is a paragraph in the about section.</p>
</div>
<div id="contact-section">
 
</div>

To remove the <p><p> element on line 21, use the code below.

script.js
script.js
// select the element to be removed
const paragraph = document.getElementById('about-paragraph');
// select the parent element
const aboutSection = document.getElementById('about-section');
// remove the paragraph from the about section
aboutSection.removeChild(paragraph);
script.js
script.js
// select the element to be removed
const paragraph = document.getElementById('about-paragraph');
// select the parent element
const aboutSection = document.getElementById('about-section');
// remove the paragraph from the about section
aboutSection.removeChild(paragraph);

After the code above is executed, the HTML in the browser will be updated. This will not change the HTML code written in your code editor.

index.html
index.html
<div id="about-section">
 
</div>
<div id="contact-section">
 
</div>
index.html
index.html
<div id="about-section">
 
</div>
<div id="contact-section">
 
</div>

Adjust the innerHTML of an Element
Copy link

  • Set the inner HTML:
    • placeholder1.innerHTML = placeholder2;placeholder1.innerHTML = placeholder2;
    • Replace placeholder1placeholder1 with the element whose innerHTMLinnerHTML you want to adjust.
    • Replace placeholder2placeholder2 with your desired HTML code as a string.
  • Get the inner HTML:
    • let placeholder3 = placeholder4.innerHTMLlet placeholder3 = placeholder4.innerHTML
    • Replace placeholder3placeholder3 with a variable name that will store the inner HTML.
    • Replace placeholder4placeholder4 with the HTML element whose inner HTML you want to access.

Examples
Copy link

The code below is part of the HTML file.

index.html
index.html
<div id="about-section">
  <p id="about-paragraph">This is a paragraph in the about section.</p>
</div>
<div id="contact-section">
 
</div>
index.html
index.html
<div id="about-section">
  <p id="about-paragraph">This is a paragraph in the about section.</p>
</div>
<div id="contact-section">
 
</div>

To edit the innerHTMLinnerHTML of the contact section, use the code below.

script.js
script.js
document.getElementById('contact-section').innerHTML = '<h1>Contact</h1>';
script.js
script.js
document.getElementById('contact-section').innerHTML = '<h1>Contact</h1>';

After the code above is executed, the HTML in the browser will be updated. This will not change the HTML code written in your code editor.

index.html
index.html
<div id="about-section">
  <p id="about-paragraph">This is a paragraph in the about section.</p>
</div>
<div id="contact-section">
  <h1>Contact</h1>
</div>
index.html
index.html
<div id="about-section">
  <p id="about-paragraph">This is a paragraph in the about section.</p>
</div>
<div id="contact-section">
  <h1>Contact</h1>
</div>

To get the innerHTMLinnerHTML of an element, use the code below.

script.js
script.js
let pText = document.getElementById('about-paragraph').innerHTML;
console.log(pText);
script.js
script.js
let pText = document.getElementById('about-paragraph').innerHTML;
console.log(pText);

The variable pTextpText in the code above is now storing the innerHTMLinnerHTML of the paragraph in the about section. The output to the console would read: "This is a paragraph in the about section."

Related:

javascriptDOM

Back to home