Element 클래스의 메소드 중 하나로, 파라미터로 받은 특정 selector 에 해당하는 첫 번째 자손 element를 반환 한다. 그러나 일치하는 element를 찾을 수 없으면 null 을 반환한다.
🌈 Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<script src="main.js" defer></script>
</head>
<body>
<h1>Hello</h1>
<h1>World</h1>
</body>
</html>
//javascript
'use strict'
console.log(document.querySelector('h1'));
위 코드를 보면, <h1> 코드가 2 줄 존재하지만 querySelector() 는 조건에 맞은 selector 집합 중에서 첫 번째 자손 element를 반환하기 때문에 결과는 다음과 같다.