JavaScript-DOM/04_querySelector.js at master · last-endcode/JavaScript-DOM · GitHub

34 lines (29 loc) · 1.03 KB

querySelector - for single

querySelectorAll - for multiple

// querySelector

const memberShp = document.querySelector('#shp');

console.log(memberShp); //not node list output show element id shp

// so u can add background without index

memberShp.style.background = '#333';

memberShp.style.width = '16rem';

//querySelectorAll

const allMember = document.querySelectorAll('#shp');

// check use log if node-list use index

console.log(allMember); //here is node-list

const allMembers = [...allMember];

allMembers.forEach(function (items) {

items.style.color = '#fff';

items.style.textTransform = 'uppercase';

items.style.padding = '2rem';

});

// here u should use querySelector, so why?

// because only querySelector only acces for first

// change first-child be red background and actuallly

// u can write without first-child if want change lutfy be red

const beRed = document.querySelector('li');

beRed.style.background = 'coral';

// and last-child be blue

const beBlue = document.querySelector('li:last-child');

beBlue.style.background = 'blue';

Expand file tree