앞서서 querySelector에 대해서 포스팅했었다.
2021.09.12 - [Java Script/Vanila JavaScript] - Vanila Js 태그를 선택하는 함수 querySelector!
Vanila Js 태그를 선택하는 함수 querySelector!
MDN사이트를 참고해서 작성하였습니다. https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector Document.querySelector() - Web API | MDN Document.querySelector()는 제공한 선택자 또는 선택..
sccoding.tistory.com
querySelector는 태그의 요소를 선택하는 함수인데 querySelectorAll은 어떤 함수 인가?
MDN에 나오는 정의는 Document 메서드 querySelectorAll()은 지정된 셀렉터 그룹에
일치하는 document의 element list를 나타내는 정적 NodeList를 반환한다.
반환 값은 바로 list라고 한다. 한번 예제를 통해서 알아보도록 하자!
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>안녕하세요</p>
<p>반갑습니다.</p>
<p>좋은 시간 보내세요</p>
<script>
var match = document.querySelectorAll("p");
console.log(match);
</script>
</body>
</html>
자 이제 콘솔을 확인해보자!
자 console창을 확인해보면 nodeList가 반환됐고
p태그 3개가 반환된 걸 확인할 수 있다.
List는 반복문과 찰떡궁합이니까,
반복문 할 때 한 번 더 알아보도록 하겠다.!
'Java Script > Vanila JavaScript' 카테고리의 다른 글
| [JS] 글자 수에 따른 byte수 체크하기 (0) | 2023.03.02 |
|---|---|
| JS 가장 많이 사용하는 함수! console.log 와 alert! (0) | 2021.09.12 |
| Vanila Js 태그를 선택하는 함수 querySelector! (0) | 2021.09.12 |
| Java Script 30 (0) | 2021.09.12 |
| Java Script 1. var, let, const에 대해서 알아보자! (0) | 2021.08.17 |
