Skip to content

Commit 1ed45b4

Browse files
lazy-dinosaurlazy-dinosaur
committed
update post
1 parent 981e8c2 commit 1ed45b4

8 files changed

+170
-9
lines changed

‎content/posts/자원/웹개발/DOM(Document Object Model).md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
tags:
3+
- resource
4+
- web
5+
createdAt: 2025-04-14 18:08:07
6+
modifiedAt: 2025-04-16 12:47:05
7+
publish: 자원/웹개발
8+
related: ""
9+
series: ""
10+
---
11+
12+
# DOM(Document Object Model)
13+
14+
DOM(Document Object Model)이란 HTML,XML 같은 마크업 문서를 위한 프로그래밍 인터페이스 이다.
15+
DOM은 문서를 노드와 객체로 표현해 웹 페이지의 구조화된 표현을 제공한다.
16+
17+
DOM은 개발자가 Javascript를 통해 웹 페이지의 콘텐츠, 구조, 스타일을 동적으로 변경할 수 있게 해 준다. 이를 통해 사용자와 상호작용하는 웹 애플리케이션을 구축할 수 있다.
18+
19+
## DOM의 핵심 개념
20+
21+
- 트리구조: 문서는 부모-자식 관계를 가진 노드들의 트리로 표현된다.
22+
- 노드: HTML요소, 속성 텍스트등 모든 것이 노드이다.
23+
- 조작기능: Javascript를 사용해 DOM 노드를 추가, 수정, 삭제할 수 있다.
24+
- 이벤트 처리: 사용자 상호작용(클릭, 입력 등)에 반응하는 이벤트를 처리한다.
25+
26+
## DOM의 구성 요소
27+
28+
- Document: DOM 트리의 루트 노드
29+
- Element: HTML 태그에 해당하는 노드(div, p, span 등)
30+
- Attribute: 요소의 속성(id, class, href 등)
31+
- Text: 텍스트 내용을 담고 있는 노드
32+
33+
> [!info] window 오브젝트
34+
> window 객체는 브라우저에서 Javascript의 전역 객체이다. 브라우저 환경에서의 모든 Javascript코드가 실행되는 기본적인 컨테이너 이다.
35+
36+
### 주요 객체들의 부모
37+
38+
- `document`: DOM에 접근할 수 있는 객체
39+
- `location`: 현재 URL 정보와 탐색 기능
40+
- `history`: 브라우저 방문 기록 관리
41+
- `navigator`: 브라우저 정보
42+
- `screen`: 사용자 화면 정보
43+
- `localStorage`,`sessionStorage`:클라이언트 측 데이터 저장소
44+
45+
## DOM 조작 예시
46+
47+
```js
48+
// 요소 선택
49+
const element = document.getElementById("myId");
50+
51+
// 새 요소 생성
52+
const newElement = document.createElement("div");
53+
54+
// 요소에 내용 추가
55+
newElement.textContent = "안녕하세요";
56+
57+
// DOM에 요소 추가
58+
element.appendChild(newElement);
59+
```

‎content/posts/자원/웹개발/Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념.md

Lines changed: 86 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ tags:
44
- web
55
- javascript
66
createdAt: 2025-04-14 09:46:13
7-
modifiedAt: 2025-04-16 09:26:38
7+
modifiedAt: 2025-04-16 11:15:36
88
publish: 자원/웹개발
99
related: ""
1010
series: ""
@@ -13,4 +13,88 @@ series: ""
1313
# Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념
1414

