DOM
-
브라우저는 HTML 문서를 파싱하는 과정에서 DOM 이라는 트리(tree)구조 형태의 객체 생성
-
DOM은 HTML 문서를 세부적으로 구조화시켜 객체 모델로 변환하며, 이를 통해 javascript 로 웹페이지의 구조, 스타일 등을 읽고 조작할 수 있게 해줌
-
DOM은 웹페이지의 인터페이스로, 페이지 구조를 조작가능한 API 제공
트리구조 = 자료구조의 일종으로 여러개의 노드로 구성되어 있으며, 하나의 부모가 여러 개의 자식 노드를 가지게 되는 형태
노드(node) = HTML 문서 구조 내의 요소, 속성, 텍스트, 주석 등 모든 것
↑
parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling
=> 모든 노드를 불러옴
parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling
=> 요소(elements) 노드만 불러옴
DOM 관련 메소드
DOM 요소 제거
지정한 요소(element) 를 제거
const elements = document.queryselector(#ID)
elements.remove() // 요소 삭제window.event
[Enter 키를 누르는 이벤트] 발생 시 실행 되는 함수
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script> const printName = function () { const inputValue = document.querySelector('#name-input-box'); if (window.event.keyCode === 13) { console.log(inputValue.value); } }; </script> </head> <body> <input id="name-input-box" onKeydown="printName()" /> </body> </html>↑
1. 키보드 enter 버튼의 keyCode = 13
2. 함수가 실행될 때 event를 체크, keyCode가 13이라면(enter가 눌렸다면) if 조건문 통과해서 실행
[BUT!] 위의 방식은 브라우저 표준이 아님!
Enter키 입력 시 실행 함수 (브라우저 표준 준수)
↑
1.addEventListener가 이벤트를 감지하면 해당 event를 인자로func( )함수에 담음
2. 전달받은 인자를 함수 안에서 사용해서 keyCode 체크
스코프(scope)
변수가 '참조'될 수 있는 유효범위
↑ 파란박스 => 전역 스코프
노란박스 => 지역 스코프
전역 스코프
-
전체적인 영역을 차지하고 있음
-
전역스코프 내의 변수들은 지역스코프 내에서 '참조'될 수 있음 (O)
지역 스코프
-
각각의 지정된 영역을 차지하고 있음
-
지역스코프 내의 변수들은 지역스코프 밖에서 '참조'될 수 없음 (X)
지역 스코프의 종류 (함수 스코프, 블록 스코프)
- [함수 스코프]
-함수를 실행할 때 생겨나는 지역 스코프
- [지역 스코프]
-코드블록에 의해서 생겨나는 스코프 (if문, for문, while문 등..)
스코프 체이닝
↑ if문에는 'a'라는 변수가 없지만 오류 발생하지 않음
-
javascript는 변수를 참조할 때, 우선 해당 블록 스코프에서 참조를 시도
-
스코프 내에 해당 변수 없으면 상위 스코프에서 다시 탐색을 하게 됨 (스코프 체이닝)
호이스팅
함수, 변수의 선언이 마치 위로 끌어올려진 것처럼 동작하는 것
↑ 위 경우 값 출력이 선언보다 먼저 있기에 에러를 발생해야 하지만 var 선언 특성 상 호이스팅이 되어 정상적으로 동작
호이스팅의 원인
-JavaScript는 코드를 실행하기 전에 선언된 변수, 함수 등을 전역 환경에 담아두게 됨
-그리고 나서 정리된 코드를 실행하는 과정을 수행
↑
-
변수의 선언 단계는 선언, 초기화, 할당이라는 총 3단계를 거침
-
초기화 단계를 거치고 나면 메모리 공간은 존재하나 값은 존재하지 않는 undefined 상태가 됨
*초기화 단계는 JS가 실제로 코드를 실행할 때 해당 변수의 선언 코드를 만나면 수행
↑
-
선언 단계와 초기화 단계 사이에는 TDZ(Temporal Dead Zone) 존재
-
let,const는 초기화단계 이전 TDZ에 머물게 되며, 이 때는 메모리 공간이 할당되기 전이기 때문에 '참조'를 시도하면 에러가 발생
↑
-
var의 경우, 선언과 초기화 단계가 함께 진행 됨 -
함수 정리과정에서 이미 메모리 공간을 할당 받았기에 undefined가 반환 됨
+a) 함수 호이스팅
-
함수 또한
const,let으로 선언하는 함수는 호이스팅이 되지 않음
정확히 말하자면 호이스팅은 되지만 중간에 TDZ에 머무르기 때문에 메모리를 할당 받지 못하는 상태인 것 -
선언 키워드가 없는 함수의 경우 호이스팅이 발생하며, 이 겨우 함수 자체가 위로 끌어올려진 것처럼 작동함
