자바스크립트 DOM 이란 ? document object model

html을 배운 우리는 부모의 자식관계를 알고 있다.

이어이어 본다면 큰 트리구조를 이루고 있음도 그려낼 수 있다.

 

자바스크립트에서 html 의 태그값을 가져오기 위해

우리는 아무렇지 않게 이렇게 쓰고 있었다.

let i = document.getElementById("image");

:  id 가 imge 인 태그를 가져오기 위한 i 의 선언이였다.

 

이 즉슨 태그들을 트리구조화 되어있는 상황의 객체화 하여, 트리의 가지 (노드)값을 찾는 구조였다.

즉 부모 객체 를 타고 자식 객체를 타고 자식자식 객체를 타고 찾는 구조라 함을 알 수 있다.

객체란 무엇이었을까 ?

 

크게 두가지로 구성되어 있었다.

1. 속성 property : 값 value

2. 객체 속 함수 method : 동작 객체

 

자바스크립트는 객체 지향언어라고 한다.

정석적으로는 객체 지향 언어라고 하기엔 모호한 면이 있지만 ,

점차 업그레이드를 하며 , 기능이 많아지면서 객체지향성을 가지게 되면서 그렇게 보이는 것이다.

단언컨데 , 자바는 객체 지향언어이다.

 

자바스크립트의 객체 유형은 어떻게 나뉠까 ?

 

1. 코어객체

- 자바스크립트 프로그램에 기본적으로 만들어 놓고 제공하는 객체

-기본적인 객체로 표준객체에 해당한다.

-Array, Date, String,Math 등 대문자로 시작하는 타입들이다.

 

2. DOM 객체(HTML)

-HTML 문서 작성에 필요한 HTML 태그들을 객체화 한것.(HTML ~ /HTML 까지)

-문서의 모양과 내용을 제어하기 위한 목적을 지녔다.

-브라우저마다 달라지면 안되기 때문에 표준객체를 따르게 된다.

 

3.브라우저 객체(BOM)

-html 에 제공되지 않는 새로고침 , 뒤로가기 등등 존재한다.

- 브라우저마다 상이하기 때문에 , 비표준객체다.

window 객체를 통해 컨트롤이 가능하다.

 

BOM 객체와 DOM 객체의 구조화

 

window 객체

 

window 객체는 생략이 가능하다.

위의 표와 같이 , 자바스크립트의 객체 최상위 노드는 window 라 할 수 있고,

DOM(html)의 최상위 노드는 document 라 할 수 있다.

소문자로 시작한 명령어들은 window 를 생략한 명령어라고 할 수 있다.

예를들어 alert 등 있다.

alert("Test2 let => "+i);
window.alert("Test2 let =>" + i);

 

HTML DOM

 

웹페이지에 작성된 html 태그당 객체를 생성하게 된다.

html 의 태그가 출력된 모양이나 콘텐츠를 제어하기 위해 접근하게 된다.

 

- DOM 트리란

html 의 부모 자식관계에 따라 객체 트리가 생성된다.

 

- DOM 객체란 

DOM 트리의 한 노드(뻗은 가지)를 말한다.

태그 하나당 하나의 DOM 객체가 생성되었다고 볼수 있다.

DOM 객체를 DOM 노드(node) , 또는 DOM 엘리먼트 (Element) 라고 불린다.

 

가볍게 알아보는 자바스크립트 역사

 

처음의 자바스크립트는 모양도 제각각 기능도제각각이였고,

점차 규칙성이 필요함을 인식하고 ECMA 라는 단체에서 표준화 작업을 하게된다.

이전에는 ECMA 5 냐 6 이냐의 차이가 중요시 될 정도로 5 에서 6으로 갈때 버전이 많이 달라졌다.

현재는 6이후로 공부하게 되었지만 , 

예를들어 let , 호이스팅 , 화살표 함수 , 클래스 등등 이때 생긴 구문들이라고 할 수 있다.

6이후 객체 지향적으로 변하게 되었다.

 

 html 로 뜯어보는 객체의 관점.

html 문서를 볼때 태그와 글씨(컨텐트)들이 있다.

src -> 는 속성( attribute )값에 해당한다고 볼 수 있지만,

자바스크립트의 관점으로는 src를 property 로 보는 관점이다.

속성 , attribute -> 결과로 보다. 자질. 속성

속성 , property  -> 소속된 부속품

html 의 인식으로는 attribute 

DOM node의 인식으로는 property  

자바스크립트의 property  값을 바꿈으로서 html 의 attribute  값을 바꾼다고 보면 될것이다.

두단어가 한국말로는 같지만 영어로 다른이유를 찬찬히 보면 조금 이해하는데 도움이 된다.

 

자바스크립트의 실행과정 이해하기

 

자바스크립트 엔진이 받아서 코드를 읽게 되는데

2단계로 나누어서 일을 하게된다.

 

1. 구문 분석 단계(파싱 단계)

구문 분석을 하게되면서 , 중요한 부분은 메모리에 먼저 할당한다.

