DOM구조 + Hoisting(호이스팅)

DOM구조란?

DOM의 뜻은 Document Object Model의 약자로 문서(html) 객체 모델이다. 직역의미가 아닌 포괄적인 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 뜻한다.dom구조는 위에서 아래로 뻗어지는 트리구조로 되어있다. 노드트리라고 부르며, 위쪽의 노드(node)를 부모노드,아래쪽 노트를 자식노트로 구분한다. 문서 객체 모델(Document Object Model,DOM)은 HTML, XML 문서의 프로그래밍 인터페이스라고도 정의된다.

 

 

  node?  

트리구조에서 포함된 모든 개체를 노드(node)로 표현한다. head, body등 태그도 마찬가지며 태그안에 있는 텍스트나 속성등까지도 노드에 포함된다. 그 중에서 HTML 태그를 Element Node(요소노드), 요소 노드 안에 있는 글자를 Text Node(텍스트노드)라 표시한다.

 

 

  DOM Element 메서드  

 

element.createElement(tagName)

: DOM Element를 동적으로 생성하기 위한 메서드. 직접적으로 메서드를 생성하나 HTML에 영향을 주진 않는다.

 

 

elememt.appendChild( )

: 선택한 요소 안에 자식 요소를 추가하는 메서드. 

 

 

element.innerHTML = ' '

: 선택한 요소의 내용을 가져오거나, 변경하여 직접 HTML에 표시하는 메서드.

 

 

element.createTextNode(' ')

: 선택한 요소에 텍스트를 추가하는 메서드.

 

 

element.classList.add = (' ')

: 새로운 class추가하는 메서드, 기존의 클래스에 영향을 주지 않고 추가만 한다.

 

 

element.classList.remove = (' ')

: DOM Element를 동적으로 삭제하기 위한 메서드.

 

 

element.removeChild(tagName)

: 지정한 class이름 삭제하는 메서드, 기존의 클래스에 영향을 주지 않고 추가만 한다.

 

 

element.classList.toggle('className',boolean)

: class를 지정했다가 다시 사라지게하는 메서드. 두번째값은 Boolean으로 작성한다.

 

 

document.querySelectorAll('선택자명')[순서]

: 해당 선택자를 만족하는 모든 요소들을 배열에 담아 인덱스에 맞는 요소를 리턴하는 메서드.

 

 

 

  DOM 접근 메서드  

 

document.getElementById('ID명')

: 선택한 id명을 가진 요소 하나를 리턴한다.

 

 

document.querySelector('선택자')

: 선택한 선택자를 만족하는 요소 하나를 리턴한다.

 

 

document.getElementsByClassName('class명')[순서]

: 선택한 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 리턴한다.

 

 

document.getElementByTagname('태그명')[순서]

: 선택한 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 리턴한다. 마찬가지로 [순서]없이 단일 tag만을 가져올수 있다.

 

 

document.querySelectorAll('선택자명')[순서]

: 해당 선택자를 만족하는 모든 요소들을 배열에 담아 인덱스에 맞는 요소를 리턴한다.

 

 

 

---

 

Hoisting(호이스팅)이란?

함수 안에 있는 선언들을 모두 끌어올려서 해당  함수 유효 범위의 최상단에 선언 하는 것을 말한다. hoisting은 해당 선언요소가 전역범위인지, 함수범위인지에 따라 수행방법이 다르다. 함수내에 선언된 함수범위(function scope)의 변수는 해당 함수의 최상위로 끌어올려지며, 함수밖에 선언한 전역범위(global scope)의 전역변수는 스크립트 단위 최상위로 끌어올려진다. 유효범위는 {}(함수)이다.

 

※ 선언된 변수와 할당된 내용이 전부 끌어올려지는것이 아니라, 선언부분만 분리되어 최상위로 끌어올려진다. 꼭 기억하자, 선언과 할당의 분리!

 

그러니 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리는 변화가 없다. 

 

 

 

 

  var의 유효범위  

JavaScript의 var은 let과 비슷하지만 사용하지 않는다고 이전 포스팅에서 작성하였었다. var은 let과 달리 함수 스코프에서만 유효하다. 그렇기떄문에 Hoisting의 경우, 선언문은 전역범위가 아닌 유효범위(함수) 내부 최상단에 위치하게 된다.

 

 

  함수의 Hoisting  

함수선언 역시 Hoisting이 가능하다. 함수스코프 내에서 어떤 위치에서 함수 선언을 하든지 호출할 수 있다. 함수 Hoisting에는 오류가 발생할 수 있는데, 변수를 함수에 담는 선언식을 사용할 경우, 선언과 할당이 분리되면서 변수만 선언되고 분리된 함수는 선언되지 않은 빈값으로 할당되어 오류가 뜨게 된다. 함수를 선언하는 방법에는 함수를 담는 함수 표현식과 함수명을 지정하는 함수선언식이 있고, 위같은 오류는 변수에 함수를 담는 함수표현식에만 적용이 되고 함수 선언식에는 발생하지 않는다.

 

※ 선언된 변수와 할당된 내용이 전부 끌어올려지는것이 아니라, 선언부분만 분리되어 최상위로 끌어올려진다. 꼭 기억하자, 선언과 할당의 분리!

 

 

 

참고링크 : https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

 

참고링크 : https://velog.io/@jeongmin_sung/DOM-%EB%8F%94-Document-Object-Model

DOM 돔 (Document Object Model)