[JS/브라우저] DOM

DOM:

Document Object Model의 약자로, 웹 페이지에 대한 인터페이스이다.
기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공하며
HTML 요소를 Object(JavaScript Object)처럼
조작(Manipulation)할 수 있는 Model, JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다.

DOM은 어떻게 생성될까?

DOM의 개체 구조는 “노드 트리”로 표현.
하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조

DOM으로 HTML 조작하기

DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.
document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제(DELETE) 할 수 있다.
DOM에는 HTML에 적용(APPEND)하는 메소드도 있어서 이 메소드를 통해 조작이 가능.

createElement - CREATE
querySelector, querySelectorAll - READ
textContent, id, classList, setAttribute - UPDATE
remove, removeChild, innerHTML = "" , textContent = "" - DELETE
appendChild - APPEND

DOM event객체

event객체 예제

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    console.log(event.type); //click
};

btn.addEventListener("click", function(event){
    console.log(event.type); //click
}, false);

DOM 표준을 준수하는 브라우저에서 이벤트 핸들러에 전달되는 매개변수는 event객체 하나뿐,
DOM레벨과 상관없이 event객체가 전달되며 event객체에는 생성에 관여한 이벤트와 관련된 프로퍼티 및 메서드가 포함.

event객체에서 공통적으로 사용하는 이벤트