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 attributegetElementsByClassName(): selects elements by their class namegetElementsByTagName(): selects elements by their tag namequerySelector(): selects the first element that matches a specified CSS selectorquerySelectorAll(): 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 elementinnerHTML: gets or sets the HTML content of an elementsetAttribute(): sets the value of a specified attribute on an elementgetAttribute(): gets the value of a specified attribute on an elementadd(): adds a class to an element’s class attributeremove(): removes a class from an element’s class attributetoggle(): toggles a class on or off an element’s class attributeaddEventListener(): 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.