HTML로 내 화면을 설명해둔 것과, 브라우저 켜서 보고있는 화면. 둘 다 같은 "컨텐츠"와 "구조"를 표현하고 있습니다. 🗣 표현 방식만 다를 뿐.
이 다른 표현 방식 간의 연결다리 역할을 하는 논리적 구조가 DOM입니다.
따라서 돔은 우리가 보는 웹 화면의 구조와 컨텐츠를 논리적으로 나타내서, 웹 화면과 프로그래밍 언어(또는 스크립트)를 연결시켜 주는 인터페이스 입니다.
그리고 Document 라는 건 메모리에 적재되어 있는 문서입니다. 이 웹페이지를 보여주는 HTML... 그러나 요즘은 그냥 JavaScript로 돔을 구현합니다.
React.js, Vue.js, jQuery...
돔은 🌲 트리 구조로 되어있습니다.
그래서 각 브랜치는 노드로 끝나고, 각 노드는 object를 가지고 있습니다.
이 돔에는 method(함수)가 있고, 개발자는 이 함수를 활용해서 돔 트리 🌲에 접근해서 스타일, 내용 등 이것저것 바꿉니다.
노드에 이벤트가 생기면, 개발자는 이 노드의 이벤트를 감지하기 위해서 이벤트 핸들러를 붙여서 상황에 따른 동작을 구현할 수 있습니다.
DOM에는 인터페이스가 아주아주 많습니다.
가장 기본적인 Document 인터페이스를 포함해서 Element, Event, Node, Window, XMLDocmuent 등이 있습니다... 이런 인터페이스가 제공되기 때문에 개발자는 DOM을 다룰 수 있죠.
그럼 HTML DOM은 어떻게 설명이 될까요?
HTML로 짠 document는 Document 인터페이스를 사용한다는 내용을 HTML이라는 언어로 적어두었습니다. Document 인터페이스는 HTML 명세에 의해서 확장됩니다. 특히 Element 인터페이스가 HTML 명세와 만나면 HTMLElement라는 놈으로 확장됩니다.
HTML DOM API는 이 확장된 내용을 편하게 사용할 수 있도록 인터페이스를 제공합니다. 이 API를 활용해서 브라우저 창, 탭, CSS 스타일, 브라우저 히스토리 등의 다양한 브라우저의 특징을 접근할 수 있게 됩니다.
돔과 자바스크립트의 관계, 그리고 DOM 접근하기
돔을 그리는 언어에는 제한이 없지만, JavaScript가 절대적입니다.
HTML 대신에 JS로 쓰여있고, document 접근을 위해 DOM을 사용하는 코드를 써보겠습니다.
이 모델은 웹 표현을 위한 것이기 때문에, 이걸 사용하지 않는다면? 그냥 언어는 같지만 표현하고자 하는 내용-분야, 목적 이 달라지는 것이죠. (Node.js 같은)
이 DOM 이름에서 나타나듯 결국 object-oriented 표현 방식인데 JS 또한 객체 지향입니다.
예시로 돔이 명시해둔 querySelectorAll 이라는 함수를 사용하면, 모든 span 엘리먼트가 담긴 리스트를 얻을 수 있습니다.
let tagList = document.querySelectorAll("span"); // 태그 싹다 가져온다
console.log(tagList[0]); // 가장 첫번째로 마주친 노드를 출력
그리고 properties, methods, events가 객체로 잘 정리되어있기 때문에, 우리는 그냥 해당 객체를 접근할 수 있는 것입니다.
document 라는 객체는 document 자체를 나타내듯이,
예를 들어 div 는 HTMLDivElement DOM 인터페이스에 따라 동작하는 것이기 때문에, 해당 인터페이스로 div 객체에 접근하면 됩니다.
DOM에 이런 인터페이스가 정말정말 많습니다. SVG를 다루는 데에는 SVG API를 쓰면 되고, HTML DOM을 다루고 싶다면 HTML DOM API를 사용하면 됩니다...
돔의 필수 데이터 타입
Document
흔히 돔에 있는 노드를 가리킬 때 element 노드라고 합니다.
Element가 document 타입의 객체를 리턴한다면, 그건 최상위 root document 객체입니다.
Node
document에 들어가있는 모든 객체는 노드입니다. 노드 종류만 다를 뿐입니다.
HTML document에서는 객체가 element 노드일수도 있고, text 노드일 수도 있고 attribute 노드일 수도 있습니다.
Element
Element 타입은 node 베이스입니다.
NodeList
document에 달린 elements 배열 입니다.
Attr
Element처럼 Attr도 node입니다.
NamedNodeMap
이름이 Node지만, Node 객체가 아닌 Attr 객체를 다룹니다. 이름으로 접근하고, 편의상 인덱스가 있긴 한데 이 리스트에는 순서가 없습니다.
그리고 일반적으로 Attr 노드를 attribute라고 부르고, DOM 노드 배열을 nodeList라고 부릅니다.
돔 인터페이스
Table Object는 HTMLTableElement 이면서, HTML Element 이면서, DOM node tree에 달린 node이기 때문에 Node 인터페이스도 씁니다.
많이 쓰는 common DOM API
엘리먼트 고르기
document.querySelector(selector)
document.querySelectorAll(name)
엘리먼트 생성하기
document.createElement(name)
엘리먼트 붙이기
parentNode.appendChild(node)
element.innerHTML HTML로 내용 쓰니까 그냥 텍스트도 되고 엘리먼트도 붙일 수 있음
DOM
Created: October 27, 2021 1:29 AM Tags: web
DOM은 Document Object Model 의 약자로, 돔 이라고 부릅니다.
HTML로 내 화면을 설명해둔 것과, 브라우저 켜서 보고있는 화면. 둘 다 같은 "컨텐츠"와 "구조"를 표현하고 있습니다. 🗣 표현 방식만 다를 뿐.
이 다른 표현 방식 간의 연결다리 역할을 하는 논리적 구조가 DOM입니다.
따라서 돔은 우리가 보는 웹 화면의 구조와 컨텐츠를 논리적으로 나타내서, 웹 화면과 프로그래밍 언어(또는 스크립트)를 연결시켜 주는 인터페이스 입니다.
그리고 Document 라는 건 메모리에 적재되어 있는 문서입니다. 이 웹페이지를 보여주는 HTML... 그러나 요즘은 그냥 JavaScript로 돔을 구현합니다.
React.js, Vue.js, jQuery...
돔은 🌲 트리 구조로 되어있습니다.
그래서 각 브랜치는 노드로 끝나고, 각 노드는 object를 가지고 있습니다.
이 돔에는 method(함수)가 있고, 개발자는 이 함수를 활용해서 돔 트리 🌲에 접근해서 스타일, 내용 등 이것저것 바꿉니다.
노드에 이벤트가 생기면, 개발자는 이 노드의 이벤트를 감지하기 위해서 이벤트 핸들러를 붙여서 상황에 따른 동작을 구현할 수 있습니다.
DOM에는 인터페이스가 아주아주 많습니다.
가장 기본적인 Document 인터페이스를 포함해서 Element, Event, Node, Window, XMLDocmuent 등이 있습니다... 이런 인터페이스가 제공되기 때문에 개발자는 DOM을 다룰 수 있죠.
그럼 HTML DOM은 어떻게 설명이 될까요?
HTML로 짠 document는 Document 인터페이스를 사용한다는 내용을 HTML이라는 언어로 적어두었습니다. Document 인터페이스는 HTML 명세에 의해서 확장됩니다. 특히 Element 인터페이스가 HTML 명세와 만나면 HTMLElement라는 놈으로 확장됩니다.
HTML DOM API는 이 확장된 내용을 편하게 사용할 수 있도록 인터페이스를 제공합니다. 이 API를 활용해서 브라우저 창, 탭, CSS 스타일, 브라우저 히스토리 등의 다양한 브라우저의 특징을 접근할 수 있게 됩니다.
돔과 자바스크립트의 관계, 그리고 DOM 접근하기
돔을 그리는 언어에는 제한이 없지만, JavaScript가 절대적입니다.
HTML 대신에 JS로 쓰여있고, document 접근을 위해 DOM을 사용하는 코드를 써보겠습니다.
이 모델은 웹 표현을 위한 것이기 때문에, 이걸 사용하지 않는다면? 그냥 언어는 같지만 표현하고자 하는 내용-분야, 목적 이 달라지는 것이죠. (Node.js 같은)
이 DOM 이름에서 나타나듯 결국 object-oriented 표현 방식인데 JS 또한 객체 지향입니다.
예시로 돔이 명시해둔
querySelectorAll이라는 함수를 사용하면, 모든span엘리먼트가 담긴 리스트를 얻을 수 있습니다.그리고 properties, methods, events가 객체로 잘 정리되어있기 때문에, 우리는 그냥 해당 객체를 접근할 수 있는 것입니다.
document라는 객체는 document 자체를 나타내듯이,예를 들어
div는HTMLDivElementDOM 인터페이스에 따라 동작하는 것이기 때문에, 해당 인터페이스로div객체에 접근하면 됩니다.DOM에 이런 인터페이스가 정말정말 많습니다. SVG를 다루는 데에는 SVG API를 쓰면 되고, HTML DOM을 다루고 싶다면 HTML DOM API를 사용하면 됩니다...
돔의 필수 데이터 타입
Document
흔히 돔에 있는 노드를 가리킬 때 element 노드라고 합니다.
Element가 document 타입의 객체를 리턴한다면, 그건 최상위 root document 객체입니다.
Node
document에 들어가있는 모든 객체는 노드입니다. 노드 종류만 다를 뿐입니다.
HTML document에서는 객체가 element 노드일수도 있고, text 노드일 수도 있고 attribute 노드일 수도 있습니다.
Element
Element 타입은 node 베이스입니다.
NodeList
document에 달린 elements 배열 입니다.
Attr
Element처럼 Attr도 node입니다.
NamedNodeMap
이름이 Node지만, Node 객체가 아닌 Attr 객체를 다룹니다. 이름으로 접근하고, 편의상 인덱스가 있긴 한데 이 리스트에는 순서가 없습니다.
그리고 일반적으로 Attr 노드를 attribute라고 부르고, DOM 노드 배열을 nodeList라고 부릅니다.
돔 인터페이스
Table Object는
HTMLTableElement이면서, HTMLElement이면서, DOM node tree에 달린 node이기 때문에Node인터페이스도 씁니다.많이 쓰는 common DOM API
document.querySelector(selector)document.querySelectorAll(name)document.createElement(name)parentNode.appendChild(node)element.innerHTMLHTML로 내용 쓰니까 그냥 텍스트도 되고 엘리먼트도 붙일 수 있음element.style.leftelement.setAttribute()element.getAttribute()element.addEventListener()onload등scrollTo()