Today I learned!
DOM, 스코프
1. DOM
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스다.
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.
이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현된다.
여기서 각 요소들은 노드(Node) 라는 이름으로 불리우게 된다.
오늘 배운 DOM 관련 메서드
document.createElement()
⇒ 새로운 Node를 생성한다. Node의 형태는 생성되지만 DOM에 직접 추가해주는 과정을 거치치 않으면 DOM에 속하지 않는다.
document.appendChild()
⇒ Element Node를 현재 DOM에 추가합니다. 이때의 document는 다른 Element가 될 수도 있다.
2. 스코프
스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다.
자바스크립트에서 스코프를 구분해보면 다음과 같이 2가지로 나눌 수 있다.
전역 스코프 (Global scope)
코드 어디에서든지 참조할 수 있다.
지역 스코프 (Local scope or Function-level scope)
함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.
함수 스코프 (function-scope)
함수에서 선언한 변수는 해당 함수 내에서만 접근 가능하다는 걸 의미한다.
블록 스코프 (block-scope)
"주어진 코드 블록({}) 안에서만 사용이 가능하며 밖에서는 접근할 수 없음"을 의미한다.
함수, if문, for문, while문, try/catch문 등에서 사용되는 let과 const는 해당 블록 내부에서만 사용이 가능하다.
