베이스캠프 14일차 _22년 12월 29일

학습 언어

 

학습 내용

DOM

브라우저는 HTML 문서를 파싱하는 과정에서 DOM이라는 트리구조 형태의 객체를 생성하게 됩니다.
트리 구조란, 자료구조의 일종으로 여러개의 노드로 구성되어 있으며 하나의 부모가 여러개의 자식 노드를 가지게 되는 형태를 이야기합니다.

 

DOM Method

• document.getElementById()
  ⇒ Element Node의 id 속성을 체크해서 해당하는 Element를 참조해온다.
• document.getElementByClass()
  ⇒ Element Node의 class 속성을 체크해서 해당하는 Element를 참조해온다.
• document.querySelector()
  ⇒ 소괄호 안에 입력한 값에 해당하는 Element를 참조해온다. id(”#”)를 입력하는 경우 id를 기반으로, class(”.”)를 입력하는 경우 class를 기반으로 참조
• document.querySelectorAll()
  ⇒ 소괄호 안에 입력한 값에 해당하는 Element를 참조해온다. querySelector와 다르게 배열 형태로 모든 요소를 참조해온다.
• document.createElement()
  ⇒ 새로운 Node를 생성합니다. Node의 형태는 생성되지만 DOM에 직접 추가해주는 과정을 거치치 않으면 DOM에 속하지 않습니다.
• document.appendChild()
  ⇒ Element Node를 현재 DOM에 추가합니다. 이때의 document는 다른 Element가 될 수도 있습니다.

appendChild

 

addEventListener

 

스코프

전역 스코프, 지역 스코프

파란색 박스 : 전역 스코프

노란색 박스 : 지역 스코프

전역스코프 > 지역스코프

 

함수 스코프

함수 레벨 스코프란, 함수를 실행할 때 생겨나는 지역 스코프입니다.

위의 예시가 바로 함수 스코프에 의해 생성된 지역 스코프입니다.

함수 레벨 스코프는 함수를 실행할 때 생성되는, 함수를 기준으로 하는 스코프

블록 스코프

블록 레벨 스코프는 코드 블록에 의해서 생성되는 스코프입니다.
if문, for문, while문 등 중괄호를 사용해서 코드 블록을 작성하는 환경에서 생성이 되죠.

 

 

자바스크립트는 변수를 참조하는 코드를 만나게 됐을 때, 먼저 해당하는 블록 스코프 내에서 변수를 참조하고자 시도합니다.
이때 탐색한 블록 스코프 내에 해당 변수가 존재하지 않는 경우, 상위 스코프로 올라가 다시 탐색을 진행하게 되는데요.
이러한 과정을 스코프 체이닝이라 부릅니다.
그래서 if문에 의해서 생성된 블록 스코프 내에 a라는 변수가 없었음에도 불구하고 에러가 발생하지 않았던거죠.

 

호이스팅

호이스팅이란, 함수, 변수의 선언이 마치 위로 끌어올려진 것처럼 동작하는 것을 이야기합니다.