배열
일반 배열
밀집 배열
동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조. 배열의 요소는 하나의 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다.
배열의 요소가 동일한 크기를 가지며 빈틈없이 연속적으로 이어져 있으므로, 효율적으로 빠르게 동작한다.
자바스크립트의 배열
희소 배열
자바스크립트의 배열은 각각의 메모리 공간이 동일한 크기를 갖고 있지 않으며 연속적으로 이어지지 않아도 된다.
자바스크립트의 배열은 일반적인 의미의 배열이 아닌 일반 배열의 동작을 흉내낸 특수한 객체이다.
자바스크립트 배열은 인덱스로 배열 요소에 접근하는 경우에는 일반 배열보다 느리지만, 특정 요소를 탐색하거나 요소를 삽입 or 삭제하는 경우 일반 배열보다 빠르다.
DOM
브라우저의 렌더링 엔진은 HTML 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있도록 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.
DOM Node
문서 노드(Document Node)
트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다.
DOM tree에 접근하기 위한 시작점(entry point)이다.
요소 노드(Element Node)
HTML 요소를 표현하며, HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술한다고 말 할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다.
어트리뷰트 노드(Attribute Node)
HTML 요소의 어트리뷰트를 표현하며, 해당 어트리뷰트가 지정된 요소의 자식이 아닌 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.
텍스트 노드(Text Node)
텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다.
참조
https://poiemaweb.com/js-array-is-not-arrray
https://poiemaweb.com/js-dom
