Document Object Model (DOM) - HTML

DOM이란?

• HTML 문서의 구조적 관계와 속성에 대한 모델
• HTML 문서를 대표하는 트리 구조
• Javascript에서 document 객체를 통해 전역으로 접근할 수 있음
• Javascript 언어의 한 부분이 아니다!

Adding Event Handler

• Event : 어떤 동작의 발생을 전달하기 위해 객체가 보낸 메시지
  • e.g.
    • 웹페이지의 로드
    • 버튼의 클릭
    • 브라우저 창의 resize
  • DOM을 이용해 이벤트 핸들러를 추가할 수 있음
    • onEventName (e.g. onclick)

Creating Element

Javascript way

createButton() {
  var btn = document.createElement("BUTTON");
  var t = document.createTextNode("Click Me!");
  btn.appendChild(t);
  document.body.appendChild(btn);
}

JQUERY way

var $btn = $('');
var $body = $('body')
btn.appendTo($body);

more simply

$('').appendTo('body')