Web Fundamentals - DOM

Last Updated : 28 Jan, 2026

The DOM is a programming interface for web documents. It represents the structure of an HTML or XML document as a tree, where each element, attribute, and piece of text is represented as a node. The DOM allows developers to manipulate the content and structure of a web page without requiring page reloads by interacting with these nodes programmatically, typically using JavaScript.

How does the DOM Work?

When a web page is loaded in a browser, it parses the HTML and transforms it into the DOM. This tree-like structure represents all elements on the page, from the root <html> element to the individual text nodes inside elements like <h1>, <p>, etc.

For example, consider a simple HTML document:

HTML 
<!DOCTYPE html>
<html>
  <head>
    <title>Document Title</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

In the DOM:

  • The <html> element is the root node.
  • The <head> and <body> elements are child nodes of <html>.
  • The <title> element is a child of <head>.
  • The <h1> and <p> elements are children of <body>.
  • The text "Hello World" and "This is a paragraph" are represented as text nodes.

This hierarchical structure allows for easy access to elements, attributes, and text on the page, enabling dynamic interactions.

Types of Nodes in the DOM

The DOM consists of different types of nodes that represent various parts of an HTML document. Some of the key node types include:

  1. Element Nodes: Represent HTML tags, such as <div>, <h1>, and <p>.
  2. Text Nodes: Represent the text content inside elements, like the "Hello World" in <h1>Hello World</h1>.
  3. Attribute Nodes: Represent the attributes of HTML elements, such as id, class, or src.
  4. Document Node: The root node representing the entire HTML document.

DOM Structure Example

Screenshot-2025-01-09-131706
DOM Structure Example

This structure is used by JavaScript (and by Selenium) to identify elements and manipulate their contents or attributes.

Selenium and the DOM

How Selenium Interacts with the DOM

Selenium WebDriver allows developers to automate browser tasks by interacting with elements in the DOM. With Selenium for Java, we can easily perform actions like clicking buttons, filling forms, and verifying the content of web pages by accessing and manipulating the DOM. The key idea is that Selenium operates on the DOM and sends commands to the browser to interact with the elements.

Some common tasks that Selenium performs using the DOM include:

  • Finding Elements: Selenium can locate elements using various strategies like ID, class name, CSS selectors, XPath, etc.
  • Interacting with Elements: Selenium can click on buttons, fill input fields, select items from dropdowns, and more by modifying DOM nodes.
  • Verifying Content: We can use Selenium to assert that text exists in elements, check element visibility, or verify attribute values.

Locating DOM Elements with Selenium

In Selenium Java, elements are located and manipulated using WebDriver methods. Here are some common ways to interact with DOM elements:

  • By ID:
    Using findElement() to locate an element by its id attribute:
WebElement element = driver.findElement(By.id("elementID"));
  • By Name:
    You can locate an element by its name attribute:
WebElement element = driver.findElement(By.name("elementName"));
  • By XPath:
    XPath allows for more complex queries, such as selecting elements based on text or hierarchical structure:
WebElement element = driver.findElement(By.xpath("//h1[text()='Hello World']"));
  • By CSS Selector:
    CSS selectors provide an easy way to locate elements based on their styles:
WebElement element = driver.findElement(By.cssSelector("h1"));
  • By Tag Name:
    This is useful when you want to select elements by their HTML tag name:
WebElement element = driver.findElement(By.tagName("p"));

Example of DOM Manipulation with Selenium

Let's look at an example where we dynamically change the content of an <h1> tag when a button is clicked:

HTML Structure:

<button id="changeButton">Click Me</button>
<h1 id="heading">Hello World</h1>

Selenium Java Code to Manipulate the DOM:

Java 
package DomExample;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.JavascriptExecutor;

public class DOMManipulationExample {
    public static void main(String[] args) {
        // Initialize WebDriver (assuming ChromeDriver is in the path)
        WebDriver driver = new ChromeDriver();
        
        // Open a sample page
        driver.get("path of the index.html\\index.html"); // Update path to the HTML file

        // Find the button and click it
        WebElement button = driver.findElement(By.id("changeButton"));
        button.click();

        // Find the heading element and change its text using JavaScript Executor
        WebElement heading = driver.findElement(By.id("heading"));
        JavascriptExecutor js = (JavascriptExecutor) driver;
        js.executeScript("arguments[0].innerText = 'Welcome to the DOM';", heading);

        // Validate if the text has been updated
        String updatedText = heading.getText();
        System.out.println("Updated Text: " + updatedText);

        // Close the browser
        driver.quit();
    }
}

index.html file:

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation Example</title>
</head>
<body>
    <h1 id="heading">Hello, World!</h1>
    <button id="changeButton">Change Heading Text</button>

    <script>
        // Adding an event listener to the button to change the heading text when clicked
        document.getElementById('changeButton').addEventListener('click', function() {
            document.getElementById('heading').innerText = 'Welcome to the DOM';
        });
    </script>
</body>
</html>

Output:

Web Fundamentals - DOM output
Web Fundamentals - DOM output

Explanation:

  • Button Click: The changeButton is located using its ID and clicked to trigger the action.
  • DOM Manipulation: The text content of the <h1> element is changed programmatically after the button click using the setText() method (for simulation purposes).
  • Validation: We retrieve the updated text to verify the change.

DOM Manipulation Methods in Selenium

Selenium offers several methods for interacting with and manipulating elements in the DOM:

  • getText(): Retrieves the visible text from a web element.
String text = element.getText();
  • sendKeys(): Used to simulate typing into input fields.
WebElement inputField = driver.findElement(By.id("input"));
inputField.sendKeys("Hello World");
  • click(): Clicks on buttons, links, or other clickable elements.
WebElement button = driver.findElement(By.id("submitButton"));
button.click();
  • getAttribute(): Retrieves the value of a specified attribute from an element.
String classValue = element.getAttribute("class");
  • clear(): Clears the content of text fields.
inputField.clear();
  • submit(): Submits a form.
WebElement form = driver.findElement(By.id("loginForm"));
form.submit();

Importance of DOM in Web Development and Selenium

Understanding the DOM is crucial for building and automating dynamic web pages. Without the DOM, changes to the web page would require constant server requests and page reloads, making interactions sluggish. Selenium leverages the DOM to interact with elements, simulate user actions, and verify the state of a page during automated testing.

Advantages of DOM in Selenium Automation:

  • Dynamic Testing: It enables testing of dynamic web applications where content updates without page reloads.
  • Element Interaction: Selenium interacts with HTML elements through the DOM, allowing for precise control over elements.
  • Improved Test Efficiency: Automating DOM manipulation allows for faster and more efficient test execution by simulating real user interactions.
Comment
Article Tags:
Software Testing
Software Testing

Explore