👉 DOM이란?
- Document Object Model의 줄인말로, HTML이나 XML 문서를 다루기 위한 수단(API)
- DOM은 웹 페이지를 구성하는 문서(document)를 객체(object)로 표현한 모델(model)
- 웹 페이지의 HTML과 XML 문서를 프로그래밍 언어가 이해하고 조작할 수 있는 구조로 만든 것
- 페이지의 구조, 스타일, 내용을 동적으로 변경할 수 있게 해 줌
- 객체 모델에 접근하여 변경할 수 있음
- DOM은 웹 표준의 일부로, W3C(World Wide Web Consortium)에 의해 관리됨
- DOM은 웹 페이지를 프로그램이 이해하고 조작할 수 있는 형태로 만들어 주는 중요한 역할
- JavaScript 뿐만 아니라 다양한 프로그래밍 언어와 호환
- DOM이 표준 인터페이스를 제공하기 때문에 가능
- DOM이 표준 인터페이스를 제공하기 때문에 가능
👉 DOM의 계층 구조
- DOM은 웹 페이지를 나무(Tree) 구조로 표현한 것으로 볼 수 있음
- 이 나무의 각 가지(branch)는 웹 페이지의 일부를 나타내는 객체로 HTML이나 XML 문서의 태그와 속성을 객체의 형태로 표현
- 예를 들어, HTML 문서의
<body>, <div>, <p>와 같은 다양한 태그들을 객체처럼 다룰 수 있음- JavaScript를 사용하여 특정
<p>태그의 텍스트를 변경 <div>를 새로 추가<body>의 배경색을 바꾸는 등의 작업을 할 수 있음
- JavaScript를 사용하여 특정
- 문서의 최상위 요소를 루트로 하고, 하위 요소들이 나무처럼 갈라지는 구조인데, DOM 트리라고도 부름
- 트리 구조의 가지 끝 부분을 노트라고 부름
- 노드를 방문함으로써 목적한 데이터에 접근하고 참조나 편집을 수행
👉 DOM을 조작하는 예시
- 요소의 내용 변경하기
<!DOCTYPE html> <html> <head> <title>DOM 예시</title> </head> <body> <h1 id="header">원래 제목</h1> <button onclick="changeTitle()">제목 변경하기</button> <script> function changeTitle() { document.getElementById('header').innerHTML = '새로운 제목'; } </script> </body> </html>- HTML 문서에 있는 특정 요소의 내용을 변경할 때,
getElementById메서드를 사용하여 해당 요소를 선택하고,innerHTML속성을 사용하여 내용을 변경할 수 있음
- HTML 문서에 있는 특정 요소의 내용을 변경할 때,
- 요소 스타일 변경하기
<!DOCTYPE html> <html> <head> <title>스타일 변경 예시</title> </head> <body> <p id="paragraph">문단의 색상을 변경하기</p> <button onclick="changeColor()">색상 변경하기</button> <script> function changeColor() { document.getElementById('paragraph').style.color = 'blue'; } </script> </body> </html>- style 속성을 사용하여 특정 요소의 스타일을 동적으로 변경
- 버튼 클릭 시, changeColor 함수가 호출되어, id가 paragraph인
<p>요소의 텍스트 색상을 파란색으로 변경
- 요소 추가 및 삭제하기
<!DOCTYPE html> <html> <head> <title>요소 추가 및 삭제 예시</title> </head> <body> <ul id="list"> <li>항목 1</li> <li>항목 2</li> </ul> <button onclick="addItem()">항목 추가하기</button> <button onclick="removeItem()">마지막 항목 삭제하기</button> <script> function addItem() { var li = document.createElement('li'); li.textContent = '새 항목'; document.getElementById('list').appendChild(li); } function removeItem() { var list = document.getElementById('list'); if (list.children.length > 0) { list.removeChild(list.lastChild); } } </script> </body> </html>- 자바스크립트와 DOM을 사용하여 동적으로 요소를 문서에 추가하거나 기존 요소를 삭제할 수 있음
- "항목 추가하기" 버튼을 클릭하면
<ul>목록에 새<li>요소가 추가되고, "마지막 항목 삭제하기" 버튼을 클릭하면 목록에서 마지막<li>요소가 삭제됨
끝없이 성장하고자 하는 백엔드 개발자입니다.