getElementsByClassName
const items = document.getElementsByClassName('collection-item'); // Show all items console.log(items); // Show only the first index console.log(items[0]); // Change the color of first item items[0].style.color = 'red'; // Change the text of index 3 items[3].textContent = 'Hello';
getElementsByTagName
The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name.
let lis = document.getElementsByTagName('li'); console.log(lis); console.log(lis[0]); // Convert HTML Collection into array lis = Array.from(lis); lis.reverse(); lis.forEach(function(li, index){ console.log(li.className); li.textContent = `${index}: Hello`; }); console.log(lis);
querySelectorAll
const items = document.querySelectorAll('ul.collection li.collection-item'); items.forEach(function(item, index){ console.log(li.className); item.textContent = `${index}: Hello`; }); console.log(items); const liOdd = document.querySelectorAll('li:nth-child(odd)'); const liEven = document.querySelectorAll('li:nth-child(even)'); liOdd.forEach(function(li, index){ li.style.background = '#ccc'; }); for(let i = 0; i < liEven.length; i++){ liEven[i].style.background = '#f4f4f4'; }
Leave a Reply