DOM - JavaScript

HTML DOM은 객체(Object)들의 트리(tree)로 구성되어 있고, Document 객체를 포함하고 있습니다. Document 객체는 자식 노드로 HTML 객체를 포함하고 있습니다.

DOM(Document Object Model)은 Document에서 element를 만들거나, 변경하거나, 제거할 수 있다고 하였고, 그 과정에서 Document는 HTML elements를 선택하고, 제어할 수 있도록 메소드를 제공한다고 하였습니다. 그럼 이 메소드들은 어떤 방법으로 사용할 수 있을까요? 여기서 사용되는 것이 바로 JavaScript 입니다.

DOM은 HTML/CSS와 JavaScript를 이어주는 역할을 합니다. JavaScript를 사용하면 Document element에 접근하고 선택 및 변경할 수 있습니다.

JavaScript를 사용하여 DOM에서 작업할 수 있는 몇 가지 예를 살펴보겠습니다.

HTML elements 선택

HTML 요소를 선택하기 위해 제공되는 메소드는 다음과 같습니다.

메소드	설명
document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택함.
document.getElementById(아이디)	해당 아이디의 요소를 선택함.
document.getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선택함.
document.getElementsByName(name 속성값)	해당 name 속성값을 가지는 요소를 모두 선택함.
document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택함.

HTML elements 생성

새로운 HTML 요소를 생성하기 위해 제공되는 메소드는 다음과 같습니다.

메소드	설명
document.createElement(HTML요소)	지정된 HTML 요소를 생성함.
document.write(텍스트)	HTML 출력 스트림을 통해 텍스트를 출력함.

HTML 이벤트 핸들러 추가

HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 메소드는 다음과 같습니다.

메소드	설명
document.getElementById(아이디).onclick = function(){       실행할 코드 }	마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함.