모든 웹페이지는 DOM에서 빌드된다.

  • Document Object Model
  • 트리 같은 구조
  • 모든 노드는 1개의 부모와 여러 자식을 가짐
  • 노드는 properties, methods, events 를 가짐
Sample Document

The DOM and JavaScript

  • page content는 DOM에 의해 표현된다.
  • 스크립트 언어 (javascript)는 document와 소통하기 위해 DOM을 사용

어떻게 동작하나?

  • DOM에 접근하는 것은 API로 된다.
    • 브라우저, 스크립트 언어와 상관없이 API는 같다.

The DOM objects/elements

  • document – page의 root
    • document.URI, document.height, document.links …
  • element – 트리 안에 node
    • API의 멤버로 return 된다.
  • nodeList – element의 그룹
    • document.getElementByTagName(‘p’) : node 집합을 return
  • attribute
    • DOM에 있는 node, 이렇게 쓰는 경우는 드물다.
    • document를 조정하거나 변경하는 다른 방법

Specifics APIs

  • document.getElementById(id)
  • document.getElementByClassName(class)
  • element.innerHTML
  • element.style
  • element.setAttribute(attribute, value)
  • element.removeAttribute(attribute)

Review

  • javascript를 더 배울때 마다 API를 사용할 것
  • 중요한 부분은 인터넷에 정보를 검색하게 편하게 느끼게 한다는 것

공부 위치 – https://www.coursera.org/learn/javascript/lecture/16Cu2/dom-review-with-object-oriented-programming