DOM Selectors

If you are reading this article, then you must be familiar with DOM (Document Object Model). So let’s get started with DOM Selectors without wasting time on explaining what a DOM is.😄😄

DOM Selectors, as the name suggests is used to select HTML elements within a document using JavaScript. There are 5 ways in which you can select elements in a DOM using selectors.

1. getElementsByTagName()
2. getElementsByClassName()
3. getElementById()
4. querySelector() 5.querySelectorAll()

All those methods are properties of the document object. So in order to use one, we should prefix those elements with the document object as,

document.getElementsByTagName()
document.getElementsByClassName()
document.getElementById()
document.querySelector()
document.querySelectorAll()

document.getElementsByTagName()

The document.getElementsByTagName() method is used to select elements using the tag namesonly.

Consider this html,

<div>
  <h1 class="header">My Big Header</h1>
  <h3 class="header">Another Header</h3>
  <h1 class="header">My Second Big Header</h1>
</div>

Let's select the h1 tag.

const h1Header = document.getElementsByTagName("h1"); // all the h1 tags selected
// returns an array like object called HTMLCollection.

document.getElementsByClassName()

The document.getElementsByClassName() method is used to select the html elements using the css classnames.

consider this html,

<div>
  <h1 class="header">My Big Header</h1>
  <h2 class="header">My Another Big Header</h2>
</div>

We can select all our header tags.

// all tags with header class names are selected
const headers = document.getElementsByClassName("header");

// returns an array like object called HTMLCollection

document.getElementById()

The document.getElementById() method is used to select an element using the id attribute present in the html element.

Since id attributes names are unique across the HTML document, only one element is returned.

Conside this html,

<div>
  <p id="myUniqueParagraph">This is a pragragraph tag</p>
  <div></div>
</div>

Let's select the paragraph tag using the id attribute.

// paragraph tag is selected using the id attribute
const paragraph = document.getElementById("myUniqueParagraph");

// only the paragraph tag is returned

document.querySelector()

The document.querySelector() method is used to select the first matching element using the CSS selectors.

<div>
  <h1 class="myBigHeader">Hello EveryBody</h1>
  <div></div>
</div>

You can select the h1 tag using the myBigHeader CSS class name.

const header = document.querySelector(".myBigHeader")

document.querySelectorAll()

The document.querySelectorAll() method is used to select all elements which have the same CSS selectors.

Consider this html,

<div>
  <h1 class="header">My Big Header</h1>
  <h3 class="header">Another Header</h3>
</div>

Let's select both the h1 and h3 tags.

// both h1 and h3 tags selected
const headers = document.querySelectorAll(".header");

// returns an array-like object called NodeList

Note that, no two elements should have the same Id as a way of good practice. And I used same Id for some elements to explain things better. So, you can follow the recommended way of not using the same Id for more than one element.

That’s all for DOM Selectors. We will talk about some other DOM methods in a later article. Thanks. Happy coding!😊😊