DOM Selectors for Single Elements in JavaScript: Techniques and Examples

Finding HTML Elements

document.getElementById(id)

document.getElementsByTagName(name)

document.getElementsByClassName(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

element.innerHTML =  new html content

element.attribute = new value

element.style.property = new style

element.setAttribute(attribute, value)

// 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';