자바스크립트는 어떻게 HTML을 조작하는 것일까? (feat. DOM)

자바스크립트의 가장 중요한 역할 중 하나는 HTML 문서를 조작하는 것이다.

 

그래 그건 알겠어. 그런데 정확히 어떻게 조작해? 이것에 대해서 의문점을 가져본적이 없다.

 

그냥 <script> 태그 써서 요소를 불러왔지.

 

(이 글은 계속 업데이트 될 예정이니 내용이 빈약하더라도..걱정 말아라)

 

MDN 문서를 살펴보니, 어떻게 조작하는지를 알려면 DOM의 개념을 이해해야 한다고 한다. 

한번 살펴보자.

Introduction to the DOM

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.

-> DOM 일단 그자체에서 유추해보자. 뜻 그대로... 문서 객체 모델... 문서를 객체 형식으로 정의한 모델이 아닐까?

 

DOM 은 웹문서의 구조와 내용이 담긴 객체를 데이터로 표현하는 방식이래. 

 

음...그니까 document는 header도 있고, body도 있고... 이렇게 나눠지는것을 의미하는거 아닐까?

 

아 그림을 보니까 조금 이해가 가네. 여기서 말하는 웹 문서의 구조는 head body 이런식으로 구성된것을 말하고

내용은 Text에 해당하는것을 의미하겠군. 

 

 What is the DOM?

The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content.

DOM은 웹 문서를 위한 프로그래밍 인터페이스래. 인터페이스는 사람과 기계가 소통하기 위한 수단정도로 보면 되니까

DOM을 통해서 프로그램들이 웹 문서의 구조, 스타일, 그리고 내용을 바꾼다.

아 그니까 기계는 <p> </p> 이런 태그들을 인식을 못하지. 인간이 쓰기 편하게 해논거니까.

그래서 기계가 이해하려면 기계들만의 언어로 바꾼다음에 기계를 이해시키고, 그 다음 내용을 조작할 수 있겠네

   

근데 어떻게 바꿔? 거기서 DOM이 어떤 도움을 주는건데? 

 

 

The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

 

-> DOM은 문서를 노드와 객체들로 표현한다. 이렇게 표현하면 프로그램 언어가 페이지를 수정할 수 있데!

     아 맞지. 이제 알겠다. 태그들을 인식을 못하니까 object 형식으로 정의해주면 얘네들이 이해를 할 수 있구나.

 

A web page is a document that can be either displayed in the browser window or as the HTML source.

 

웹 페이지는 브라우저 창 혹은 html 그 자체로 보여질 수 있다.

그치... 우리가 웹 페이지를 브라우저에서도 열수 있고, 그냥 파일로도 볼 수 있으니까.  

 

In both cases, it is the same document but the Document Object Model (DOM) representation allows it to be manipulated.

 

두가지 경우 모두, 문서이지만, DOM 표현법은 문서를 조작할 수 있게 한다.

 

As an object-oriented representation of the web page, it can be modified with a scripting language such as JavaScript.

객체 지향 웹페이지 표현법으로, 자바스크립트 같은 scripting 언어로 수정이 가능하다

그치. 이제 객체 형태로 나타냈으니까 수정이 가능하겠지.

 

 

내가 지금까지 이해한걸로 DOM을 한마디로 정의 내려보겠다.

 

DOM 이란 '인간과 컴퓨터간의 의사소통을 도와주는 번역기'이다.

 

왜냐하면 DOM은 컴퓨터가 html 문서를 이해하고 수정할 수 있게 도와주기 때문이다.

 

cf) 어떤이는 브라우저가 HTML 코드를 해석해서 요소들을 트리 형태로 구조화하여 표현하는 문서(데이터)를 생성한것 이라고 표현했다.

 

참고: MDN

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction