안녕하세요. 오늘은 Document 객체의 querySelector 메서드에 대해 알아보겠습니다.
1. querySelector(selector)
<!DOCTYPE html>
<html>
<head>
<title>querySelector</title>
<script>
window.addEventListener('load', function(){
var header = document.querySelector('#header');
console.log(header);
/*
<header id="header">
<h1>테스트입니다.</h1>
</header>
*/
});
</script>
</head>
<body>
<header id="header">
<h1>테스트입니다.</h1>
</header>
</body>
</html>querySelector(selector)는 DOM의 자식 노드를 순회하여 매개변수의 선택자를 찾아 반환한다. 위 예제는 HTML에서 id가 header인 요소를 선택한 후 출력하는 코드 입니다.
2. 선택자(selector)의 종류
<!DOCTYPE html>
<html>
<head>
<title>querySelector</title>
<script>
window.addEventListener('load', function(){ // 문서가 로드된 후
var idDiv = document.querySelector('#id-div'); // id로 찾기
var classDiv = document.querySelector('.class-div'); // class로 찾기
var nickname = document.querySelector('input[name="nickname"]'); // name으로 찾기
var photo = document.querySelector('input[type="file"]'); // type으로 찾기
var section = document.querySelector('section'); // 태그명으로 찾기
var h1 = section.querySelector('.title'); // 요소 내부에서 찾기
});
</script>
</head>
<body>
<div id="id-div"></div>
<div class="class-div"></div>
<input type="text" name="nickname" />
<input type="file" name="photo" />
<section>
<h1 class="title">h1 Text</h1>
</section>
</body>
</html>선택자는 CSS의 선택자 문법을 따르기 때문에 쉽게 사용할 수 있습니다. 위 예제는 대표적으로 많이 사용하는 선택자입니다. querySelector() 메서드를 통해 반환된 요소는 DOM 조작에 활용되어 사용자에게 다이나믹한 화면과 여러가지 이벤트를 제공할 수 있게됩니다.
'javascript' 카테고리의 다른 글
| [DOM] Document.querySelectorAll() (0) | 2019.04.14 |
|---|---|
| [javascript] 문자열 다루기 (0) | 2019.04.10 |
댓글