[코딩 자율학습 HTML + CSS + 자바스크립트] 12장 문서 객체 모델과 이벤트 다루기 - 4

🌐 DOM 생성과 조작

웹브라우저는 HTML 문서를 읽고 해석하여 DOM 트리를 생성합니다. DOM 트리는 HTML 요소를 노드 단위로 표현하며, JavaScript를 통해 이 노드들을 선택하고 조작할 수 있습니다. 각 노드는 부모와 자식 관계를 가지며, 이를 통해 전체 문서 구조를 동적으로 변경할 수 있습니다. DOM 조작은 주로 문서의 일부분을 변경하거나, 새로운 요소를 추가하거나, 기존 요소를 삭제하는 방식으로 이루어집니다. 이러한 조작은 웹 페이지의 사용자 경험을 향상시키는 데 필수적입니다.

🛠️ 노드 추가 방법

새로운 노드를 DOM 트리에 추가하기 위해서는 먼저 노드를 생성해야 합니다. JavaScript의 createElement 메서드를 사용하여 새로운 요소 노드를 생성하고, 이를 기존 DOM 트리에 연결합니다. 예를 들어, 새로운 a 태그를 추가하고 싶다면, document.createElement('a')를 사용하여 요소 노드를 생성하고, appendChild 메서드를 통해 원하는 위치에 추가할 수 있습니다. 이 과정에서 노드에 텍스트나 속성을 추가하여 더욱 풍부한 콘텐츠를 구성할 수 있습니다.

🚀 노드 연결 및 속성 설정

생성된 노드에 속성을 추가하려면 setAttribute 메서드를 사용합니다. 예를 들어, a 태그에 href 속성을 추가하려면 aElement.setAttribute('href', '')과 같이 설정할 수 있습니다. 텍스트 노드는 createTextNode 메서드를 사용하여 생성하고, appendChild로 요소 노드에 추가합니다. 이러한 방식으로 생성된 노드는 웹 페이지에 실질적으로 표시되며, 사용자와의 상호작용을 가능하게 합니다.

🗑️ 노드 삭제 방법

DOM에서 노드를 삭제하려면 removeChild 메서드를 사용합니다. 이 메서드는 특정 노드의 부모 노드에서 호출되어야 하며, 삭제할 노드를 인자로 받아들입니다. 예를 들어, 특정 h1 요소를 삭제하려면 h1Element.parentNode.removeChild(h1Element)를 사용합니다. 이렇게 하면 해당 노드가 DOM 트리에서 제거되어 웹 페이지에 더 이상 표시되지 않습니다. 여러 노드를 삭제해야 할 경우, 노드 리스트를 순회하며 삭제 작업을 수행할 수 있습니다.

📚 실습 및 응용

DOM 조작은 실전에서 다양하게 응용될 수 있습니다. 예를 들어, 사용자 입력에 따라 실시간으로 콘텐츠를 변경하거나, 특정 조건에 따라 요소를 동적으로 추가 및 제거할 수 있습니다. 이러한 기술은 웹 애플리케이션 개발에서 매우 유용하며, 다양한 시나리오에서 사용됩니다. 이번 기회를 통해 DOM 조작의 기본 개념을 확실히 이해하고, 실전에서 이를 효과적으로 활용할 수 있는 능력을 키워보세요.

🔗 공식사이트

Mozilla Developer Network (MDN) - DOM

📖 추천자료

• JavaScript: The Good Parts
• Eloquent JavaScript

🔗 관련 링크

• HTML 소개
• JavaScript 기본

❓ FAQ 섹션

• 질문> DOM이란 무엇인가요?
• 답> DOM은 Document Object Model의 약자로, HTML 문서를 객체 모델로 표현한 것입니다.
• 질문> 노드를 추가하려면 어떻게 해야 하나요?
• 답> createElement 메서드를 사용하여 노드를 생성하고, appendChild를 사용하여 DOM 트리에 추가합니다.
• 질문> 기존 노드를 삭제하려면 어떻게 해야 하나요?
• 답> removeChild 메서드를 사용하여 부모 노드에서 삭제할 노드를 제거합니다.
• 질문> 노드에 속성을 추가하려면 어떻게 해야 하나요?
• 답> setAttribute 메서드를 사용하여 노드에 속성을 설정할 수 있습니다.
• 질문> 텍스트 노드는 어떻게 추가하나요?
• 답> createTextNode 메서드를 사용하여 텍스트 노드를 생성하고, appendChild로 요소에 추가합니다.
• 질문> 여러 노드를 한 번에 삭제할 수 있나요?
• 답> 노드 리스트를 순회하며 각각의 노드를 removeChild로 삭제할 수 있습니다.
• 질문> DOM 조작이 중요한 이유는 무엇인가요?
• 답> DOM 조작을 통해 웹 페이지의 콘텐츠와 구조를 동적으로 관리하여 사용자 경험을 향상시킬 수 있습니다.