.png)
📙 문서 객체 모델(DOM, Document Object Model)
1. DOM 개요
HTML 혹은 XML의 구조화된 표현을 제공하는 표준 객체 모델이다.
HTML에서는 자바스크립트가 DOM 구조에 접근할 수 있는 방법을 제공하며
이를 통해 문서 구조, 스타일, 내용등을 변경할 수 있다.
Document Node
document 객체를 말하며 DOM 트리에 접근하기 위한 최상위 노드로 모든 DOM 트리에 접근하기 위한 시작점이다.
Element Node
HTML 구성 요소 즉 대표적으로 태그를 의미한다. 문서내 태그들은 모두 Element Node 이다.
각각의 Element Node는 다시 Attribute Node 와 Text Node를 가진다.
Attribute Node
태그들의 속성을 객체화한 노드를 말한다. 만일 특정 태그의 속성에 접근하려면 Attribute Node를 사용해야 한다.
Text Node
태그의 텍스트를 객체화한 노드이다. 자식 노드를 가질 수 없으며 DOM 트리 구조의 최종단 노드이다.
2. HTML 요소 핸들링
자바스크립트에서 HTML DOM 요소에 접근하는 방법은 태그이름, 아이디, 클래스, 이름 등을 이용해 특정 노드 객체를 선택하는 것이다.
HTML 요소선택
document.getElementsByTagName("tag_name")
document.getElementById("id_name")
document.getElementsByClassName("class_name")
document.getElementsByName("name_attribute")모든 getElementsByXXX() 함수의 경우 동일 조건의 모든 노드를 목록으로 가져온다.
HTML 요소 생성, 제거, 추가
document.createElement(element)
document.removeChild(element)
document.appendChild(element)
document.replaceChild(element)
HTML 요소를 선택하는것 이외에도 특정 요소를 생성, 제거 하거나 자식 노드를 추가하는 것도 가능하다.
3. HTML 요소의 속성 핸들링
HTML 요소를 선택한 다음에는 해당 요소의 속성 텍스트 노드에 접근할 수 있다.
HTML 요소의 속성값 변경
element.setAttribute(attribute, value)
element.getAttribute(attribute, value)
element.removeAttribute(attribute)해당 태그의 속성값을 변경할 수 있다. 이 경우 원래 HTML 소스가 바뀌는 것이 아니라 동적으로 내용만 변경되고 브라우저에 반영된다.
HTML 이벤트핸들러 추가
document.getElementById("id_name").onclick = function(){ code };해당 요소의 이벤트를 처리하는 방법으로 콜백 함수를 할당하는 형식으로 이벤트 핸들러를 추가할 수 있다.
addEvenHandler()를 이용한 이벤트 핸들러 추가
document.getElementById("id_name").addEventHandler("click", function(){ code });이벤트 요소를 추가하기 위한 가장 구조적인 방법이다.
📘 이벤트(Event) ?
일반적으로 프로그래밍 언어에서 이벤트라고 하면 사용자의 동작 혹은 프로그램에서 발생하는 특정한 상황을 의미 한다. 이벤트가 발생하면 사전에 정의된 특정 코드가 실행되고 그에 따라 기능이 동작하거나 화면이 변경되는 등의 변화가 발생 한다.
1. HTML 이벤트
HTML에서 발생하는 이벤트는 주로 마우스 및 입력양식에서 발생하며 문서의 로딩과 관련한 특변한 이벤트를 포함한다. 다음은 대표적인 이벤트 목록이다.
2. 이벤트 핸들러
이벤트 핸들러는 이벤트발생을 감지하고 처리할 코드를 수행하는 역할을 담당한다.
HTML 태그의 속성으로 지정하거나 자바스크립트에서 DOM엘리먼트의 속성에 콜백 함수를 정의하는 형식으로 사용할 수 있다. 이벤트 핸들러는 앞의 이벤트 이름 앞에 on을 붙여 사용한다.
HTML 속성으로 정의
<input type="button" value="Button" onclick="alert('버튼 클릭됨!!')"></input>onclick 속성에 자바스크립트 코드를 직접 작성하거나 이벤트 처리를 위해 구현한 함수를 호출한다.
자바스크립트에서 정의
자바스크립트 코드를 사용해 DOM 엘리먼트 즉, 특정 HTML 태그를 선택해 속성으로 이벤트 발생시 호출될 콜백 메소드를 정의하는 형식이다.
<script>
document.getElementById('b1').onclick = function() {alert("버튼 클릭됨!!")}
</script>
<body>
<input type="button" id="b1">
</body>