VOOZH about

URL: https://www.geeksforgeeks.org/software-testing/web-fundamentals-dom/

⇱ Web Fundamentals - DOM - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

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:

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:

index.html file:

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:

Explore