DOM은 무엇인가요?
DOM은 Documental Object Model, 문서객체모델로서, 브라우저가 HTML 문서를 트리 구조로 표현해놓은 것
→ 브라우저는 HTML 코드의 텍스트를 읽고 각 태그 <div> <p> <ul> 등을 객체로 만들어서 트리구조로 관리 → 자바스크립트로 DOM 조작
예시
<!DOCTYPE html>
<html>
<body>
<h1>할 일 목록</h1>
<ul>
<li>공부하기</li>
<li>운동하기</li>
</ul>
</body>
</html>
이 HTML→ DOM으로 표현 구조
Document
└─ html
└─ body
├─ h1 ("할 일 목록")
└─ ul
├─ li ("공부하기")
└─ li ("운동하기")
자바스크립트로 DOM 조작하기
// <h1> 요소 가져오기
const title = **document.querySelector**("h1");
// 텍스트 변경하기
title.textContent = "오늘의 할 일";
// 새로운 li 추가하기
const ul = document.querySelector("ul");
const newLi = document.createElement("li");
newLi.textContent = "코딩하기";
ul.appendChild(newLi);
이벤트 흐름 제어(버블링 & 캡처링)이 무엇인가요?
-
HTML 문서의 각 요소들은 태그 안의 태그가 위치하는 식으로 중첩된 형태로 구성되어 있음.계층적 구조 특징 때문에 HTML 요소에 이벤트가 발생할 경우 연쇄적 이벤트 흐름이 발생! -> 이벤트 전파전파 방향에 따라 버블링과 캡처링으로 구분됨.
- 버블링(Bubbling) : 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파 (기본)
- 캡쳐링(Capturing) : 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달
=> 캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임을 구현할 수 있음 (비슷한 방식으로 여러 요소를 다뤄야 할 때 사용) -> 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에
- 자바스크립트
addEventLisnter( )함수로 요소의 이벤트를 등록하면 기본적으로 버블링 전파 방식으로 이벤트가 흐름.
클로저와 스코프가 무엇인가요?
-
스코프: 변수의 유효 범위를 정의
-
전역 스코프는 코드의 어디에서나 접근 가능, 지역 스코프는 특정 함수 내에서만 접근 가능
(자바스크립트에서의 함수는 선언되는 동시에 lexical scope 를 가짐)
-
-
클로저: 외부 함수의 변수에 접근할 수 있는 내부 함수.
-
클로저 함수에서는 지역변수, 내가 포함된 외부 함수의 변수, 그리고 전역 변수에 모두 접근 가능(데이터 은닉, 상태 유지 등의 용도로 사용)
-
- count는 외부에서 직접 접근할 수 없지만, 클로저로 은닉, 상태 유지가 가능