DOM Selectors

DOM Selectors for single elements

- grab one element by id or className, or tag

- only stores one thing

- if classNames appear more than one time in HTML, it will grab the very first one that appears

document.getElementById()

const taskTitle = document.getElementById('task-title');

//get things from the element
console.log(taskTitle.className);

// change styling
taskTitle.style.background = 'black';
taskTitle.style.color = 'white';
taskTitle.style.padding = '5px';
taskTitle.style.display = 'none';

// change content
taskTitle.textContent = 'Task List';
taskTitle.innerText = 'My Tasks';
taskTitle.innerHTML = '<span style = "color:red">Task List</span>';

- change styling or contents are used in the events or in the case of hovering. (general styling is controlled in CSS)

document.querySelector()

console.log(document.querySelector('#task-title')); //by id
console.log(document.querySelector('.card-title')); //by className
console.log(document.querySelector('h5')); //by tag

//change styling
document.querySelector('li').style.color = 'red';
document.querySelector('li:last-child').style.color = 'blue'; //using CSS-3
document.querySelector('li:nth-child(3)').style.color = 'pink';
document.querySelector('li:nth-child(even)').style.background = 'grey';

- querySelector let us select by anything such as id, className, or tag

- querySelector only works for the very first element even when using 'even', or 'odd' of CSS-3

DOM Selectors for multiple elements

- if classNames appear more than one time, it will grab everything in HTMLCollections or node list

document.getElementByClassName()

const items = document.getElementsByClassName('collection-item');
console.log(items);
console.log(items[0]); //access to specific elements by treating like an array
items[0].textContent = 'Hello'; //change the content of a specific item
items[3].style.color = 'blue'; //change the color of the text of a specific item

- it returns in the form of HTMLCollection which should be converted into arrays to use array methods

document.getElementByTagName()

const lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
lis[0].textContent = 'Hello world'; //change the text content of a specific tag
lis[3].style.color = 'red'; //change the text color of a specific tag

//convert HTMLCollections into array
let lists = document.getElementsByTagName('li');
let listsArr = Array.from(lists);

listsArr.reverse(); //array methods are working since it got converted into arrays

listsArr.forEach(function(list) { 
  console.log(list.className);
});

- it returns in the form of HTMLCollection which should be converted into arrays to use array methods

document.querySelectorAll()

const items = document.querySelectorAll('ul.collection li.collection-item');

console.log(items); //yields all elemtns in the node list

items.forEach(function(item) {
  console.log(item);
});

const liOdd = document.querySelectorAll('li:nth-child(odd');
const liEven = document.querySelectorAll('li:nth-child(even)');

console.log(liOdd); //yields all odd elements in the node list
console.log(liEven); //yields all even elements in the node list

liOdd.forEach(function(li, index) {
  li.style.background = 'grey';
});

for(let i = 0; i < liEven.length; i++) {
  liEven[i].style.background = 'pink';
}

- it returns in the form of node lists which array methods can be used without converting into arrays

- querySelectorAll() takes CSS-3 syntax