document.querySelectorAll()
지정된 셀렉터 그룹에 일치하는 다큐먼트의 엘리먼트 리스트를 나타내는 정적 NodeList를 반환한다.
retrieved from MDN
링크텍스트
MDN 설명은 비전공자가 이해하기엔 너무나 어려운 설명이다.
그래서 document.querySelectorAll() 과 forEach를 내가 이해한 선에서 예제와 함께 준비했다.
📌 제이쿼리 문법이 더 편한 필자는 제이쿼리로 먼저 이해한 후 JS 문법 구조를 파악했다.
document.querySelector(”.classname”)
= $(”.classname”) 제이쿼리에서 선택자를 불러오는 것과 같음
여기서 document.querySelctorAll('.classname');
All이 추가되면 classname을 가진 모든 요소를 배열로 가져온다
<body>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<script>
var jb = document.querySelectorAll( '.abc' );
jb[1].style.color = 'red'; //jb[ 1 ].style.color 배열 두번째에 있는 클래스에 color 를 red 로 변경
</script>
</body>
<body>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<p class="abc">Lorem Ipsum Dolor</p>
<script>
var jb = document.querySelectorAll( '.abc' );
for ( var i = 0; i < jb.length; i++ ) {
jb[i].style.color = 'red'; //클래스 값이 abc인 모든 요소를 빨간색으로 변경
}
</script>
</body>
forEach Method
배열의 요소를 순서대로 처리하는 method (함수이기도 하다.)
array 객체에 forEach 메소드를 사용하면 배열에 포함되는 요소를 차례대로 꺼내 콜백 함수에 전달하여 처리할 수 있다.
- 배열의 반복문
- 배열에서만 사용하는 메소드 (array 객체에서만 사용 가능한 메서드이다.)
- 배열의 처음부터 마지막 요소까지 반복하여 실행
- 인자로 콜백함수를 받아옴
- 주어진 콜백함수를 배열 요소 각각에 대해 실행
- querySelectorAll() 전체 선택자를 이용하여 주로 사용
- 배열의 값을 하나씩 순차적으로 해당 함수에 전달한다.
parameter
배열이름.forEach (콜백함수 (요소 값))
배열이름.forEach (콜백함수 (요소 값 요소의 인덱스))
배열이름.forEach (콜백함수 (요소 값 요소의 인덱스 배열))
<script>
let alpha = ['일', '이', '삼'];
alpha.forEach (function (element) {
console.log (element);
});
//일
//이
//삼
</script>
ES6에 도입된 화살표 함수를 사용해서 작성하면 짧고 간단하게 코드 입력 가능!
<script>
let alpha = ['일', '이', '삼'];
alpha.forEach ( el => console.log (el));
//일
//이
//삼
</script>
for문으로 같은 결과를 출력할 수도 있다. (하지만 forEach문 추천..! 가독성 더 좋다)
Frontend Developer