#7. JavaScript 및 DOM(문서 개체 모델)

 

# 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: 요소의 값이 변경될 때 발생하는 이벤트