1515
웹사이트는 [[HTML]] 과 [[CSS]] 를 통해 기본적인 구조와 형태가 정해진다. 그리고 Javascript로 이 웹사이트를 조작할 수 있는데 그렇다고 해서 파일 자체를 수정할 순 없다.
16-
렌더링이 필요한 이유가 어겨기에 있다고 생각해도 될것같다. 브라우져가 HTML과 CSS를 이해하고 프로그램화 하는 과정이 렌더링 과정이라고 생각된다. 이 [[웹사이트는 어떻게 보여지는가-브라우저의 렌더링|브라우저의 렌더링 과정]]중 브라우저가 Javascript를 통해 조작이 가능하도록 이해하고 인터페이스를 만드는 과정이 있는데 그것이 바로 파싱을 통해 [[DOM(Document Object Model)]]과 [[CSSOM(CSS Object Model)]]을 생성하는 과정이다.
16+
17+
[[웹사이트는 어떻게 보여지는가-브라우저의 렌더링|렌더링]]이 필요한 이유가 어겨기에 있다고 생각해도 될것같다. 브라우져가 HTML과 CSS를 이해하고 프로그램화 하는 과정이 렌더링 과정이라고 생각된다.
18+
19+
이 브라우저의 렌더링 과정중 브라우저가 Javascript를 통해 조작이 가능하도록 이해하고 인터페이스를 만드는 과정이 있는데 그것이 바로 파싱을 통해 [[DOM(Document Object Model)]]과 [[CSSOM(CSS Object Model)]]을 생성하는 과정이다.
20+
21+
## DOM(Document Object Model)의 파싱
22+
23+
DOM은 HTML 문서를 트리 구조로 표현한 것이다. 이 트리의 각 노드는 문서의 일부(요소, 속성, 텍스트 등)를 나타낸다. **DOM은 Javascript가 페이지상의 콘텐츠와 구저에 접근하고 조작할 수 있게 해주는 인터페이스 이다**.
24+
25+
HTML이 파서를 통해 DOM의 트리를 구축 하는 과정은 다음과 같다.
26+
27+
1. 바이트를 문자로 변환
28+
HTML의 원시 데이터는 바이트로 이것을 문자로 변환하는 과정을 거친다.
29+
2. 토큰화
30+
문자열이 HTML 명세에 따라 토큰(`<html>`, `<body>` 등)으로 변환된다.
31+
3. 노드 생성
32+
각 토큰이 **속성과 규칙을 가진 객체(노드)로 변환**된다.
33+
4. DOM 트리 구축
34+
노드들이 트리 구조로 연결되며 **부모-자식 간의 관계가 설정**되고 요소간의 계층 구조가 형성된다. 이는 루트(`document`)부터 모든 요소, 속성, 텍스트 노드까지 포함한다.
35+
36+
## CSSOM(CSS Object Model)의 파싱
37+
38+
CSSOM은 HTML 대신 **CSS를 트리 구조로 표현하고 조작하는 API 집합**이다. CSS 스타일 시트를 표현하는 객체 모델로 DOM과 유사하게 트리구조로 되어 있다.
39+
40+
CSS가 파싱되어 CSSOM트리가 구축되는 과정은 다음과 같다.
41+
42+
1. CSS로드
43+
외부 스타일시트,`<style>`태그, 인라인 스타일 등에서 CSS 규칙을 로드한다.
44+
2. 토큰화
45+
CSS 규칙을 토큰으로 변환한다.
46+
3. 노드 생성
47+
각 CSS 규칙을 나타내는 노드를 생성한다.
48+
4. CSSOM 트리 구축
49+
CSS 규칙이 계층적 트리 구조로 구성되고 **스타일 상속이 적용**된다(부모 요소의 스타일이 자식 요소에 상속). 명시성과 우선순위에 따라 스타일이 계산된다.
50+
51+
## DOM에 접근하기
52+
53+
DOM 은 여러가지의 object를 포함한다. `window`,`document`,`element`,`nodeList` 등이 대표적이며 각각의 object를 위한 인터페이스가 존재한다.
54+
55+
대표적인 인터페이스는 다음과 같다.
56+
57+
- document.getElementById(id)
58+
- document.getElementsByTagName(name)
59+
- document.createElement(name)
60+
- parentNode.appendChild(node)
61+
- element.innerHTML
62+
- element.style.left
63+
- element.setAttribute
64+
- element.getAttribute
65+
- element.addEventListener
66+
- window.content
67+
- window.onload
68+
- window.dump
69+
- window.scrollTo
70+
71+
## 예시
72+
73+
```js DOM 인터페이스 예시
74+
var table = document.getElementById("table");
75+
var tableAttrs = table.attributes; // Node/Element interface
76+
for (var i = 0; i < tableAttrs.length; i++) {
77+
// HTMLTableElement interface: border attribute
78+
if (tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1";
79+
}
80+
// HTMLTableElement interface: summary attribute
81+
table.summary = "note: increased border";
82+
```
83+
84+
```js CSSOM 인터페이스 예시
85+
const element = document.getElementById("myElement");
86+
element.style.color = "blue";
87+
element.style.backgroundColor = "#f0f0f0";
88+
element.style.fontSize = "16px";
89+
90+
// 여러 속성을 한 번에 변경
91+
Object.assign(element.style, {
92+
margin: "10px",
93+
padding: "5px",
94+
borderRadius: "3px",
95+
transition: "all 0.3s ease",
96+
});
97+
98+
// CSS 변수(CSS Custom Properties) 설정
99+
element.style.setProperty("--main-color", "purple");
100+
```

