Как исправить Cannot set property 'background' of undefined?

Question

[Артем Владиленко]

Если я пишу

document.querySelector('.day').style.background = 'yellow'

, все работает, а когда я пишу

document.querySelectorAll('.day').style.background = 'yellow'

выдает ошибку:
Cannot set property 'background' of undefined

Answer 1

[Антон Антон]

document.querySelector('.day') возвращает первый подходящий элемент. У него есть свойство style.
document.querySelectorAll('.day') возвращает список элементов (NodeList), у него нет свойства style. Надо обойти список и проставить стиль каждому.
Желание уйти от jquery похвально.

Answer 2

[Иван Ерохин]

Нужно циколом пройти все элементы.

document.querySelectorAll('.day').forEach(function(elem){
     elem.style.background = 'yellow'
})

Comments

[Артем Владиленко]

Спасибо тебе ОГРОМНЕЙШЕЕ!!! Все решил!!!

Answer 3

[Rsa97]

querySelectorAll возвращает не один элемент, а NodeList.
У NodeList'а нет свойства .style, поэтому возвращается значение undefined.
Ну и, соответственно, у undefined нет свойства background, о чём и говорится в ошибке.

Answer 4

[igotDiamonds]

querySelectorAll - возвращает коллекцию элементов NodeList, соответственно
[NodeList].style == undefined
NodeList[0] == element

Comments

[igotDiamonds]

<div>1</div>
<div>2</div>
<div>3</div>

const singleElement = document.querySelector('div') // Вернет первый DIV внутри document
const allElements = document.querySelectorAll('div') // Вернет все DIV'ы внутри document 

singleElement = <div>1</div>
allElements = [<div>1</div>, <div>2</div>, <div>3</div>]

поэтому с allElements нужно работать в цикле

Ссылка на документацию по NodeList