Alexandria's Notes

Document object model (DOM)

3 min read

The DOM…

  • is an API for web documents, representing an HTML or XML document as a tree-like structure of nodes.
  • provides a way to programmatically interact with and manipulate the elements and styles of a web page.
  • is a cross-platform and language-independent API, standardized by the W3C and originally published by the W3C in 1998. It arose out of the need for a standardized way to interact with the document structure, which was browser-specific before then.
  • can be accessed by the global document object when JavaScript runs in a browser.
<html>
	<head>
		<title>My title</title>
	</head>
	<body>
		<a href="https://google.com">My link</a>
		<h1>My header</h1>
	</body>
</html>

Why should you care about the DOM?

  1. Dynamic and rich web pages: With the DOM, you can modify a web page on the fly, without requiring a page reload.
  2. Event handling: Attach event listeners to elements on the page. You can respond to user interactions, such as clicks.
  3. Web app development: Libraries and frameworks, such as React, Angular, or Vue.js, heavily rely on the DOM.
  4. Browser compatibility: By leveraging the DOM, you can write JavaScript that works across browsers and platforms.

However, even amongst experienced developers, there is often a knowledge gap when it comes to the DOM. You don’t need to understand the inner workings of the DOM if you’re using a library like jQuery.

Is the DOM composed of “nodes” or “elements”?

The DOM is a tree of Node objects. There are different types of nodes. Elements are a type of node, derived from Element, which inherits from the Node interface.

ConstantValueDescription
Node.ELEMENT_NODE1HTML elements like <p>, <body>, or <script>
Node.TEXT_NODE3The Text inside an Element or Attr.
Node.COMMENT_NODE8A comment, such as <!-- -->
Node.DOCUMENT_NODE9The entire window.document object.

The DOM API

The global object document represents the root of the HTML document and provides methods and properties to interact with the DOM.

Retrieving elements
// get the first element matching the specified id
const element = document.getElementById('elementId');
// get live collection of all elements with specified class name
const elements = document.getElementsByClassName('className');
// get elements with specified tag name
const elements = document.getElementsByTagName('tagName');
// get first element that matches specified CSS selector
const element = document.querySelector('selector');
// get a NodeList of elementings matching CSS selector
const elements = document.querySelectorAll('selector');
Traversing the DOM

Any node has relationships to other nodes in the DOM tree.

Modifying elements
  • document.createElement(htmlTag): Creates a new element with the specified tag name.
  • appendChild(node): Appends a node as the last child of an element.
  • removeChild(node): Removes a child node from an element.
  • replaceChild(newNode, oldNode): Replaces a child node with a new node.
  • insertBefore(newNode, referenceNode): Inserts a new node before a reference node.
  • cloneNode(deep): Clones an element, optionally including its descendants if deep is set to true.
Modifying element properties
  • element.textContent: Gets or sets the text content of an element.
  • element.innerHTML: Gets or sets the HTML content of an element.
  • element.setAttribute(name, value): Sets the value of an attribute on an element.
  • element.getAttribute(name): Retrieves the value of an attribute from an element.
  • element.removeAttribute(name): Removes an attribute from an element.
  • element.style.property: Accesses or modifies the inline style of an element.
  • element.classList: Provides methods to manipulate the class list of an element, such as add(), remove(), toggle(), and contains().

innerHTML vs. textContent

innerHTML should be used sparingly to avoid potential security risks. Prefer to use textContent for adding text.

innerHTML vs. createElement() for manipulating the DOM

Favor createElement(). It has better performance, security, flexibility, & maintainability.

Use innerHTML when you need to set or replace the entire content of an element with an HTML string. Be sure to securely sanitize any user input strings.

Graph View

Backlinks