본문으로 건너뛰기

DOM과 이벤트 처리

DOM (Document Object Model)​

DOM은 웹 페이지의 HTML 문서를 계층적인 트리(tree) 형태의 객체로 표현하는 프로그래밍 인터페이스입니다. 이를 통해 자바스크립트를 이용하여 웹 페이지의 내용, 구조, 스타일을 동적으로 변경할 수 있습니다.

DOM의 개념​

  • 정의: HTML 문서를 계층적인 구조의 트리(tree) 형태의 객체로 표현한 것입니다. 브라우저는 웹 페이지를 로드할 때 해당 문서에 대한 DOM을 생성합니다.
  • 노드(Node): DOM 트리를 구성하는 기본적인 단위로, 문서 안에 들어 있는 요소나 텍스트를 나타냅니다. 노드 간에는 부모, 자식, 형제 관계가 존재합니다.
  • DOM 트리 시각화: 웹 브라우저의 개발자 도구를 통해 DOM 트리의 계층적 구조를 확인할 수 있습니다 (예: 오페라에서 '요소 검사'를 통해 확인).
  • DOM 처리: 자바스크립트를 활용하여 DOM 트리를 순회하며 페이지 내 요소의 내용, 속성, CSS 스타일을 변경할 수 있습니다.

DOM과 BOM (Browser Object Model)의 관계​

  • DOM (Document Object Model): HTML 문서를 객체로 표현한 것입니다. document 객체를 통해 HTML 요소에 접근합니다.
  • BOM (Browser Object Model): 웹 브라우저를 객체로 표현한 것입니다. window 객체를 최상위로 하여 location, history, screen, frames, navigator 등의 브라우저 관련 객체들을 포함합니다.
  • 계층 구조: BOM의 최상위 객체인 window 객체 안에 document 객체(DOM)가 포함되는 구조입니다. 즉, 문서 객체 모델은 브라우저 객체 모델의 자식 객체입니다.

노드의 종류​

DOM 트리에는 다양한 종류의 노드가 존재합니다:

  • DOCUMENT_NODE: DOM 트리의 루트 노드이며, HTML 문서를 나타냅니다. 일반적으로 window.document로 접근하며, window는 생략하고 document로 자주 사용됩니다.
  • ELEMENT_NODE: <body>, <a>, <p>, <h1> 등 HTML 요소를 나타내는 노드입니다.
  • ATTRIBUTE_NODE: class='myClass'와 같이 속성을 나타내는 노드입니다.
  • TEXT_NODE: 요소 안에 들어 있는 텍스트를 나타내는 노드입니다.

HTML 요소 선택 방법​

자바스크립트를 사용하여 특정 HTML 요소를 선택하는 여러 방법이 있습니다:

  • ID로 HTML 요소 선택: document.getElementById("id명") 메서드를 사용합니다. 가장 쉽고 흔히 사용되는 방법이며, 해당 ID를 가진 요소를 객체 형태로 반환합니다. 요소가 발견되지 않으면 null을 반환합니다.
    • 예시: alert(document.getElementById("main").innerHTML);
  • 입력 양식으로 HTML 요소 선택: <form> 요소의 name 속성을 이용하거나, document.form[index].element[index]와 같은 배열 형태로 접근합니다.
    • 예시: var obj = document.myform.text1;
  • 태그 이름으로 HTML 요소 선택: document.getElementsByTagName("태그명") 메서드를 사용합니다. 해당 태그를 사용하는 모든 요소를 배열에 넣어 반환합니다.
    • 예시: var eleArray = document.getElementsByTagName("div");
  • DOM 트리 순회: childNodes[], nextSibling[], parentNode[] 등의 속성을 이용하여 노드 간의 관계를 통해 요소를 방문합니다.
    • childNodes: 한 요소의 자식 요소들을 배열로 반환합니다.
    • firstChild: childNodes 배열의 첫 번째 자식 노드를 반환합니다.
    • lastChild: childNodes 배열의 마지막 자식 노드를 반환합니다.
    • parentNode: 현재 노드의 부모 노드를 반환합니다.
    • nextSibling: 현재 노드의 다음 형제 노드를 반환합니다.
    • previousSibling: 현재 노드의 이전 형제 노드를 반환합니다.

HTML 요소 수정​

자바스크립트를 이용하여 DOM을 동적으로 수정할 수 있습니다.

  • 요소의 내용 수정: innerHTML 속성을 이용하며, 요소의 시작 태그와 종료 태그 사이에 놓인 모든 HTML 코드와 텍스트를 변경합니다.
    • 예시: document.getElementById("main").innerHTML = "<b>한양사이버대</b>";
  • 요소의 속성 수정: 특정 속성에 직접 값을 할당하여 변경합니다.
    • 예시: document.getElementById("image").src = "poodle.png";
  • 요소의 스타일 수정: style 속성을 통해 CSS 스타일을 변경합니다.
    • 예시: document.getElementById("p2").style.color = "blue";
    • 예시: document.getElementById('ex').style.visibility = 'hidden'; (요소 숨기기)

