[JavaScript] document.(querySelector/querySelectorAll) - DOM 요소에 구체적으로 접근하기
javascript로 dom 요소를 제어할때 사용되는 메서드인 document.querySelector() 와 document.querySelectorAll()에 대해 알아보자.
평소 자주 사용하던 getElementById, getElementsByClassName, getElementsByTagName 과 비슷하면서도 다르며, 좀 더 구체적으로 dom 요소에 접근하는것을 도와주는 메서드이다.
▷ 구문
document.querySelector(selectors);
document.querySelectorAll(selectors);
selectors : 하나 이상의 선택자를 포함한 DOM 요소 문자열이다.
▷ 예제 1) querySelector / querySelectorAll 사용법
<!doctype html>
<html lang="ko">
<head>
<script src="./test.js"></script>
<title>mineItRecord</title>
</head>
<body>
<div class="dv">div-1</div>
<div class="dv">div_2</div>
<div class="dv wrap">
<span class="sp1">sp1</span>
</div>
<div id="wrap" class="wrap">
<span class="sp2">sp2</span>
</div>
</body>
</html>// querySelector 사용법
document.querySelector('div'); // <div class="dv">div-1</div>
document.querySelector('div > .sp1'); // <span class="sp1">sp1</span>
document.querySelector('#wrap .sp2'); // <span class="sp2">sp2</span>
// querySelectorAll 사용법
document.querySelectorAll('div'); // NodeList(4) [div.dv, div.dv, div.dv.wrap, div#wrap.wrap]
document.querySelectorAll('div span'); // NodeList(2) [span.sp1, span.sp2]
좀 더 구체적으로 요소에 접근하는것을 볼 수 있다.
그런데, 자세히 살펴보면 기존에 사용하던 getElementsByClassName, getElementsByTagName의 경우에는 HTMLCollection을 반환해주는데, 이에 반해 querySelectorAll의 경우 NodeList라는 녀석을 반환해준다.
HTMLCollection의 항목은 name, id 속성으로도 접근이 가능하지만, NodeList는 인덱스 번호로만 접근이 가능하다.
(좀 더 자세한 내용은 찾아봐보도록 하자.)
구체적인 접근을 위해서는 querySelector 구문을 사용해야겠지만, 아이디나 클래스 같은것들로 접근이 가능하다면 getElementById, getElementsByClassName, getElementsByTagName 을 사용해주도록 하자.
(성능상 querySelector 보다는 빠르다고 한다.)
참고 : https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector
Document.querySelector() - Web API | MDN
Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
developer.mozilla.org
참고 : https://developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll
Document.querySelectorAll() - Web API | MDN
Document 메소드 querySelectorAll() 는 지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적(살아 있지 않은) NodeList 를 반환합니다.
developer.mozilla.org