javascript DOM

웹 프론트엔드의 기본이라 불리는 DOM을 다시한번 정리해보고자 한다. 이것을 보고 왜 react가 버츄얼 돔을 쓰는지 DOM이란것을 통해서 어떤식으로 HTML을 다루는지 한번 더 공부해보고자 정리하였다.

DOM이란 무엇인가

웹 서비스 개발은 브라우저와 밀접한 관련이 있습니다. 모든 서비스는 사실 웹 브라우저를 바탕으로 실행되며 이 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델(BOM: Browser Object Model)이라고 부릅니다.
이 브라우저 객체 모델(BOM)을 이용해서 Browser와 관련된 기능들을 구성합니다. 브라우저 객체 모델(BOM)의 최상위 객체는 window라는 객체입니다. DOM은 이 window 객체의 하위 객체이기도 합니다.
DOM은 이 BOM 중의 하나이며 Document Object Model의 약어입니다. 또한 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다.

웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 사용합니다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있습니다.

DOM model 형태의 html 에서 문제점은 바로 동적 UI에 최적화되어 있지 않다는 것입니다. HTML은 자체적으로는 정적입니다. 자바스크립트와 같은 언어로 동적으로 활용할 수 있게되어 보다 보기 좋은 사이트들을 만들 수 있게 되었습니다. javascript 에서는 밑의 방식으로 사용할 수 있다.

var paragraphs = document.getElementsByTagName("P");

// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);
// p tag serch => p tag 0번째의 node네임을 alert

javascript 이외에도 DOM 은 여러 언어로도 표현 가능하다

import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");