선언적 함수 (이름이 있는 함수) , 명시적 전역변수(let , const , var) 수집.

함수 먼저 , 다음에 변수 정의. (함수가 나중에 변수이름을 덮어 쓰는경우가 발생 할 수 있음을 의미.)

변수들은 이름만 정의해두고 값이 없는 상태로 메모리에 정의해둔다.(실행시에 값을 할당.)

그러므로 , 파싱단계에서는 변수에 값이 없고 , 익명함수와 객체는 undefined 의 값을 가진다.

let 과 const는 실제 사용할때 까지 사용 금지 처분 내린다.

 

파싱 -이름있는 함수 저장 , 전역변수명 메모리 할당 , 익명함수 객체 메모리 할당.

 

 

2. 실행단계

순차적으로 실행하게 된다. (함수정의는 파싱단계에 해두었기에 건너띔.)

변수의 값들을 할당하게 된다.

익명함수와 객체의 값을 할당하게 된다.

 

실행 - 순차적으로 값이 없을경우 값을 할당.

 

* 변수와 메모리

변수명 : stack 영역에 저장.

변수 값 : heap 영역에 저장.

 

 

다시보는 호이스팅(Hoisting)

Hoistiong : 건축 / 건설 화물등을 장비로 들어올리는 업무를 수행함을 일컫음.

 

TDZ (Temporal Dead Zone)

변수가 선언되고 초기화되기 전까지 해당 변수의 사용을 금지하는 구역.

-> 초기화 되어야 쓸수 있다 ~~~~~

var는 호이스팅 일어나는 문제점을 차단하는 개념이지만,

let 과 const 에서는 적용되어 사용하게 되면 에러를 발생하게된다.

 

var 로 선언한 변수는 호이스팅시 , undefined로 변수를 초기화 한 상황임으로

따로 값을 초기화 전에 사용하여도 오류가 발생하지 않고, undefined 가 뜸.

let const 같은 경우 호이스팅은 되더라도 undefined 를 반환하지 않고 ReferenceError를 발생시킴.

그로 인해 호이스팅이 일어나지 않는다.

 

예전에는 호이스팅 되는 var 를 썼지만 왜 let 과 const 같은 선언을 하게 되었을까 ?

호이스팅이 전부 된다면 , 밑에서 나는 분명 숫자로 값을 반환받아야 하는데  갑자기 문자열이 튀어나와.

엄청난 방대한 양의 자바스크립트 파일이라면 , 그 오류를 어떻게 찾아낼것인가.

이전엔 이로 인해 오류 발생시에 굉장한 시간을 소비하게 됬었다고 한다. 

 

선언 전 과 후 작업순서 살펴보기

document.write('* Before name_var => '+name+'<br>');  // O -> 값은없음
document.write('* Before test_let => '+letTest+'<br>');  //SyntaxError : let 호이스팅 안됨
document.write('* Before address => '+address+'<br>');  // X -> 오류로 Stop (not defined)
document.write('* Before first => '+first+'<br>');  // Test2) 코드를 출력
	
document.write('* Before first(5) => '+first(5)+'<br>');  // O -> 25
document.write('* Before noName => '+noName+'<br>');	

//선언구문
    var name="홍길동";      // 명시적선언
	let letTest="테스트";
	address="경기도 성남시";  // 묵시적선언 -> "use strict" 적용시 오류발생
	var first=123;
	function first(x) { return x*x; }        // 선언적 함수
	var noName = function(x) { return x+x; } // 익명 함수
	let letName = function(x) { return x+x; } // 익명 함수
//여기까지 선언

document.write('* After name => '+name+'<br>');
document.write('* After address => '+address+'<br>');
document.write('* After first => '+first+'<br>');
document.write('* After first(5) => '+first(5)+'<br>'); // Test2) Error -> not a function
document.write('* After noName(5) => '+noName(5)+'<br>');

 

-before 이 선언전 / after 이 선언후

 

파싱 순서

1. 이름이 있는 함수 정의 first

2. 변수 first 로 함수 정의 first 를 덮게 된다. 그러나 함수 자체는 공간 할당을 받았다. 

3. var name

4. let Test = 사용금지 구역입니다

5. noName = undefined

6. letName = undefined

진행 

2. 변수 first 가 값을 할당받게 되면서 함수를 덮게 되어 first는 이제 함수가 아니게 되었다.

 

"use strict“

• 구문이 아니라 “엄격 모드” 로 실행돼야 함을 알리는 지시어 (=> 단순 문자적 표현)
• 스크립트 시작에 추가되면 전역 범위에 영향 미침.
• 함수 안에 추가 되면 함수 안 (= 로컬) 에서만 영향 미침.
• “use strict” 지시어를 이해하는 컴파일러 에서만 의미 있음.
• 깔끔한 코딩에 도움되고, F12 에서 에러 확인 가능

Babel

 

라이브러리중 하나.

트랜스 컴파일러

서로 버전이 잘 안맞는 브라우저에게 맞춰주는 라이브러리.

낮은 버전의 브라우저에서도 사용 가능하게 끔 만들어줌.