코린이 JS queryselector 관련하여 질문드립니다-,,

Question

Nightmode

WEB

HTML
CSS
JavaScript

JavaScript

JavaScript (/ˈdʒɑːvəˌskrɪpt/),[9] often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.[10] JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

생활 코딩 javascript를 보면서, night, day 버튼을 추가하는 예제를 따라해보던 중 제 상식으로 해결되지 않는 문제가 생겨 부득이하게 질문 드립니다..ㅎㅎ 우선 night 버튼을 눌렀을 때, 제목과 리스트 내부를 포함한 문서 내의 모든 a 태그 링크들의 텍스트 색상을 "aquamarine" 색으로 변경하려 합니다.다만 저렇게 넣고 실행을 해보니, a 링크의 색이 변경되지 않고, 개발자 도구의 콘솔 창에는 Cannot set properties of undefined (setting 'color')이라는 에러가 뜹니다. 제가 점검해 보았을 때, 콘솔 창에서 document.querySelectorAll('a') 를 입력 했을 땐 문서 내의 모든 a 태그가 선택되는 것을 보아 태그를 불러오는 데까지는 문제가 없는 것 같고, 그대로 .style.color="aquamarine" 이 적용되어 바뀌어야 맞을 것 같은데 그렇지 않으니 어떤 이유가 있는지 궁금하네요...ㅜㅜ

올림픽대로 · Answer

저도 잘은 못해서 정답이 아닐 수 있지만 댓글 남깁니다..querySelectorAll은 배열과 비슷한 형태인 node list로 반환해줍니다.그렇기에 for문이나 forEach문을 통해 하나하나 돌려야 할거에요예를들어 이런식으로 말이죠.const Elem &#61; document.querySelectorAll('a'); for (let i&#61;0; i < Elem.length; i&#43;&#43;) { Elem[i].style.color &#61; 'aquamarine'; }

올림픽대로 · Answer

만약 querySelectorAll이 아니라 querySelector('a')였다면 최상단의 WEB 하나만 변경 될 거에요.querySelector, querySelectorAll, getElementsById, getElementsByClassName등 차이점을 한번 알아보시는 것도 좋을거같아요.

Hyeonseong Lee · Answer

좋은 답변 정말 감사합니다- 계속 저기에 갇혀있었는데, for 문을 활용해서 또 돌려봐야겠네요!!

코린이 JS queryselector 관련하여 질문드립니다-,,

3개의 답변

Q&A 목록