항해 99 Day 21 - DOM, Serverless

항해 99 Day 21 - DOM, Serverless

문서 객체 모델(DOM - Document Object Model)이란?

문서 객체 모델은 우리가 HTML 문서에 접근하기 위한 일종의 인터페이스(interface)입니다.

쉽게 설명해서 이나 와 같은 html문서의 태그들을 Javascript로 사용하거나 수정할 수 있도록

객체(object)로 만든 것을 문서 객체라고 합니다.

즉, DOM은 인터넷 브라우저가 html을 인식할 수 있는 모습으로 보여주는 것입니다.

DOM Tree

HTML도 태그와의 관계에서 부모와 자식의 관계가 있듯이, DOM도 자식과 부모의 관계가 있습니다. 이를 나무에 비유해서

DOM Tree라고 부릅니다.

우리가 HTML에서 태그를 요소라고 부르듯이 DOM에서는 이를 node라고 부르고 각 node와의 관계를 마찬가지로

부모 node와 자식 node 그리고 같은 위치의 node는 형제 node라고 부르며 최상단의 html태그는 root(node)라고 부릅니다.

나중에 각 node에 접근하여 속성을 가져오거나 변화시키시 위해서는 각 node와의 관계를 잘 이해하는 것이 중요합니다.

HTML 요소와는 다르게 DOM의 node는 2가지의 타입을 가지고 있는데요.

하나는 요소노드(Element Node)와 다른 하나는 텍스트노드 (Text Node)라고 합니다.

(위 그림에서 ,과 같은 태그들은 요소노드, "my link" , "my title"이라고 텍스가 적혀있는 것을 텍스트 노드라고 합니다.

또한 텍스트노드 또한 요소 노드의 자식이기도 합니다. 텍스트 노드는 다른 자식노드를 가질 수 없어 잎사귀에 비유해 leaf node 라고도 합니다.)

DOM의 사용방법

우리는 어떻게 하면 DOM을 활용할 수 있을까? HTML은 정적인 문서입니다. 한번 작성하면 스스로 변화지 않고

저희가 필요할 때 마다 수정을 해야하죠.

이때, 저희는 Javascript를 활용하죠. Javascript를 활용해서 HTML에 접근할 때 DOM을 사용하게 됩니다.

DOM에 접근하여 HTML 요소들을 건드리기 위해 과 를 만들고, 스크립트를 통해 DOM의 document 객체에

title이라는 클래스를 가지고 있는 요소노드를 찾았습니다. 이것을 우리는 title이라는 이름을 붙여줍시다.

title이 어떤 내용을 가지고 있는지 한번 살펴봅시다.

콘솔을 찍어보니 여러 내용들이 나오네요.

그중에서 childNodes를 보면 1개의 자식 노드를 가지고 있고, 그것은 텍스트라고 알려주기도 합니다.

그러면 이제 저희 이걸 수정해보도록 합시다.

이런식으로 우리는 DOM의 각각의 노드에 접근하여 HTML을 원하는대로 수정하거나 추가 또는 제거할 수도 있습니다.

from http://dev-kobe.tistory.com/16 by ccl(A) rewrite - 2021-11-22 00:00:43