문제
Q. HTML 코드가 예시와 같이 작성되어 있을 때, 콘솔에 아래와 같은 결과를 출력하는 코드를 모두 고르시오.
<li id="javascript" class="language">JavaScript</li>
[예시]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 맘대로 프로그래밍 언어 순위</title>
</head>
<body>
<h2 id="title">내 맘대로 프로그래밍 언어 순위!</h2>
<ol id="list">
<li id="javascript" class="language">JavaScript</li>
<li id="python" class="language">Python</li>
<li id="java" class="language">Java</li>
<li id="c" class="language">C</li>
<li id="ruby" class="language">Ruby</li>
</ol>
<script src="index.js"></script>
</body>
</html>
⓵ console.log(document.querySelectorAll('.language')[0]);
⓶ console.log(document.querySelectorAll('#javascript'));
⓷ console.log(document.querySelector('#list li'));
⓸ console.log(document.querySelector('.language'));
정답
1, 3, 4
[해설]
css 선택자를 활용해서 태그를 선택하는 메소드는 document 객체의 querySelector와 querySelectorAll 두 가지가 있다.
하나의 요소를 선택할 때는 querySelector를, 여러 개의 요소를 선택할 때는 querySelectorAll을 사용한다.
- 1번: language 클래스를 가진 태그들 중에서 0번 index, 즉 첫번째 태그를 선택하므로 querySelector'All' 메서드를 사용했더라도 콘솔 결과처럼 출력되므로 정답.
- 2번: querySelectorAll 메소드를 활용할 경우, 해당되는 요소가 하나 밖에 없더라도 요소가 하나인 NodeList[]를 반환하기 때문에 콘솔로 NodeList(1)을 출력하므로 오답.
- 3번: querySelector 메소드를 활용할 경우, 해당되는 요소가 여러 개가 있더라도 가장 첫 번째 요소만 선택. 결과적으로 list id를 가진 요소의 자식 요소 중 가장 첫번째 li 태그를 선택하므로 정답.
- 4번: 3번과 마찬가지로, 여러 개의 클래스를 가진 요소들이 있더라도 가장 첫 번째 요소만 선택. 결과적으로 language 클래스를 가진 요소들 중 가장 첫번째 태그를 선택하므로 정답.
정리
- querySelector
- 여러 개 있어도 그 중 첫번째 한 개만 선택
- 해당 요소가 없으면 null 반환
- querySelectorAll
- 선택된 여러 개의 노드들을 담은 'NodeList[]' 반환
- 해당 요소가 없으면 null이 아니라 빈 배열의 NodeList[] 반환
- 한 개만 반환하더라도 무조건 NodeList[] 배열에 담아서 반환. 단독 요소를 반환하지 않음.
+) getElement(s)By~
- 해당 요소가 없으면 null이 아니라 빈 배열의 HTMLCollection[] 반환
- getElement's'By~ 메서드일 경우, 한 개만 반환하더라도 무조건 HTMLCollection[] 배열에 담아서 반환.
'JS' 카테고리의 다른 글
| 이벤트 객체는 아무데서나 쓸 수 있는게 아니다 (0) | 2025.04.18 |
|---|---|
| mouseover/out vs mouseenter/leave (0) | 2025.04.17 |
| NodeList vs HTMLCollection (0) | 2025.04.16 |
| 함수 형태로 감싼다고 함수형 프로그래밍이 아니다 (0) | 2025.04.07 |
| const 변수 vs const 상수 (0) | 2025.03.04 |