DOM API:
DOM: Document Object Model(div, span, input과 같은 html 요소).
API: Application Programming Interface, 어플리케이션이 동작하기 위해 입력되는 프로그래밍 명령.
DOM이 제공하는 property와 method를 DOM API로 총칭하며, HTML의 구조나 내용, 스타일 등을 동적으로 변경(제어)할 수 있다. 자바스크립트 선행: DOM API(1)에 이어 이번엔 forEach 메소드와 유사 배열, 그리고 classList.add 문법을 아래로 정리한다.
문법:
<!DOCTYPE html>
<html lang="ko">
<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>
<script defer src="./main.js"></script>
</head>
<body>
<div class="box">This is a box</div>
</body>
</html>const boxEls = document.querySelectorAll('.box');
boxEls.forEach(function(boxEl, index) {
boxEl.classList.add(`order-${index + 1}`);
console.log(index, boxEl);
})const boxEls = document.querySelectorAll(‘.box’);
const는 중복 선언이 불가능한 변수다. querySelctorAll 메소드를 사용하여 (‘.box’) 클래스를 가진 document 속 복수의 요소를 boxEls유사 array data로 묶겠다고 선언한다.
boxEls.forEach(function( , ) {});
forEach 메소드를 사용하여 boxEls를 구성하는 요소 각각에 function의 매개 변수 값을 부여하는데, 괄호 안 순서대로 Array를 구성하는 반복 (1)요소(boxEls를 구성하는 요소, 즉 위의 예문에선 boxEl), 반복 중인 요소의 순서인 (2)index를 의미한다.
*매개변수parameter란 변수 중 한 종류로, 함수 등과 같은 서브루틴의 인풋으로 제공되는 여러 데이터 중 하나이다. 매개변수는 함수의 내부에서 해당 함수로 전달된 값을 가리키기 위한 변수이다. 실제로 함수 또는 루틴에 전달되는 값은 인자arguments다.
ex) 위의 코드에서 인자는 { }, 매개변수는 ( , )다.
boxEls.forEach(function(boxEl, index) {
boxEl.classList.add(`order-${index+1}`);
console.log(index, boxEl);
});function(boxEl, index)의 중괄호 안에는 실제 값인 인자가 담긴다. 요소의 클래스에 특정 문자를 삽입하는 .classList.add DOME API를 사용하여, boxEl의 클래스 정보에 order-${index+1}, 즉 해당 요소의 클래스 순서에 1을 더한 값을 붙여(.classList.add) 출력한다.
반드시 작은 따옴표가 아닌 벡틱 기호(`)를 사용한다.
index에 숫자를 더할 때는 띄어쓰기를 사용하여 ‘index + 1’ 형태로 쓴다.
console.log(index, boxEl);
console.log에 괄호 안의 변수 순서대로 최종 값이 출력된다.
=(클래스 순서에 1을 더한 숫자, 각 클래스 요소)
출력:
정리:
querySelectorAll(‘.’)
괄호로 지정한 클래스를 갖고 있는 모든 html 상document의 요소를 찾는다선택한다. 이렇게 선택된 복수의 요소는 유사 배열 데이터로써 묶인다.
forEach(function(,) {})
배열 데이터의 요소를 매개변수 function(,)을 사용하여 각각for each 제어하겠다. 괄호 안에는 매개변수 2개가 담기는데, 이는 (1)각 요소 (2)요소의 순서 index이다. {} 안에는 실제 반영되는 값을 나타내는 인자arguments가 담긴다.
order-${index + 1}
매개변수가 지정한 index에 1을 더한 order-1과 같은 값을classList.add를 거쳐 요소의 class 정보에 덧붙인다. 항상 벡틱 기호(`)를 사용한다.
공부하면서 각 문법 혹은 함수의 수많을 예외 사항을 정리할 필요성을 느낀다. 눈이 침침해서 작은 따옴표와 벡틱 기호를 구분 못하는 건 어떻게 못 고치나?