HTML 요소 생성​

  • HTML 요소 생성: document.createTextNode() 또는 document.createElement() 등으로 원하는 노드를 생성합니다.
  • 추가할 위치(부모 노드) 찾기: document.getElementById() 등을 이용해 추가할 위치(부모 노드)를 찾습니다.
  • 새로운 노드를 기존 노드에 연결: appendChild() 메서드를 이용해 새로운 노드를 기존 노드에 연결합니다.
    • 예시: var node = document.createTextNode("동적으로 추가된 노드"); parent.appendChild(node);

HTML 요소 삭제​

  • 삭제할 요소 선택: document.getElementById("id") 함수를 이용하여 삭제할 요소를 선택합니다.
  • 선택된 요소의 부모 노드 찾기: 선택된 요소의 부모 노드를 찾습니다.
  • 요소 삭제: parent.removeChild(child) 메서드를 이용하여 요소를 삭제합니다.
    • 예시: parent.removeChild(child);

BOM (Browser Object Model) 및 이벤트​

BOM은 웹 브라우저 자체와 관련된 객체 모델이며, 이벤트 처리는 사용자 상호작용에 응답하는 메커니즘입니다.

브라우저 객체 모델 (BOM)​

  • 정의: "웹 브라우저가 가지고 있는 모든 객체를 트리 형태로 표현한 것"입니다.
  • window 객체: BOM의 "최상위 객체"로, 웹 브라우저의 윈도우를 나타냅니다. 모든 전역 자바스크립트 객체, 함수, 변수는 자동으로 window 객체의 멤버가 됩니다. 일반적으로 window를 생략하고 사용합니다 (예: alert() 대신 window.alert()).
  • 주요 메서드:
    • open(): 새로운 윈도우 열기
    • close(): 윈도우 닫기
    • setTimeout(): 일정한 시간(밀리초 단위)이 지난 후 인수로 전달된 함수를 한 번 호출합니다.
    • setInterval(): 일정한 시간마다 주기적으로 함수를 호출합니다 (사용자가 종료시켜야 함).
    • moveTo(), moveBy(): 윈도우를 절대적/상대적 위치로 이동시킵니다.
    • resizeTo(), resizeBy(): 윈도우의 크기를 변경합니다.
    • focus(): 특정 윈도우로 키보드 포커스를 이동시킵니다.
    • scrollTo(), scrollBy(): 윈도우 스크롤 위치를 이동시킵니다.
  • screen 객체: window 객체 안에 있는 화면 객체로, 사용자 화면에 대한 정보를 제공합니다.
    • 주요 속성: availableHeight, availableWidth, colorDepth, pixelDepth, height, width 등.
  • location 객체: 현재 URL에 대한 정보를 가지고 있습니다.
    • 주요 속성: hash, host, hostname, href, pathname, port, protocol, search 등.
    • 주요 메서드: assign() (새 문서 로드), reload() (현재 문서 다시 로드), replace

이벤트 처리​

이벤트(Event)의 정의: "웹 페이지에서 상호작용이 일어날 때 생성되는 메시지(시그널)"입니다. 사용자 동작(마우스 클릭, 키보드 입력)이나 브라우저 동작(페이지 로딩)에 의해 발생하며, 등록된 함수(이벤트 핸들러)를 실행시켜 웹 페이지에 변화를 일으킵니다.

주요 이벤트 종류​

  • onclick 이벤트: "사용자가 요소를 클릭했을 때 미리 정해 놓은 함수를 실행시킵니다."
    • 예시: <h1 onclick="change()">
  • onload와 onunload 이벤트: "브라우저가 웹 문서를 로드했을 때와 언로드했을 때 발생합니다."
    • 예시: <body onload="onLoadDoc();">
  • onchange 이벤트: "요소의 내용이나 상태가 변할 때 발생합니다." 입력 필드 검증 시 자주 사용됩니다.
    • 예시: <input type="text" id="name" onchange="sub()">
  • onmouseover, onmouseout 이벤트: "사용자가 HTML 요소 위에 마우스를 올리거나 요소를 떠날 때 발생합니다." (호버링 효과에 사용)
    • 예시: <div onmouseover="MouseIn(this)" onmouseout="MouseOut(this)">
  • onmousedown, onmouseup, onclick 이벤트:
    • onmousedown: 마우스 버튼을 누르는 순간 발생.
    • onmouseup: 마우스 버튼을 떼는 순간 발생.
    • onclick: 마우스 버튼 클릭(누르고 떼는 동작 완료) 시 발생.
    • 예시: <button onmousedown="BtnDown(this)" onmouseup="BtnUp(this)">