42page

the Document Object Model

September 17th 2018

Contents

  • DOM-이란?
  • DOM-형성과정
  • DOM-Element-선택하기
  • Node란?
  • Element-Interface

DOM-이란?

D.O.M.(Document Object Model)이란 HTML의 컨텐츠 및 속성을 트리 구조화 한 객체 모델입니다. 우리는 자바스크립트와 DOM을 이용해 여러 작업을 할 수 있습니다. 웹페이지에 요소를 추가하거나, 배경 사진을 바꾸고, 요소의 속성을 변경할 수도 있습니다.

DOM-형성과정

dom1

  1. 브라우저가 HTML 파일의 byte를 읽고, 이것을 character로 변환합니다.
  2. 이후 Tokenization이라는 과정을 거칩니다. 이 과정에서 character를 하나씩 읽고, token을 생성합니다. Token은 DOCTYPE, start tag, end tag, comment, character, end-of-file이 있습니다.
  3. token을 트리 구조로 설계합니다. HTML은 어떠한 tag는 다른 tag 안쪽에 있어 트리 구조 (부모/자식)로 표현이 가능합니다.

DOM-Element-선택하기

  1. document.getElementById('id명') : id 이름으로 html 요소를 선택할 수 있음.
  2. document.getElementsByClassName('class명') : class명에 해당하는 모든 요소를 선택할 수 있음. array-like data structure를 반환함.
  3. document.getElementsByTagName('tag명') : tag명에 해당하는 모든 요소를 선택할 수 있음. array-like data structure를 반환함.
  4. document.querySelector('css 선택자') : css selector에 해당하는 첫 번째 요소를 선택함.
  5. document.querySelectorAll('css 선택자') : css selector에 해당하는 모든 요소를 선택함. Node list를 반환함.

interface 정의

컴퓨터 공학적 interface는 UI 또는 GUI와는 관련이 없습니다. interface는 property와 methods의 리스트를 의미합니다.

Node란?

Node란(대문자 N) DOM API object types이 property와 method를 상속받는 interface입니다. 바꿔말하면, 여러 속성과 method의 blueprint와 같습니다. node(소문자)가 생성되면, Node가 가지고 있는 여러 property와 method를 상속받기 때문에 동일하게 사용할 수 있습니다.

Element-Interface

Node Interface와 마찬가지로, Element Interface는 element를 생성하는 데 필요한 blueprint와 같습니다. 한 가지 중요한 사실은 Element Interface 또한 Node Interface를 상속받는다는 것입니다. 즉, 모든 element또한 node가 된다는 뜻입니다.

© Chanwhe Kim 2019

Handmade with .