---
description: Document Object Model or DOM is an essential component of web development using HTML5 and JavaScript. This tutorial aims to cover basic concepts of HTML document structure and how to manipulate it usi
title: What is DOM in Selenium WebDriver? Structure & Full Form
image: https://www.guru99.com/images/what-is-dom-in-selenium-webdriver.png
---
[Skip to content](#main)
**⚡ Smart Summary**
Document Object Model exposes an HTML page to JavaScript as a tree of objects, letting scripts and Selenium WebDriver read, locate and change any element on the page while the browser is running.
* 🔘 **Full Form:** DOM stands for Document Object Model, a W3C-standardised interface for HTML and XML documents.
* ☑️ **Tree Structure:** Every tag becomes a node, so html, head, body, article and p form a parent-child hierarchy.
* ✅ **Three Objects:** Window wraps the tab, Document marks the tree root, and Element represents each individual tag.
* 🧪 **Core Methods:** getElementById, querySelector and querySelectorAll retrieve nodes; innerHTML reads and rewrites their content.
* 🛠️ **Debugging:** Browser developer tools expose the parsed tree, and edits made there last only until the page reloads.
* 📊 **Events:** Actions such as click and load broadcast messages that onclick attributes or addEventListener can intercept.
[ Read More ](javascript:void%280%29;)
## What is DOM in Selenium WebDriver?
**DOM** in Selenium WebDriver is [an essential component of web development](https://www.guru99.com/selenium-tutorial.html) using HTML5 and JavaScript. The full form of DOM is Document Object Model. DOM is not a computer science concept. It is a simple set of interfaces standardized among web developers to access and manipulate documents in HTML or XML using JavaScript.
These standards help developers build a webpage without worrying about implementation details. Some of the organizations involved in standardizing these interfaces are likes of Mozilla, Apple, Microsoft, Google, Adobe etc. However, it is the W3C that formalizes a standard and publishes it – see here ().
The sections below cover document structure, the objects the DOM exposes, and how to inspect them. Mozilla keeps the current API reference on the [MDN Document Object Model pages](https://developer.mozilla.org/en-US/docs/Web/API/Document%5FObject%5FModel).
Every Selenium locator resolves against this same tree, so the structure below is what [findElement()](https://www.guru99.com/find-element-selenium.html) searches.
## Understanding the DOM Structure
You will need to understand the DOM structure if you are building any website that involves scripting using JavaScript. Understanding DOM is even more critical if you are doing any one or all of the following complicated tasks in your website –
1. Developing content that updates itself continuously without refreshing the entire page – like current price of all the stocks in your user’s portfolio
2. Developing advanced user interactions such as adding or modifying content dynamically – like ability to add more stocks to your portfolio
3. Developing content that is customizable by user – like ability to change the layout so that Mutual funds portfolio appears before stocks portfolio
4. Developing responsive content in your website thus making your website adapt to different media screens viz. iPhone, desktop, tablet etc. automatically
### A basic HTML page
my page title
my first article
### How does it look like to a browser’s DOM PARSER?
html > head > title
> body > aside
> article > p
### How do you access the body element?
### How do you say “Hello World”?
### Finally the entire HTML file will look like
Open Windows Notepad and paste the following content inside it. Then save the file as “MyFileNewFile.html” (ensure that your file name ends with .html).
my page title
my first article
Finally just open the file using any one of your preferred browser and you will see “Hello World!”
## Components of DOM in Selenium
Below are the main components of DOM is Selenium WebDriver:
* Window
* Document
* Element
Each component sits at a different level of the tree, starting from the outermost one.
### Window
Window is the object that contains the document object in a DOM. It sits on top of everything.
To get to a window object from a given document
In a tabbed environment each tab has its own window object. However, if one would like to catch and implement events like window.resizeTo and window.resizeBy they apply to the entire window and not to the tab alone.
#### Properties of Window Object in DOM
**window.localStorage** – gives access to browser’s local storage. The local storage can be used to store and retrieve data from a session.
**window.opener** **–** gets the reference to the window object that opened this window (either by clicking on a link or using window.open method)
#### Useful Methods of Window Object
**window.alert()** – displays an alert dialog with a message.
There are many useful events which window object exposes. We will discuss them in “Events” section under Advance Topics
### RELATED ARTICLES
* [UFT vs Selenium: Key Difference Between Them ](https://www.guru99.com/alm-qtp-selenium-difference.html "UFT vs Selenium: Key Difference Between Them")
* [Selenium Integration with Maven and Jenkins ](https://www.guru99.com/maven-jenkins-with-selenium-complete-tutorial.html "Selenium Integration with Maven and Jenkins")
* [How to Drag and Drop in Selenium (Example) ](https://www.guru99.com/drag-drop-selenium.html "How to Drag and Drop in Selenium (Example)")
* [Right Click and Double Click in Selenium ](https://www.guru99.com/double-click-and-right-click-selenium.html "Right Click and Double Click in Selenium")
### Document
Document marks the beginning of a DOM tree. Document is the first node in a DOM. It has several methods and properties, whose scope applies to the entire document like URL, getElementById, querySelector etc.
#### Properties of Document Object in DOM
**Document.documentURI** and **Document.URL** – They both return current location of the document. If, however, document is not of type HTML Document.URL will not work.
**Document.activeElement** – This method returns the element in the DOM which is in focus. This means if a user is typing in a textbox, Document.activeElement will return reference to that textbox.
**Document.title** – This is used to read or set a title of a given document.
#### Useful Methods of Document Object
**Document.getElementById(String id)** – this is by far most relevant and useful method in DOM manipulation. It is used to lookup an element in the DOM tree [using its unique identifier](https://www.guru99.com/locators-in-selenium-ide.html). The lookup is case sensitive i.e. in the following example the “
” element cannot be looked up using words like IntroDiv or introdiv or iNtrodiv etc.
**Document.querySelectorAll(String selector)** – this is another widely used method to select one more elements based on [rules of CSS selector](https://www.guru99.com/xpath-selenium.html) (if you are familiar with jQuery’s $ notation, that itself uses this method). We will not delve into CSS selectors much. CSS selector is set of rules by which you may get a list of similar elements (based on the selector rule). We have used this method before in “Hello World” section.
### Element
The diagram below shows how an Element object sits inside the DOM tree, below the document node.
[](https://www.guru99.com/images/1-2015/011915%5F0449%5FUnderstandi1.png)
Element Object in DOM
Element is any object represented by a node in a DOM tree of a document. As always, Element object itself is just a contract of properties, methods and events between a browser and an HTML document. There are special kinds of Elements like HTMLElement, SVGElement, XULElement etc. We will focus only on HTMLElement in this tutorial.
#### Properties of Element Object in DOM
**Element.id** – This property can be used to set or read “ID” (a unique identifier) for an HTML element. ID has to be unique among the elements in a DOM tree. As mentioned before, ID is also used by Document.getElementById method to select a particular Element object within a DOM tree.
**HTMLElement.contentEditable** – contentEditable property of an element determines if the content is of that element is editable/modifiable. This property can be set as shown in the script below. This property can also be used to determine if a given element is editable or not. Try the following script inside any HTML body and you will notice you can edit any content of the body.
**Element.innerHTML** – innerHTML is another important property which we use to access HTML content inside an element. It is also used to set new HTML content of the element. It is widely used to set/change the content of data fields. Say for example you want your webpage to update temperature of Mumbai City every hour you may run the script in the following example every hour.
my page title
Mumbai
Temperature
oC
#### Useful Methods of Element Object
**HTMLElement.blur()** **&** **HTMLElement.focus()** – blur and focus methods are used to remove focus from or give focus to an HTML element respectively. These methods are most widely used to move the focus of a cursor between textboxes in a data entry webpage.
**Element.querySelectorAll** – This method is similar to the already discussed querySelector method for the document object. This method however will limit its search within the descendants of the element itself.
**Accuracy note:** the block above is reproduced as published. Working code uses **document** with a lowercase d and the **innerHTML** property, not setInnerHTML().
## Debugging in DOM
Developer tools of Google Chrome, Mozilla Firefox, Internet Explorer (10 or above) or Safari allow easy debugging right inside the browser. Sometimes different browsers interpret same HTML markup differently and that is when debugging helps you inspect the DOM as has been interpreted by that particular browser’s DOM engine.
**Browser note:** Internet Explorer retired in 2022, so its DevTools now live in Microsoft Edge. The steps below are unchanged; DevTools open with F12.
Now, let us say you want to change the temperature value from 26oC to 32oC in your last example. We will take few simple steps to do that. Screenshots shown here are from Mozilla’s Firefox– however, the steps are same in all other browsers.
1. Open MyFileNewFile.html (or whatever name you gave to your HTML file in tutorials above) using your browser
2. Use your mouse and right click on the temperature value 26oC and click on “Inspect Element”
![Right-clicking the temperature value and choosing Inspect Element in the browser]()
3. Notice that the element where you chose to “Inspect Element” is shown highlighted in your browser (debugger window usually appears on the bottom of the screen)
![Browser developer tools highlighting the inspected span element in the DOM tree]()
4. Open the element by clicking the tilted triangle beside it
![Expanding the span element in the DOM inspector using the triangle toggle]()
5. Select what you would like to edit and double click on it. You will get an option to change the text. Do as directed in the animated image below.
![Animated demonstration of editing the DOM text value from 26 to 32 in the inspector]()
6. Notice the change in content of your HTML page. You may close the debugging window now.
Note that your changes will only be persisted for this session. As soon as you reload or refresh (hit F5) the page the changes will be reverted back. This indicates you did not change the actual HTML source but just the local interpretation of your browser.
As a fun exercise try doing the following. Open [www.facebook.com](https://www.facebook.com) in your browser and use the debugger tool to get following the result – notice how it says “I have hacked Facebook”.
The result of that exercise looks like the screenshot below.
![Facebook page edited live in the browser inspector to read I have hacked Facebook]()
Reading and editing nodes covers static pages. Interactive pages also react to what the user does.
## DOM Events
### What are Events in DOM?
Events are a programming model wherein user triggered (or browser page’s life-cycle triggered) incidents are broadcasted as messages. For example, when a page has finished loading it triggers window.load event and similarly when user clicks a button that element’s click event is triggered.
These messages can be intercepted by any[ JavaScript ](https://www.guru99.com/introduction-to-javascript.html)code and then a [developer defined action](https://www.guru99.com/learn-functions-in-javascript-in-5-minutes.html) can be taken. Say for example, you would like the numbers on your webpage to update only when user clicks a button. You can achieve it by any of the following methods –
1. Assign action to the onclick event of the HTML element
2. Assign action to the click event using addEventListener method
#### Method 1
my page title
Mumbai
Temperature
oC
#### Method 2
my page title
Mumbai
Temperature
oC
## Troubleshooting in DOM
**Legacy API note:** two answers below use document.write(). It still runs, but a call after page load wipes the document. Prefer console.log() or innerHTML.
**Q. How do I know if an element exists or not?**
**A.** Try looking up the element using any of the selector and check if the element returned is a null. See example below –
if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
//do something
}
**Q. I get TypeError: document.getElementByID is not a function…**
**A.** Make sure that the method name exactly matches the API method. Like in the question above – it is getElementById and not getElementByID.
**Q. What is a difference between children and childNodes?**
**A.** The method children get us the collection of all elements within the calling element. The collection returned is of type HTMLCollection. However, the method childNodes get us the collection of all the nodes within the calling element. Add following scripts to our example and see the difference –
**The childNodes method returns 14 items**
document.write("Using childNodes method")
document.write(" ");
document.write(" ");
for(i=0;i");
}
document.write(" ");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);
**While the children method returns just 7 items**
document.write("Using children method")
document.write(" ");
document.write(" ");
for(i=0;i");
}
document.write(" ");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);
**Q. I get Uncaught TypeError: Cannot read property ‘innerHTML’ of undefined…**
**A.** Make sure that the instance of HTMLElement you are calling the property innerHTML on was set after initial declaration. This error generally happens in following scenario. See how the error can be avoided in next block of code…
var element;
if(false) //say condition was false
{
element = document.getElementById('tempValue1');
}
element.innerHTML = '32';
var element = null;
if(false) //say condition was false
{
element = document.getElementById('tempValue1');
}
if(element != null)
{
element.innerHTML = '32';
}
## FAQs
🌗 What is the difference between the Shadow DOM and the Virtual DOM?
Shadow DOM is a browser feature giving a component its own isolated subtree, so styles and scripts do not leak. Virtual DOM is a library technique, used by React and Vue, that diffs an in-memory copy to minimise real updates.
🧭 How does Selenium find an element inside the tree?
WebDriver sends a locator to the browser, which walks the parsed tree until a match appears, then returns a WebElement handle. [Locators](https://www.guru99.com/locators-in-selenium-ide.html) such as id, name, CSS selector and XPath simply describe different search rules over the same nodes.
🔍 Should getElementById or querySelector be preferred?
Use getElementById when the target carries a unique id; it is the fastest lookup and returns one node. Use querySelector or querySelectorAll when the match depends on classes, attributes or a parent-child path.
⚠️ Is document.write() still safe to use?
It still executes, but browsers discourage it. Calling document.write() after the page has loaded replaces the whole document, and it blocks parsing during load. Use console.log() for tracing, or innerHTML to insert content.
🧱 What is the difference between the DOM and the BOM?
The DOM models page content: head, body and every tag. The Browser Object Model covers the surrounding browser, including navigator, screen, location and history. The window object is where both meet.
🖥️ Do the Internet Explorer instructions still apply?
Internet Explorer retired in 2022, so its developer tools now live inside Microsoft Edge. The workflow is unchanged: press F12 or right-click an element, choose Inspect, and edit the node in the panel that opens.
🤖 How does AI help with DOM inspection and locator repair?
Machine learning tools score several node attributes at once, so when a class or id changes they re-match the same element instead of failing. Self-healing test platforms build this on top of ordinary DOM queries.
🚀 Can GitHub Copilot write DOM manipulation code?
[Copilot](https://github.com/features/copilot) drafts event listeners, querySelector chains and traversal loops from a comment, and it is reliable on common patterns. Always test the suggestion against the real page, because it cannot see your markup.
#### Summarize this post with:
ChatGPT Perplexity Grok Google AI
**Stay Updated on AI** **Get Weekly AI Skills, Trends, Actionable Advice.**
##### Sign up for the newsletter
Subscribe for Free
You have successfully subscribed.
Please check your inbox.
![AI-Newsletter]() Chosen by over **350,000+** professionals
[Scroll to top ](#wrapper)Scroll to top
×
Toggle Menu Close
Search for:
Search
```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.guru99.com/#organization","name":"Guru99","sameAs":["https://www.facebook.com/Guru99Official","https://twitter.com/guru99com"],"logo":{"@type":"ImageObject","@id":"https://www.guru99.com/#logo","url":"https://www.guru99.com/images/guru99-logo-v1-150x59.png","contentUrl":"https://www.guru99.com/images/guru99-logo-v1-150x59.png","caption":"Guru99","inLanguage":"en-US"}},{"@type":"WebSite","@id":"https://www.guru99.com/#website","url":"https://www.guru99.com","name":"Guru99","publisher":{"@id":"https://www.guru99.com/#organization"},"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https://www.guru99.com/images/what-is-dom-in-selenium-webdriver.png","url":"https://www.guru99.com/images/what-is-dom-in-selenium-webdriver.png","width":"700","height":"250","caption":"What is DOM in Selenium WebDriver?","inLanguage":"en-US"},{"@type":"BreadcrumbList","@id":"https://www.guru99.com/understanding-dom-fool-guide.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":"1","item":{"@id":"https://www.guru99.com","name":"Home"}},{"@type":"ListItem","position":"2","item":{"@id":"https://www.guru99.com/selenium","name":"Selenium"}},{"@type":"ListItem","position":"3","item":{"@id":"https://www.guru99.com/understanding-dom-fool-guide.html","name":"What is DOM in Selenium WebDriver? Structure & Full Form"}}]},{"@type":"WebPage","@id":"https://www.guru99.com/understanding-dom-fool-guide.html#webpage","url":"https://www.guru99.com/understanding-dom-fool-guide.html","name":"What is DOM in Selenium WebDriver? Structure & Full Form","dateModified":"2026-07-30T10:32:54+05:30","isPartOf":{"@id":"https://www.guru99.com/#website"},"primaryImageOfPage":{"@id":"https://www.guru99.com/images/what-is-dom-in-selenium-webdriver.png"},"inLanguage":"en-US","breadcrumb":{"@id":"https://www.guru99.com/understanding-dom-fool-guide.html#breadcrumb"}},{"@type":"Person","@id":"https://www.guru99.com/author/admin","name":"Krishna Rungta","url":"https://www.guru99.com/author/admin","image":{"@type":"ImageObject","@id":"https://www.guru99.com/images/krishna-rungta-v2-120x120.png","url":"https://www.guru99.com/images/krishna-rungta-v2-120x120.png","caption":"Krishna Rungta","inLanguage":"en-US"},"worksFor":{"@id":"https://www.guru99.com/#organization"}},{"articleSection":"Selenium","headline":"What is DOM in Selenium WebDriver? Structure & Full Form","description":"Document Object Model or DOM is an essential component of web development using HTML5 and JavaScript. This tutorial aims to cover basic concepts of HTML document structure and how to manipulate it usi","keywords":"bigdata, programming, database, server","speakable":{"@type":"SpeakableSpecification","cssSelector":[".entry-title",".summary"]},"@type":"Article","author":{"@id":"https://www.guru99.com/author/admin","name":"Krishna Rungta"},"dateModified":"2026-07-30T10:32:54+05:30","image":{"@id":"https://www.guru99.com/images/what-is-dom-in-selenium-webdriver.png"},"copyrightYear":"2026","name":"What is DOM in Selenium WebDriver? Structure & Full Form","subjectOf":[{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is the difference between the Shadow DOM and the Virtual DOM?","acceptedAnswer":{"@type":"Answer","text":"Shadow DOM is a browser feature giving a component its own isolated subtree, so styles and scripts do not leak. Virtual DOM is a library technique, used by React and Vue, that diffs an in-memory copy to minimise real updates."}},{"@type":"Question","name":"How does Selenium find an element inside the tree?","acceptedAnswer":{"@type":"Answer","text":"WebDriver sends a locator to the browser, which walks the parsed tree until a match appears, then returns a WebElement handle. Locators such as id, name, CSS selector and XPath simply describe different search rules over the same nodes."}},{"@type":"Question","name":"Should getElementById or querySelector be preferred?","acceptedAnswer":{"@type":"Answer","text":"Use getElementById when the target carries a unique id; it is the fastest lookup and returns one node. Use querySelector or querySelectorAll when the match depends on classes, attributes or a parent-child path."}},{"@type":"Question","name":"Is document.write() still safe to use?","acceptedAnswer":{"@type":"Answer","text":"It still executes, but browsers discourage it. Calling document.write() after the page has loaded replaces the whole document, and it blocks parsing during load. Use console.log() for tracing, or innerHTML to insert content."}},{"@type":"Question","name":"What is the difference between the DOM and the BOM?","acceptedAnswer":{"@type":"Answer","text":"The DOM models page content: head, body and every tag. The Browser Object Model covers the surrounding browser, including navigator, screen, location and history. The window object is where both meet."}},{"@type":"Question","name":"Do the Internet Explorer instructions still apply?","acceptedAnswer":{"@type":"Answer","text":"Internet Explorer retired in 2022, so its developer tools now live inside Microsoft Edge. The workflow is unchanged: press F12 or right-click an element, choose Inspect, and edit the node in the panel that opens."}},{"@type":"Question","name":"How does AI help with DOM inspection and locator repair?","acceptedAnswer":{"@type":"Answer","text":"Machine learning tools score several node attributes at once, so when a class or id changes they re-match the same element instead of failing. Self-healing test platforms build this on top of ordinary DOM queries."}},{"@type":"Question","name":"Can GitHub Copilot write DOM manipulation code?","acceptedAnswer":{"@type":"Answer","text":"Copilot drafts event listeners, querySelector chains and traversal loops from a comment, and it is reliable on common patterns. Always test the suggestion against the real page, because it cannot see your markup."}}]}],"@id":"https://www.guru99.com/understanding-dom-fool-guide.html#schema-1155349","isPartOf":{"@id":"https://www.guru99.com/understanding-dom-fool-guide.html#webpage"},"publisher":{"@id":"https://www.guru99.com/#organization"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://www.guru99.com/understanding-dom-fool-guide.html#webpage"}}]}
```