‎content/posts/자원/웹개발/웹사이트는 어떻게 보여지는가-브라우저의 렌더링.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ tags:
33
- resource
44
- web
55
createdAt: 2025-04-14 14:30:49
6-
modifiedAt: 2025-04-16 09:26:16
6+
modifiedAt: 2025-04-16 09:36:05
77
publish: 자원/웹개발
88
related: ""
99
series: ""
@@ -44,3 +44,5 @@ series: ""
4444
7. Compositing
4545

4646
생성된 여러 **레이어를 합성하여 최종 화면을 화면에 표시**한다. CSS 의 Z-index에 의해 쌓이는 순서가 결정된다. 이 레이어 합성은 주로 GPU를 활용하여 처리하여 에니메이션이나 전환 효과의 성능을 향상시킨다.
47+
48+
이렇게 화면에 보여지는 웹사이트는 DOM과 CSSOM를 이용해 [[Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념|Javascript를 통해 조작]]이 가능해 진다.

‎public/link-map.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"3.resource/Web/웹사이트에 들어갈때에는 어떤 일이 생기는가-웹사이트접속의 과정.md": "자원/웹개발/웹사이트에 들어갈때에는 어떤 일이 생기는가-웹사이트접속의 과정",
88
"3.resource/Web/Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념.md": "자원/웹개발/Javascript가 웹사이트를 어떻게 조작할 수 있는가-DOM과 CSSOM의 개념",
99
"3.resource/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기.md": "자원/크롬 확장프로그램/크롬 확장프로그램에 케시메모리 추가하기",
10+
"3.resource/Web/HTML/DOM(Document Object Model).md": "자원/웹개발/DOM(Document Object Model)",
1011
"3.resource/AI/tools/Aider.md": "자원/ai/Aider",
1112
"1.project/취업을 위한 알고리즘 공부/취업을 위한 알고리즘 공부.md": "프로젝트/알고리즘/취업을 위한 알고리즘 공부",
1213
"1.project/물류 서비스 웹사이트 개발/물류 서비스 웹사이트 개발 회고-혼자서 외주 프로젝트 완성하기.md": "프로젝트/아임유어박스 웹사이트/물류 서비스 웹사이트 개발 회고-혼자서 외주 프로젝트 완성하기",

