JavaScript에서 DOM(Document Object Modle)이란 무엇입니까?

DOM(Document Object Model)은 웹 문서용 프로그래밍 인터페이스입니다. 웹페이지의 구조를 개체 트리로 표현하며, 각 개체는 요소, 속성, 텍스트 콘텐츠 등 페이지의 일부에 해당합니다.

JavaScript에서 DOM을 사용하면 프로그래밍 방식으로 HTML 또는 XML 문서와 상호 작용할 수 있습니다. 웹페이지의 콘텐츠, 구조, 스타일을 동적으로 수정할 수 있습니다.

DOM의 주요 개념:

1. 문서 : 웹페이지 전체를 의미합니다.
2. 요소:
   ,

   , 등과 같은 HTML 태그를 나타냅니다.

3. 노드: DOM 트리의 기본 단위로 요소, 텍스트 또는 속성이 될 수 있습니다.
4. DOM 트리: 웹페이지를 노드 트리로 표현하는 계층 구조입니다. 루트 노드는 문서이고 각 HTML 요소는 문서에서 분기되는 노드입니다.

DOM 표현의 예:

다음과 같은 HTML 문서의 경우:


  
    <title>My Page</title>
  
  
    <div>



<p>The DOM for this document might look like this:<br>
</p>

<pre class="brush:php;toolbar:false">Document
 ├── html
     ├── head
     │    └── title
     └── body
          └── div#content
               ├── h1
               └── p

JavaScript가 DOM을 사용하는 방법:

1. 요소 액세스: JavaScript는 document.getElementById() 또는 document.querySelector()와 같은 메서드를 사용하여 DOM에서 요소를 선택하고 액세스할 수 있습니다.

   let heading = document.getElementById("content");

1. 요소 조작: JavaScript는 요소의 콘텐츠, 속성 또는 스타일을 수정할 수 있습니다.

   heading.innerHTML = "New Content";
   heading.style.color = "red";

1. 이벤트 처리: JavaScript는 이벤트 리스너를 DOM 요소에 연결하여 클릭, 키 누르기 등과 같은 사용자 작업에 응답할 수 있습니다.

   document.getElementById("myButton").addEventListener("click", function() {
     alert("Button clicked!");
   });

1. 요소 생성 및 제거: JavaScript는 동적으로 새 요소를 생성하거나 기존 요소를 제거할 수 있습니다.

   const newElement = document.createElement("div");
   document.body.appendChild(newElement);

DOM이 중요한 이유:

• JavaScript가 웹페이지의 구조 및 콘텐츠와 상호 작용하고 조작할 수 있는 방법을 제공합니다.
• 페이지를 다시 로드할 필요 없이(예: UI 업데이트 또는 사용자 입력 처리) 동적 대화형 웹페이지를 허용합니다.

DOM 메소드:

다음은 JavaScript에서 일반적으로 사용되는 DOM 메소드입니다.

• getElementById(): ID로 요소를 선택합니다.
• querySelector(): CSS 선택기를 사용하여 첫 번째로 일치하는 요소를 선택합니다.
• createElement(): 새로운 HTML 요소를 생성합니다.
• appendChild(): 요소에 새 하위 노드를 추가합니다.
• RemoveChild(): 요소에서 하위 노드를 제거합니다.
• setAttribute(): 요소에 속성을 설정합니다.
• addEventListener(): 요소에 이벤트 핸들러를 연결합니다.

실제 사례:

  
    <title>My Page</title>
  
  
    <div>



<p>The DOM for this document might look like this:<br>
</p>

<pre class="brush:php;toolbar:false">Document
 ├── html
     ├── head
     │    └── title
     └── body
          └── div#content
               ├── h1
               └── p

이 예에서는 h1 요소가 선택되고 해당 콘텐츠가 업데이트되며 클릭 이벤트 리스너가 연결됩니다. 제목을 클릭하면 알림이 표시됩니다.

DOM은 JavaScript로 웹페이지의 구조를 동적으로 조작하기 위한 필수 개념이며, 대화형 웹 애플리케이션을 만드는 데 기본이 됩니다.