Blog

Selecting elements using getElementById() querySelector() etc.

In JavaScript programming, when an internet user interacts with a website webpage content resource, DOM elements selection activities are performed in the web browsing content resources access process. Web users can use multiple methods to select or operate web content elements. Where each task activity in DOM object selection can have different use cases. Here, we will follow multiple steps to select elements in DOM in web content by using selection methods like getElementById(), getElementsByClassName(), querySelector(), and querySelectorAll() in JavaScript programming.

JavaScript getElementById() DOM element selection method.

In JavaScript DOM selection process, getElementById() is used to select a web element based on its id attributes. This method provides a reference to the first DOM element found where the object has a matching id or displays a null value if no such element exists.

getElementById() DOM element syntax.

const element = document.getElementById(‘id-name’);

Here id-name is the id attribute of the web content or element in the current webpage that the programmer wants to select in that webpage.

<div id=”header”>This is a test website</div>

<button id=”testButton”>Click Button</button>

const header = document.getElementById(‘header’);

console.log(header.textContent); // “This is a test website”

const button = document.getElementById(‘testButton’);

button.textContent = “Touch Me!”;

getElementsByClassName() element selection method in JavaScript.

In the JavaScript DOM selection process, getElementsByClassName() is used to select all the web element resources elements that have a particular class name in the webpage content or resources. Whereas this existing web element method returns a live HTML collection value of common match elements.

Syntax of getElementsByClassName() element selection.

const elements = document.getElementsByClassName(‘class-name’);

Here in this process class-name is the class name in the webpage that the programmer wants to target or use in the webpage.

This web element selection returns a live collection in the webpage, which means if the DOM changes, e.g., new elements are added to that class, the collection gets updated automatically.

Example of getElementsByClassName() element selection.

<div class=”box”>Box First</div>

<div class=”box”>Box Second</div>

<div class=”box”>Box Third</div>

<div class=”box”>Box Four</div>

const boxes = document.getElementsByClassName(‘box’);

console.log(boxes.length); // here boxes length is 4

// let we Loop it through the HTMLCollection

for (let p = 0; p < boxes.length; p++) {

boxes[p].style.backgroundColor = “green”;

}

getElementsByTagName() element selection method in JavaScript.

In JavaScript DOM selection process getElementsByTagName() is used to select all webpage elements with a specific tag name, like <div>, <p>, <span>, etc., to select tag elements. This method returns a live HTML collection of web elements with tag names available to the web developer.

getElementsByTagName() element selection method syntax.

const elements = document.getElementsByTagName(‘tag-name’);

Here tag-name in a webpage is the name of the tag that is used in HTML webpage development and design. Such as ‘div’, ‘p’, ‘h1’, etc.

getElementsByTagName() element selection method example.

<p>This is a test paragraph.</p>

<p>This is sample paragraph.</p>

<p>This is basic paragraph.</p>

<div>This is a div webpage element.</div>

const paragraphs = document.getElementsByTagName(‘p’);

console.log(paragraphs.length); // here paragraph length is 3

// let use Loop through paragraphs element with tag name from start to end

for (let p = 0; p < paragraphs.length; p++) {

paragraphs[p].style.color = “orange”;

}

querySelector() element selection method in JavaScript.

In the JavaScript DOM selection process, querySelector() provides web developers with the ability to select the first webpage element that matches a CSS script selector. This method is a powerful CSS selection function, as it accepts any valid CSS selector in the current webpage, including webpage element classes, IDs, tag names, and more complex selectors such as descendant selectors, pseudo-classes, etc.

querySelector() element selection method syntax.

const element = document.querySelector(‘css-selector’);

css-selector is a valid CSS selector string method for a query selector in a JavaScript webpage.

Example of querySelector() element selection method.

<div id=”container”>

<h1 class=”title”>this is a sample webpage</h1>

<p class=”text”>This is an example of paragraph</p>

</div>

const title = document.querySelector(‘.title’);

console.log(title.textContent); // “this is a sample webpage”

const container = document.querySelector(‘#container’);

console.log(container); // here all The entire <div> tag with id in “container”

More complex selectors:

// let Select the first paragraph <p> inside the #container div tag

const paragraph = document.querySelector(‘#container p’);

console.log(paragraph.textContent); // “This is an example of paragraph”

// let Select the element use a pseudo-class like first child class

const firstChild = document.querySelector(‘#container p:first-child’);

console.log(firstChild.textContent); // “This is an example of paragraph”

querySelectorAll() selection method in JavaScript.

In the JavaScript DOM selection process querySelectorAll() is the equivalent selection method to querySelector(), where instead of returning only the element with the first match case, it returns a static NodeList value of all elements that match the given CSS selector. Here the all-modification result is not live, which means it does not automatically update in order when modifications are made to the DOM.

Syntax of querySelectorAll() selection method.

const elements = document.querySelectorAll(‘css-selector’);

css-selector is a valid element CSS selector string method in JavaScript webpage. This method returns a static NodeList not a live value.

Example of querySelectorAll() selection method.

<div class=”box”>Box object 1</div>

<div class=”box”>Box object 2</div>

<div class=”box”>Box object 3</div>

<div class=”box”>Box object 4</div>

const boxes = document.querySelectorAll(‘.box’);

console.log(boxes.length); // here is a 4 box element length

// let Loop box element through the NodeList

boxes.forEach(box => {

box.style.backgroundColor = “pink”;

});

Javascript dom Differences Between the multiple selection Methods

Conclusion of getElementById(), getElementsByClassName(), querySelector(), and querySelectorAll() in JavaScript.

These methods in JavaScript programming help the JavaScript web developer to select and manipulate the DOM object elements in the webpage element selection. Here the web developer can understand and apply the desired selection method based on his web development need, Here the web developer can interact and modify the structure and default behavior of the webpages in an effective order by applying the DOM elements.