안녕하세요. 오늘은 Document 객체의 querySelectorAll() 에 대해 알아보겠습니다.
1. querySelectorAll(selector)
<!DOCTYPE html>
<html>
<head>
<title>querySelectorAll</title>
<script>
window.addEventListener('load', function(){ // 문서가 로드된 후
var article = document.querySelector('article');
var fails = article.querySelectorAll('.fail');
console.log(fails.length); // 3
});
</script>
</head>
<body>
<article>
<p class="success"></p>
<p class="fail"></p>
<p class="success"></p>
<p class="fail"></p>
<p class="success"></p>
<p class="fail"></p>
<p class="success"></p>
</article>
</body>
</html>
querySelectorAll(selector) 은 DOM을 순회하며 선택자에 해당하는 요소들을 리스트 형태로 반환합니다.
예제에서는 article 태그 안에서 클래스가 fail인 요소를 모두 찾아 리스트 형태로 반환하였습니다. fails 변수의 길이를 콘솔로 출력하면 3이 나오는 것을 확인할 수 있습니다.
선택자의 종류는 아래 포스트를 참고해주세요.
2019/04/11 - [javascript] - [DOM] Document.querySelector()
[DOM] Document.querySelector()
안녕하세요. 오늘은 Document 객체의 querySelector 메서드에 대해 알아보겠습니다. 1. querySelector(selector)
'javascript' 카테고리의 다른 글
| [DOM] Document.querySelector() (0) | 2019.04.11 |
|---|---|
| [javascript] 문자열 다루기 (0) | 2019.04.10 |
댓글