What is the DOM
-
웹 문서를 위한 프로그래밍 인터페이스.
-
문서를 노드와 객체로 표현하여 프로그래밍 언어가 페이지와 상호 작용할 수 있도록 함.
-
웹 페이지의 객체 지향 표현으로서, JavaScript와 같은 스크립팅 언어로 수정 가능.
DOM은 프로그래밍 언어가 아니지만, DOM이 없으면 JavaScript 언어는 웹 페이지, HTML 문서, SVG 문서 및 그 구성 요소에 대한 모델이나 개념을 가질 수 없습니다.
문서 전체, 머리글, 문서 내의 표, 표 헤더, 표 셀 내의 텍스트 및 문서의 모든 요소는 해당 문서의 문서 객체 모델의 일부입니다. 이들은 모두 DOM과 JavaScript와 같은 스크립팅 언어를 사용하여 접근하고 조작할 수 있습니다.
const paragraphs = document.querySelectorAll("p");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.DOM tree
- 노드가 HTML 또는 XML 문서의 내용을 나타내는 트리 구조
<html lang="en">
<head>
<title>My Document</title>
</head>
<body>
<h1>Header</h1>
<p>Paragraph</p>
</body>
</html>
DOM 트리와 유사하지만 동일하지는 않다. (실제 DOM 트리는 공백을 보존하기 때문)
웹 브라우저가 HTML 문서를 구문 분석할 때, DOM 트리를 생성하고 이를 사용하여 문서를 표시한다.
Whitespace
- 공백(Whitespace)은 공백, 탭 또는 줄 바꿈(정확히 말하자면 CRLF 시퀀스, 캐리지 리턴 또는 줄 바꿈 문자)으로만 구성된 문자열.
What happend to whitespace
원본 문서에서 HTML 요소 밖에 있는 모든 공백 문자는 DOM에서 나타난다. 이는 편집기가 문서의 서식을 유지하기 위해 내부적으로 필요하다.
- 공백만 포함하는 텍스트 노드가 있을 수 있다.
- 일부 텍스트 노드는 시작이나 끝에 공백을 포함할 수 있다.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>My Document</title>
</head>
<body>
<h1>Header</h1>
<p>Paragraph</p>
</body>
</html>
DOM에서 공백 문자를 보존하는 것은 여러모로 유용하지만, 특정 레이아웃을 구현하기 더 어렵게 만들고, DOM의 노드를 반복 처리하려는 개발자에게 문제를 일으키는 경우가 있다.
Reference
선한 영향력을 줄 수 있는 개발자가 되자, 되고싶다.