// //getElementsByClassName this will get all of the elements for the class name in entire document, global scope
// var spanItems,ulItems;
// spanItems = document.getElementsByClassName('todo-list-element-title');
// console.log(spanItems);
// console.log(spanItems[0]);
// console.log(spanItems[1]);
// console.log(spanItems[2].textContent='This is coming from getElementByClassName');
// console.log(spanItems[3].style.background = 'red');
// console.log(spanItems[4]);

// //getElementsByClassName this will get all of the elements for the class name in specific scope

// ulItems = document.querySelector('ul').getElementsByClassName('todo-list-element-title');
// console.log(ulItems);
// console.log(ulItems[0]);

// //convert html collection to array
// var spanArray = Array.from(spanItems);

// console.log(spanArray);

// console.log(spanArray[1]);

// for(var i = 0; i<spanArray.length; i++){
//     spanArray[i].style.background="blue";
//     //spanArray[0]
//     //spanArray[1]
// }

//2.get li with Tags
// var liTags = document.getElementsByTagName('li');
// console.log(liTags);
// console.log(liTags[2]);
// console.log(liTags[1].textContent = 'Updated with TagName');


//3. example of querySelectorAll
console.log('querySelectorAll');
 var ulItems = document.querySelectorAll('li');
 console.log(ulItems);
 for(var i =0 ; i<ulItems.length; i++){
     ulItems[i].style.background='yellow';
     ulItems[i].style.margin='10px';
     ulItems[i].style.color='red';
 }
