# DOM (Document Object Model)이란?
DOM은 HTML 또는 XML 문서의 구조를 프로그래밍적으로 접근할 수 있는 표준 방법입니다.
DOM은 문서의 각 요소를 객체로 만들어서, 객체 구조를 통해 문서의 구조를 표현합니다.
DOM은 문서를 객체 트리로 표현하고, 각 객체에 대한 속성과 메소드를 제공하여 프로그래머가 HTML 또는 XML 문서를 동적으로 수정할 수 있도록 합니다.
# JavaScript로 HTML 요소 조작
JavaScript를 사용하여 DOM을 통해 HTML 요소를 조작할 수 있습니다.
예를 들어, JavaScript를 사용하여 HTML 요소의 텍스트, 스타일, 내용 등을 동적으로 변경할 수 있습니다.
document.getElementById("myHeading").innerHTML = "Hello World!";
document.getElementById("myHeading").style.color = "blue";
document.getElementById("myHeading").style.fontSize = "36px";
이 예제에서는 id가 "myHeading"인 HTML 요소의 내용, 색상, 폰트 크기를 변경합니다.
첫 번째 줄에서는 "myHeading" 요소의 내용을 "Hello World!"로 변경합니다.
두 번째 줄에서는 "myHeading" 요소의 색상을 파란색으로 변경합니다.
세 번째 줄에서는 "myHeading" 요소의 폰트 크기를 36px로 변경합니다.
# DOM 순회
DOM 트리는 부모-자식 관계로 구성됩니다. JavaScript를 사용하여 DOM 트리를 순회하여 HTML 요소를 조작 할 수 있습니다.
예를 들어, 부모 요소의 자식 요소를 모두 순회하여 각 자식 요소에 대한 작업을 수행할 수 있습니다.
var list = document.getElementById("myList").childNodes;
for (var i = 0; i < list.length; i++) {
if (list[i].nodeType === 1) {
list[i].style.backgroundColor = "yellow";
}
}
이 예제에서는 id가 "myList"인 HTML 요소의 모든 자식 요소를 순회하여 각 요소의 배경색을 노란색으로 변경합니다.
# 이벤트 및 이벤트 리스너
JavaScript를 사용하여 HTML 요소에 이벤트를 연결하고, 이벤트가 발생했을 때 수행할 작업을 정의할 수 있습니다.
예를 들어, 버튼을 클릭할 때 어떤 작업을 수행하도록 정의할 수 있습니다.
document.getElementById("myButton").addEventListener("click", function() {
document.getElementById("myHeading").innerHTML = "Hello World!";
});
이 예제에서는 id가 "myButton"인 HTML 요소에 "click" 이벤트 리스너를 연결하여, 버튼을 클릭할 때 "myHeading" 요소의 내용을 "Hello World!"로 변경합니다.
이벤트 종류의 예:
- click: 요소를 클릭할 때 발생하는 이벤트
- mouseover: 마우스가 요소 위로 이동할 때 발생하는 이벤트
- mouseout: 마우스가 요소에서 벗어날 때 발생하는 이벤트
- mousedown: 마우스 버튼을 누를 때 발생하는 이벤트
- mouseup: 마우스 버튼을 떼을 때 발생하는 이벤트
- keydown: 키보드의 키를 누를 때 발생하는 이벤트
- keyup: 키보드의 키를 떼을 때 발생하는 이벤트
- load: 문서가 로드되었을 때 발생하는 이벤트
- unload: 문서가 언로드되었을 때 발생하는 이벤트
- change: 요소의 값이 변경될 때 발생하는 이벤트