Course Content
Data types and Values
0/1
Object-oriented programming in JavaScript
0/1
Error handling and debugging in JavaScript
0/1
JavaScript functions for string and array manipulation
0/1
JavaScript Libraries and Frameworks
0/1
JavaScript
About Lesson

DOM Cheat Sheet

The Document Object Model (DOM) is a programming interface for web documents.
It represents the HTML or XML document as a tree structure, with each node representing a different part of the document, such as an element, attribute, or text content.

The DOM provides a way for JavaScript code to interact with the content and structure of a web page.
It allows you to access, modify, and add content to the page dynamically, without having to reload the entire page.

For example, you can use the DOM to:

  • Select and manipulate specific elements on a page
  • Modify the text content or attributes of an element
  • Create new HTML elements and add them to the page
  • Respond to user interactions, such as clicking a button or submitting a form

The DOM is a platform- and language-neutral standard, which means that it can be used with any programming language and on any platform that supports web technologies.
It is implemented by web browsers as a set of APIs that allow web developers to interact with web pages through JavaScript code.

Understanding how the DOM works and how to use it effectively is an important part of building dynamic and interactive web applications.

Accessing and manipulating DOM elements

To access and manipulate DOM elements in JavaScript, you first need to select the element you want to work with. There are several methods for selecting elements, including:

  • getElementById(): selects an element by its unique id attribute
  • getElementsByClassName(): selects elements by their class name
  • getElementsByTagName(): selects elements by their tag name
  • querySelector(): selects the first element that matches a specified CSS selector
  • querySelectorAll(): selects all elements that match a specified CSS selector

Once you have selected an element, you can then access and manipulate its properties and attributes using JavaScript. Here are some common DOM manipulation methods:

  • textContent: gets or sets the text content of an element
  • innerHTML: gets or sets the HTML content of an element
  • setAttribute(): sets the value of a specified attribute on an element
  • getAttribute(): gets the value of a specified attribute on an element
  • add(): adds a class to an element’s class attribute
  • remove(): removes a class from an element’s class attribute
  • toggle(): toggles a class on or off an element’s class attribute
  • addEventListener(): attaches an event listener to an element

JavaScript DOM and HTML Manipulation

Here’s a table of important JavaScript commands and methods for working with the DOM and manipulating HTML elements:

Action Description Example
Accessing Elements Access elements by their unique ID. document.getElementById("id")
Access elements by their class. document.getElementsByClassName("class")
Access elements by their tag name. document.getElementsByTagName("tag")
Access the first element that matches a CSS selector. document.querySelector("selector")
Access all elements that match a CSS selector. document.querySelectorAll("selector")
Changing Content and Attributes Change the text content of an element. element.textContent = "new text"
Change the HTML content of an element. element.innerHTML = "new HTML"
Set the value of a specified attribute. element.setAttribute("attr", "value")
Modify the inline style of an element. element.style.property = "value"
Adding and Removing Elements Create a new HTML element. document.createElement("tag")
Append a new element to a parent element. parentElement.appendChild(newElement)
Remove a child element from its parent. parentElement.removeChild(childElement)
Adding and Removing Classes Add a class to an element. element.classList.add("class")
Remove a class from an element. element.classList.remove("class")
Toggle a class on/off for an element. element.classList.toggle("class")
Handling Events Attach an event handler to an element. element.addEventListener("event", handler)
Prevent the default behavior of an event. event.preventDefault()
Traversing the DOM Get the parent node of an element. element.parentNode
Get a collection of child elements. element.children
Get the next sibling element. element.nextElementSibling
Attribute Manipulation Get the value of an attribute. element.getAttribute("attr")
Remove a specified attribute. element.removeAttribute("attr")
Creating Text Nodes Create a new text node. document.createTextNode("text")
Style Object Modify the inline style of an element. element.style.property = "value"
Miscellaneous Returns the type of a variable. typeof variable
Converts an iterable into an array. Array.from(collection)
Finds the first matching descendant element. element.querySelector("selector")
Finds all matching descendant elements. element.querySelectorAll("selector")

These are just a few of the many JavaScript commands and methods available for working with the DOM and manipulating HTML elements. Understanding and using these commands effectively will empower you to create dynamic and interactive web applications.