‎public/meta-data.json

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"tags": ["resource", "web"],
4141
"series": "",
4242
"createdAt": "2025-04-14 14:30:49",
43-
"modifiedAt": "2025-04-16 09:26:16",
43+
"modifiedAt": "2025-04-16 09:36:05",
4444
"publish": "자원/웹개발"
4545
},
4646
{
@@ -73,7 +73,7 @@
7373
"tags": ["resource", "web", "javascript"],
7474
"series": "",
7575
"createdAt": "2025-04-14 09:46:13",
76-
"modifiedAt": "2025-04-16 09:26:38",
76+
"modifiedAt": "2025-04-16 11:15:36",
7777
"publish": "자원/웹개발"
7878
},
7979
{
@@ -87,6 +87,17 @@
8787
"modifiedAt": "2025-03-31 19:48:24",
8888
"publish": "자원/크롬 확장프로그램"
8989
},
90+
{
91+
"urlPath": "자원/웹개발/DOM(Document Object Model)",
92+
"title": "DOM(Document Object Model)",
93+
"summary": "",
94+
"image": "",
95+
"tags": ["resource", "web"],
96+
"series": "",
97+
"createdAt": "2025-04-14 18:08:07",
98+
"modifiedAt": "2025-04-16 12:47:05",
99+
"publish": "자원/웹개발"
100+
},
90101
{
91102
"urlPath": "자원/ai/Aider",
92103
"title": "Aider",

‎public/post-contents/자원/웹개발/DOM(Document Object Model).json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"content": "\n# DOM(Document Object Model)\n\nDOM(Document Object Model)이란 HTML,XML 같은 마크업 문서를 위한 프로그래밍 인터페이스 이다.\nDOM은 문서를 노드와 객체로 표현해 웹 페이지의 구조화된 표현을 제공한다.\n\nDOM은 개발자가 Javascript를 통해 웹 페이지의 콘텐츠, 구조, 스타일을 동적으로 변경할 수 있게 해 준다. 이를 통해 사용자와 상호작용하는 웹 애플리케이션을 구축할 수 있다.\n\n## DOM의 핵심 개념\n\n- 트리구조: 문서는 부모-자식 관계를 가진 노드들의 트리로 표현된다.\n- 노드: HTML요소, 속성 텍스트등 모든 것이 노드이다.\n- 조작기능: Javascript를 사용해 DOM 노드를 추가, 수정, 삭제할 수 있다.\n- 이벤트 처리: 사용자 상호작용(클릭, 입력 등)에 반응하는 이벤트를 처리한다.\n\n## DOM의 구성 요소\n\n- Document: DOM 트리의 루트 노드\n- Element: HTML 태그에 해당하는 노드(div, p, span 등)\n- Attribute: 요소의 속성(id, class, href 등)\n- Text: 텍스트 내용을 담고 있는 노드\n\n> [!info] window 오브젝트\n> window 객체는 브라우저에서 Javascript의 전역 객체이다. 브라우저 환경에서의 모든 Javascript코드가 실행되는 기본적인 컨테이너 이다.\n\n### 주요 객체들의 부모\n\n- `document`: DOM에 접근할 수 있는 객체\n- `location`: 현재 URL 정보와 탐색 기능\n- `history`: 브라우저 방문 기록 관리\n- `navigator`: 브라우저 정보\n- `screen`: 사용자 화면 정보\n- `localStorage`,`sessionStorage`:클라이언트 측 데이터 저장소\n\n## DOM 조작 예시\n\n```js\n// 요소 선택\nconst element = document.getElementById(\"myId\");\n\n// 새 요소 생성\nconst newElement = document.createElement(\"div\");\n\n// 요소에 내용 추가\nnewElement.textContent = \"안녕하세요\";\n\n// DOM에 요소 추가\nelement.appendChild(newElement);\n```\n",
3+
"plainContent": "DOM(Document Object Model)이란 HTML,XML 같은 마크업 문서를 위한 프로그래밍 인터페이스 이다.\nDOM은 문서를 노드와 객체로 표현해 웹 페이지의 구조화된 표현을 제공한다.\nDOM은 개발자가 Javascript를 통해 웹 페이지의 콘텐츠, 구조, 스타일을 동적으로 변경할 수 있게 해 준다. 이를 통해 사용자와 상호작용하는 웹 애플리케이션을 구축할 수 있다.\n트리구조: 문서는 부모-자식 관계를 가진 노드들의 트리로 표현된다.\n노드: HTML요소, 속성 텍스트등 모든 것이 노드이다.\n조작기능: Javascript를 사용해 DOM 노드를 추가, 수정, 삭제할 수 있다.\n이벤트 처리: 사용자 상호작용(클릭, 입력 등)에 반응하는 이벤트를 처리한다.\nDocument: DOM 트리의 루트 노드\nElement: HTML 태그에 해당하는 노드(div, p, span 등)\nAttribute: 요소의 속성(id, class, href 등)\nText: 텍스트 내용을 담고 있는 노드\n> [!info] window 오브젝트\n> window 객체는 브라우저에서 Javascript의 전역 객체이다. 브라우저 환경에서의 모든 Javascript코드가 실행되는 기본적인 컨테이너 이다.\ndocument: DOM에 접근할 수 있는 객체\nlocation: 현재 URL 정보와 탐색 기능\nhistory: 브라우저 방문 기록 관리\nnavigator: 브라우저 정보\nscreen: 사용자 화면 정보\nlocalStorage,sessionStorage:클라이언트 측 데이터 저장소"
4+
}

0 commit comments

Comments
 (0)