Skip to main content

Document Object Model

The Web browser is itself an object, Browser Object. We can interact with it like we do with any other object. We can get the window size using an object property, or open a new tab using a method. The html content inside the BOM, is called DOM. Here, we will discuss how we can interact with various DOM elements.

For example, you can type these things in the console:

document.URL
document.title
document.head
document.body

And it will return specific DOM elements.

For this tutorial, we will use another html file dom-tutorial.html.

querySelector​

We can use querySelector to target any element in the html as we do in CSS. Note that querySelector will return the first instance of the selection, while querySelectorAll will return the list of all matching elements. Now try yourself:

document.querySelector("h2")
document.querySelector(".description")
document.querySelector("ul")
document.querySelectorAll("h4")
document.querySelectorAll("li")

Access and change element​

We can select and change and element in the html document:

document.querySelector("h4.city").innerHTML
document.querySelector("h4.city").outerHTML

Now we can change these elements by simply assigning new values.

document.querySelector("h4.city").innerHTML = "List of cities:"

We can access and change class or id as well:

document.querySelector(".city").className
document.querySelector(".city").classList
document.querySelector(".city").classList.add("new-class")
document.querySelector(".city").classList.remove("new-class")