Skip to main content

Understanding the Document Object Model

Introduction to Document Object Model​

The Document Object Model, also known as DOM, is a programming interface for web documents. It represents the structure of a document, like HTML or XML, in a tree format where each node in the tree is an object representing a part of the document. This is crucial in JavaScript as it allows you to manipulate the content and visual presentation of a webpage.

What is DOM?​

DOM is a convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree, with the 'document' as the root node.

Objects in the DOM tree may be manipulated using methods provided in the API, and any visible changes are immediately reflected in the document.

DOM and JavaScript​

JavaScript can access and manipulate all the elements of a DOM in a web page, making it dynamic. By selecting elements and changing their properties, JavaScript can add, modify, or delete both HTML elements and CSS styles.

For example, JavaScript can change the content of all elements in a document that have a certain class name:

var x = document.getElementsByClassName("demo");
// Access the first element in the collection
x[0].innerHTML = "Hello World!";

DOM Nodes​

In the DOM, all parts of the document, such as elements, attributes, and even text, are considered as nodes. There are different types of nodes, but in HTML scripting, the most common ones are:

  • Document Node: It's the root node, from where we can access any node.
  • Element Nodes: They represent each tag in HTML and can be nested.
  • Text Nodes: They are the content within the HTML tags.
  • Attribute Nodes: They are the properties of the HTML tag that give them their characteristics.

DOM Manipulation​

DOM manipulation involves selecting and changing DOM elements. Here are some basic ways you can manipulate the DOM with JavaScript:

Selecting DOM Elements​

Before you can change a DOM element, you must first select it. There are several ways to select an element:

  • document.getElementById(id): Get the element with a specific id.
  • document.getElementsByTagName(name): Get all elements with a specific tag name.
  • document.getElementsByClassName(name): Get all elements with a specific class name.

Changing DOM Elements​

After selecting an element, you can manipulate it:

  • .innerHTML: Change the inner HTML of an element.
  • .attribute: Change the attribute value of an HTML element.
  • .setAttribute(attribute, value): Set a new or change an existing attribute on an HTML element.
  • .style.property: Change the style of an HTML element.

Here's an example of how you might select an element by its ID and change its content:

document.getElementById("demo").innerHTML = "Hello, World!";

Conclusion​

Understanding the DOM is crucial to dynamic web development as it provides the means to connect HTML documents and JavaScript. By manipulating the DOM, JavaScript has the power to dynamically display and interact with HTML, making your web pages more interactive and user-friendly. So, keep practicing DOM manipulation and you'll be able to make your web pages come alive in no time.