DOM Selectors for Single Elements in JavaScript: Techniques and Examples

Rumman Ansari   Software Engineer   2024-07-09 09:52:07   5520  Share
Subject Syllabus DetailsSubject Details
☰ TContent
☰Fullscreen

Table of Content:

Finding HTML Elements

Method Description 
document.getElementById(id)
Find an element by element id 
document.getElementsByTagName(name)
Find elements by tag name 
document.getElementsByClassName(name)
Find elements by class name

Example: Finding HTML Elements

This below example will help you to understand the concept. We are changing the text inside the paragraph.

Html code: HtmlCode.html 


<p id="paraId"> This is a paragraph </p>
<p class="paraClass"> This is a paragraph </p>
<p> This is a paragraph </p> 

<script src="ScriptCode.js"> </script>

Script code: ScriptCode.js 


document.getElementById('paraId').innerHTML = 'Paragraph Chnaged By Id';
document.getElementsByClassName('paraClass')[0].innerHTML = 'Paragraph Changed by Class Name';
document.getElementsByTagName('p')[2].innerHTML = 'Paragraph Changed By Tag Name';

Live Preview

Changing HTML Elements

Property Description 
element.innerHTML =  new html content
Change the inner HTML of an element 
element.attribute = new value
Change the attribute value of an HTML element 
element.style.property = new style
Change the style of an HTML element
Method Description 
element.setAttribute(attribute, value)
Change the attribute value of an HTML element 

// document.getElementById()

console.log(document.getElementById('id-name'));

// Get things from the element 

console.log(document.getElementById('id-name').id);
console.log(document.getElementById('id-name').className);


// Change styling

document.getElementById('id-name').style.background = '#333';
document.getElementById('id-name').style.color = '#fff';
document.getElementById('id-name').style.padding = '5px';
document.getElementById('id-name').style.display = 'none';


// Change Content

document.getElementById('id-name').textContent = 'Your text'; 
document.getElementById('id-name').innerText = 'Your text';
document.getElementById('id-name').textHTML = '<span> Your span</span>';


// Nice way to do that

const taskTitle = document.getElementById('id-name');

taskTitle.style.background = '#333';
taskTitle.style.color = '#fff';
taskTitle.style.padding = '5px';
taskTitle.style.display = 'none';


// Query Selector


console.log(document.querySelector('#task-title'));
console.log(document.querySelector('.card-title'));
console.log(document.querySelector('h5'));


document.querySelector('li').style.color = 'red';
document.querySelector('ul li').style.color = 'blue';

document.querySelector('li:last-child').style.color = 'red';
document.querySelector('li:nth-child').style.color = 'red';
document.querySelector('li:nth-child(4)').style.color = 'red';
document.querySelector('li:nth-child(4)').textContent = 'Hello World';


document.querySelector('li:nth-child(odd)').style.background = '#ccc';
document.querySelector('li:nth-child(even)').style.background = '#f4f4fb';