[DOM]"HTML DOM과 웹 페이지 동작 원리"

웹 개발에서 DOM은 핵심 개념중 하나입니다. DOM은 웹브라우저가 HTML 문서를 읽어들이고 그 구조를 메모리에 표현하는 방식을 설명합니다. 이글에서는 웹 브라우저의 동작 원리와 DOM의 개념을 살펴보겠습니다.

 

웹 페이지 동작 원리

1. 컴퓨터 웹 브라우저는 HTML 문서를 읽어 들입니다. 이 과정은 파싱(문법 해석)이라고도 합니다.
2. 파싱된 문서는 메모리에 트리구조로 저장됩니다, 이 트리구조는 DOM 이라고 불립니다.

DOM 구조 예시

예를 들어 DOM 구조는 다음과 같이 나타낼수 있습니다.

         window(최상위 부모객체: html문서, 주소창, 메뉴, 상태바등)
            |
         document(객체,html 문서)
            |
           html(태그)
            |
  ----------------------------------
  |                                 |
 head(태그)                        body(태그)               
                                    |
                  ---------------------------------------
                 |                                      |
   div(태그) - style = background-color = "aqua"       script - src = "./js/03_dom_detail.js"
                 |
        "안녕하세요"(텍스트, == innerHTML속성)

DOM을 활용한 웹페이지 조작

DOM을 통해 웹페이지의 요소를 선택하고 조작할 수 있습니다 .

예를 들어,아래와 같이 DOM을 활용하여 div 태그의 배경색을 변경할 수 있습니다.

document.querySelector("div").style.backgroundColor = "aqua";

DOM을 사용하여 텍스트 내용을 변경할 수도 있습니다. "안녕하세요" 라는 텍스트를 다음과 같이 변경할 수 있습니다.

document.querySelector("div").innerHTML = "안녕하세요";

이렇게 DOM을 이용하면 웹페이지를 동적으로 조작할 수 있으며 사용자에게 더 풍부한 경험을 제공할 수 있습니다.