[JS] DOM(Document Object Model) 조작

DOM(Document Object Model)은 웹 페이지의 내용을 트리 형태로 표현하는 문서 객체 모델로, HTML, XML 또는 XHTML 문서의 구조와 콘텐츠에 접근하고 조작하는 기능을 제공합니다. 웹 브라우저는 HTML 문서를 로드하면서 DOM을 생성하고, 이를 통해 웹 페이지의 내용과 구조에 동적으로 접근하고 변경할 수 있습니다. DOM을 조작하여 웹 페이지를 동적으로 제어하는 방법에 대해 알아보겠습니다.

---

DOM 요소 선택하기

DOM 요소를 선택하는 것은 해당 요소에 접근하여 조작하는 기본 단계입니다. 다양한 선택자를 사용하여 요소를 선택할 수 있습니다.

ID 선택자

<div id="myDiv">This is a div element.</div>

let myDiv = document.getElementById('myDiv');

클래스 선택자

<p class="highlight">This is a paragraph.</p>

let highlightedParas = document.getElementsByClassName('highlight');

태그 선택자

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

let listItems = document.getElementsByTagName('li');

쿼리 선택자

<div class="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

let paragraphs = document.querySelectorAll('.container p');

---

DOM 요소 변경하기

선택한 DOM 요소의 내용이나 속성을 변경하여 웹 페이지를 동적으로 조작할 수 있습니다.

<div id="myDiv">This is a div element.</div>

let myDiv = document.getElementById('myDiv');
myDiv.textContent = 'Updated content'; // 내용 변경
myDiv.style.color = 'blue'; // 스타일 변경
myDiv.setAttribute('class', 'highlight'); // 속성 변경

---

DOM 이벤트 처리하기

DOM 요소에 이벤트 리스너를 추가하여 사용자의 동작에 응답하거나 웹 페이지의 상호작용을 구현할 수 있습니다.

<button id="myBtn">Click me</button>

let myBtn = document.getElementById('myBtn');

function handleClick() {
    console.log('Button clicked!');
}

myBtn.addEventListener('click', handleClick);

---

DOM 요소 생성 및 추가하기

자바스크립트를 사용하여 새로운 DOM 요소를 생성하고, 기존의 요소에 추가할 수 있습니다.

let newDiv = document.createElement('div');
newDiv.textContent = 'New div element';

let container = document.getElementById('container');
container.appendChild(newDiv); // 새로운 div 요소를 container에 추가

---

DOM(Document Object Model)을 조작하여 웹 페이지의 내용과 구조를 동적으로 제어할 수 있습니다. DOM 요소를 선택하고, 변경하고, 이벤트를 처리하는 방법을 활용하여 웹 페이지에 인터랙티브한 기능을 추가하고 사용자와 상호작용하는 웹 애플리케이션을 개발할 수 있습니다. 웹 프론트엔드 개발에서 DOM 조작은 필수적인 기술이며, 이를 잘 활용하여 사용자에게 좋은 사용자 경험을 제공하는 웹 페이지를 구현해보세요!