Java Script DOM

목차
DOM
DOM이 뭔가요?
DOM을 구성하는 건 뭐가 있나요?

DOM

1. DOM이 뭔가요?

DOM이란?

문서 객체 모델(The Document Object Model)
웹페이지의 콘텐츠 및 구조, 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스
(= JS같은 스크립팅 언어가 쉽게 웹페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당함)
웹페이지를 계층적 구조와 정보로 표현하며 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조
DOM은 HTML 문서로부터 생성되지만 항상 동일하지는 않음

*트리자료구조 : 노드들의 계층 구조로 이루어짐

**DOM과 HTML의 차이

HTML : 화면에 보이고자 하는 모양과 구조를 문서로
만든 것으로 단순 텍스트로 구성(최초에 화면을 그릴때 사용하는 설계도)
DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있음 (설계도를 이용하여 실제로 화면에 나타내지는 인터페이스)

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<head>
<body>
    <h2 style="color:blue">DOM 문서 객체 모델</h2>
</body>
</html>

DOM의 정적 생성과 동적 생성

정적 생성 : 이미 HTML 파일에 적혀있는 코드를 위에서부터 아래로 읽어내려가며 생성하는 과정만 의미함

HTML 문서에 직접 태그로 작성한 것

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<head>
<body>
    <h2 style="color:blue">DOM 문서 객체 모델</h2>
</body>
</html>

동적 생성 : HTML 문서에 없는 노드를 만들어 이어 붙여 웹페이지에 렌더링되게 만드는 모든 과정

자바스크립트를 이용해 있던 노드에 없는 노드를 만들어 이어 붙임

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<head>
<body>
    <h2 id="h2-title" style="color:blue">DOM 문서 객체 모델</h2>

    <script src="saple.js"/>
</body>
</html>

두번째 코드처럼 스크립트 태그를 달아 외부의 자바스크립트 파일을 연결하고, 일련의 작업을 하게된다면 이것은 동적으로 노드를 생성한다고 봄

2. DOM을 구성하는 건 뭐가 있나요?

문서 노드(Document Node) - 최상위 트리이자 접근의 시작점
- HTML 문서 전체를 나타내는 노드이기도 함
- HTML에서 이 문서노드는 오로지 1개만 존재함
요소 노드(Element Node) - HTML 요소를 표현
- attirbute node나 text node에 접근하기 위해서는 먼저 element node에 접근해야함
- 속성노드를 가질 수 있는 유일한 노드
- 부모-자식 관계를
- ex. html, body, div 등
속성 노드(Attribute Node) - HTML 요소의 속성을 표현(HTML 요소의 자식이 아닌 일부)
- 요소 노드에 대한 정보를 가지고 있음
텍스트 노드(Text Node) - HTML 요소의 텍스트를 표현(자식을 가질 수 없음)
- HTML 문서의 모든 텍스트

총 정리

DOM

DOM이 뭔가요?
스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당
DOM을 구성하는 건 뭐가 있나요?
Document, element, attribute, text node로 이루어져있음
- Document는 HTML의 문서 전체를 나타내고, Element는 HTML 요소를 표현, Attribute는 요소 노드에 대한 정보를 가지고 있으며, Text는 HTML 문서 내의 모든 텍스트가 여기에 해당한다고 볼 수 있음

출처

문서 객체 모델
DOM과 HTML
DOM의 구성요소
DOM API 자세한 설명

Java Script | DOM

목차

DOM

DOM

1. DOM이 뭔가요?

2. DOM을 구성하는 건 뭐가 있나요?

총 정리

DOM

Further Reading

JavaScript | DOM, Serverless

Study | DOM과 BOM

Java Script | Callback