Understanding DOM in Selenium

brahmajit-mohapatra-f8fe5582 · 13 May 2021 21:34

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 using JavaScript.

Document Object Model or DOM

HTML 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. We will cover only HTML DOM in this tutorial.

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 (http://www.w3.org/DOM/).

You will need to understand the DOM 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 –

Developing content that updates itself continuously without refreshing the entire page – like current price of all the stocks in your user’s portfolio
Developing advanced user interactions such as adding or modifying content dynamically – like ability to add more stocks to your portfolio
Developing content that is customizable by user – like ability to change the layout so that Mutual funds portfolio appears before stocks portfolio
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

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.

Some of the useful properties of a window object

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)

Some of the useful methods of a 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

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.

Some of the useful properties of a document object

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.

Some of the useful methods of a 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. 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 (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

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.

Some of the useful properties of an Element object

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

Some of the useful methods of an 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.

Debugging

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.

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.

Open MyFileNewFile.html (or whatever name you gave to your HTML file in tutorials above) using your browser
Use your mouse and right click on the temperature value 26oC and click on “Inspect Element”

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)

4. Open the element by clicking the tilted triangle beside it

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.

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 in your browser and use the debugger tool to get following the result – notice how it says “I have hacked Facebook”.

Events

What are events?

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 code and then a developer defined action 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 –

Assign action to the onclick event of the HTML element
Assign action to the click event using addEventListener method

Method 1

my page title

Mumbai

Temperature

^oC

Refresh

Method 2

my page title

Mumbai

Temperature

^oC

Refresh

Troubleshooting

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.getElementsByTagName(“section”)[0].childNodes.length;i++) { document.write((i+1)+"."); document.write(document.getElementsByTagName(“section”)[0].childNodes[i].toString()); document.write("
"); } 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.getElementsByTagName(“section”)[0].children.length;i++) { document.write((i+1)+"."); document.write(document.getElementsByTagName(“section”)[0].children[i].toString()); document.write("
"); } 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’; }

Summary

In this tutorial we learned what a DOM is and how it is essential concept to understand to build dynamic web pages. We also touched upon types of DOM elements like Window and Document. We learned some useful methods and properties available within each kind. We saw how most browsers offer developer tools to play with any webpage available on the Internet – thus learning to debug and resolve issues with our own website. We also briefly touched upon Events mechanisms. Finally we covered few troubleshooting items. Internet is filled with resources on DOM.