DOM API:
DOM: Document Object Model(div, span, input과 같은 html 요소).
API: Application Programming Interface, 어플리케이션이 동작하기 위해 입력되는 프로그래밍 명령.
DOM이 제공하는 property와 method를 DOM API로 총칭하며, HTML의 구조나 내용, 스타일 등을 동적으로 변경(제어)할 수 있다.
문법:
<!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">box</script>
</head>
<body>
<div class="box">This is a box</div>
</body>
</html>let boxEl = document.querySelector('.box');
console.log(boxEl);
boxEl.addEventListener('click', function() {
console.log('clicked');
boxEl.classList.add('active');
console.log(
boxEl.classList.contains('active')
);
boxEl.classList.remove('active');
console.log(
boxEl.classList.contains('active')
);
});let boxEl = document.querySelector(‘.box’);
querySelector 메소드를 이용하여 document 내의 .box 클래스를 가진 요소를 boxEl로 지정하겠다.
console.log(boxEl);
이제 console.log에 boxEl을 출력하겠다console.log(boxEl);는 것은 html 내부의 .box 클래스를 가진 요소를 찾아 콘솔에 출력하겠다는 것과 동일해졌다.
boxEl.addEventListener(‘click’, function() {});
DOM API인 .addEvenListener를 입력하여 boxEl에 2개의 인수를 부여하는데, 순서대로 (1)이벤트와 해당 이벤트를 통한 출력 값을 의미하는 (2)이벤트 핸들러다. 이제 click 이벤트가 일어나면 function을 실행한다.
boxEl.addEventListener('click', function() {
console.log('clicked');
boxEl.classList.add('active');
console.log(
boxEl.classList.contains('active')
);
boxEl.classList.remove('active');
console.log(
boxEl.classList.contains('active')
);
});console.log(‘clicked’)
boxEl 요소를 클릭하면 콘솔 로그에 문자 clicked을 출력한다.
boxEl.classList.add(‘active’);
DOM API인 classList.add를 기입하여 boxEl의 클래스 정보에 active를 추가한다.
console.log(boxEl.classList.contains(‘active’)
DOM API, classList.contains를 이용하여 boxEl의 클래스 정보 중 contains가 괄호로 지정한 active 문자가 존재하는지 확인한다. 존재한다면 true, 부재한다면 false를 console.log에 반환한다. 즉, 해당 코드는 true를 출력한다.
boxEl.classList.remove(‘active’)
DOM API, classList.remove를 사용하여 boxEl의 클래스 정보에서 active 문자를 제거한다.
console.log(boxEl.classList.contains(‘active’)
classList.remove가 작동하는 상태로 하위에 classList.contains(‘active’)를 실행하면 boxEl의 클래스 정보에 active가 사라지므로 이번엔 False가 출력된다.
출력:
정리:
defer: 브라우저가 html을 파싱한 후에 외부 script를 작동하게 하는 태그. boolean 속성을 가지며,script가 javacscript와 같은 외부 스크립트를 참조할 경우에만 사용 가능.
classList: html 수정 없이 요소의 클래스 값에 개입이 가능하게 만드는 DOM API.
classList.add(''): API로 지정한 요소의 클래스 정보에 ('')를 add한다.
classList.remove(‘’): API로 지정한 요소의 클래스 정보에서 ('')를 remove한다.
classList.contains(‘’): API로 지정한 요소의 클래스 정보에 ('')이 있는지 확인한다.
console.log(classList.contains(‘’)): API로 지정한 요소의 클래스 정보에 ('')이 있는지 확인하여, 있을 경우 console.log에 true를 반환, 없을 경우엔 false를 반환한다.
아래는 오늘 해소했던 질문과 답변이다:
브라우저는 콘솔 로그를 html을 읽을 때와 마찬가지로 위에서 아래로 순서대로 읽어서 무조건 도출하는 건가? 나중에 입력한
.remove API가 윗줄의.add API에는 개입하지 않아서 무조건 각 코드의 결과를 순서대로 출력하나?
자바스크립트로 작성된 코드는 순차적으로 쌓이는 call stack(호출 스택) 방식을 사용한다는 것을 함께 배웠다. 자세한 정보는 DEV_NUNU님의 이 포스트를 참고했다.
FE 공부를 하기로 마음 먹고 무작정 시작한지 겨우 며칠이 됐다. 항상 조급하게 몸으로 부딪히는 버릇이 있는데, 자바스크립트의 개념 원리부터 차분하게 공부하고 싶다. 우선 공책부터 사야겠다.
