반응형
DOM(Document Object Model)은 HTML, XML 문서의 구조화된 표현을 제공하는 프로그래밍 인터페이스입니다. DOM은 문서의 구조를 트리 구조로 표현하며, 개발자가 이 구조에 접근하고 변경할 수 있도록 합니다. 이를 통해 웹 페이지의 콘텐츠, 구조 및 스타일을 동적으로 조작할 수 있습니다.
DOM의 주요 특징
- 트리 구조: 문서의 각 요소는 노드로 표현되며, 이 노드들이 계층적으로 배열됩니다. 트리 구조의 최상위 노드는 문서 자체를 나타내는
document객체입니다. - 노드 종류: 주요 노드 유형에는 요소 노드, 속성 노드, 텍스트 노드 등이 있습니다. 예를 들어,
<div>태그는 요소 노드이고, 그 안의 텍스트는 텍스트 노드입니다. - 조작: JavaScript를 사용하여 DOM 요소를 쉽게 추가, 수정, 삭제할 수 있습니다. 이를 통해 사용자는 동적으로 웹 페이지의 내용을 변경할 수 있습니다.
예시
다음은 JavaScript를 사용하여 DOM을 조작하는 간단한 예시입니다.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>DOM 예제</title>
</head>
<body>
<div id="content">안녕하세요!</div>
<button id="changeText">텍스트 변경</button>
<script src="script.js"></script>
</body>
</html>JavaScript (script.js):
document.getElementById("changeText").addEventListener("click", function() {
document.getElementById("content").innerText = "안녕하세요, DOM!";
});위의 예시에서 changeText 버튼을 클릭하면 content라는 ID를 가진 div 요소의 텍스트가 변경됩니다. 이는 DOM을 통해 HTML 요소를 동적으로 변경하는 기본적인 방법을 보여줍니다.
반응형
'🖥️ IT, 컴퓨터 > 👩🏻💻 IT' 카테고리의 다른 글
| [DBMS] DuckDB (0) | 2024.07.30 |
|---|---|
| [IT] React란? (0) | 2024.07.29 |
| [Windows 11] 마이크로소프트 팀즈 Teams 시작 시 안 켜지게 끄기 (0) | 2024.07.26 |
| [IT] 윈도우 PC <-> 갤럭시폰 파일 옮기기 / 카카오톡 나에게 보내기 대체 / 삼성 flow / 삼성판 에어드롭 (0) | 2024.07.18 |
| [작업 일지] 워드클라우드 제작 시 주의점 (0) | 2024.07.16 |
댓글