[JavaScript] DOM이란?

최종 프로젝트를 앞두고 있는 시점에서 React와 같은 기술을 새로 공부하기 보다는 기존에 JavaScript에서 모호하게 가지고 있던 개념을 조금 더 확실하게 하는 편이 좋을 듯 싶어 공식문서 참고 및 번역은 JavaScript에 관련된 것으로 할 예정이다. 

 

 

** 직접 독해한 내용

 

- 문서 객체 모델(Document Object Model)은 메모리에있는 문서구조를 representing함으로 스크립트와 프로그래밍 언어를 웹페이지와 연결시켜줍니다(마치 HTML을 웹페이지에 representing하듯이). 일반적으로 자바스크립트에는 모델링 HTML과 SVG 혹은 XML 문서를 객체로 제공하지만 그것은 자바스크립트 언어의 핵심 기능이 아닙니다.

DOM은 문서를 로직트리에 맞게 represent합니다(트리 구조라는 걸 설명하는 듯). 각 트리의 분기점(브랜치)은 노드에서 끝나고 각 노드는 객체를 포함합니다. DOM메서드는 트리에 프로그래밍적인 접근을 허용합니다. 더불어 당신은 문서구조 스타일, 내용을 바꿀 수도 있습니다.

(여기서 문서는 HTML을? 말하는 듯하다)

각 노드는 이벤트 핸들러를 가질 수 있습니다.  처음 이벤트가 발생하게 되면, 이벤트 핸들러가 실행됩니다.

(기존에 내가 알고 있던 지식과 같다. addEventListenter를 등록해놓으면 그 자체로 실행되는 것이 아닌 해당 객체에 이벤트가 발생했을 때 리스너가 생성하고 동작하는 식의 원리)

 

 

** MDN Korea 커뮤니티에서 독해해서 올려놓은 내용

 

번역 : 문서 객체 모델(DOM)은 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결합니다. 이때 스크립트는 주로 JavaScript를 의미하나 HTML, SVG, XML 객체를 문서로 모델링 하는 것은 JavaScript 언어의 일부가 아닙니다.

DOM은 문서를 논리 트리로 표현합니다. 트리의 각 브랜치는 노드에서 끝나며, 각 노드는 객체를 갖습니다. DOM 메서드를 사용하면 프로그래밍적으로 트리에 접근할 수 있습니다. 이를 통해 문서의 구조, 스타일, 콘텐츠를 변경할 수 있습니다.

 

노드는 이벤트 처리기도 포함할 수 있습니다. 이벤트가 발생한 순간, 해당 이벤트와 연결한 처리기가 발동합니다.

 

 

** 구글 번역기

 

문서 개체 모델(DOM)은 웹 페이지를 나타내는 HTML과 같은 문서의 구조를 메모리에 표시하여 웹 페이지를 스크립트 또는 프로그래밍 언어에 연결합니다. HTML, SVG 또는 XML 문서를 개체로 모델링하는 것이 핵심 JavaScript 언어의 일부가 아니지만 일반적으로 JavaScript를 나타냅니다.

DOM은 논리적 트리가 있는 문서를 나타냅니다. 트리의 각 분기는 노드에서 끝나고 각 노드에는 개체가 포함됩니다. DOM 메서드를 사용하면 트리에 프로그래밍 방식으로 액세스할 수 있습니다. 이를 사용하여 문서의 구조, 스타일 또는 내용을 변경할 수 있습니다.

노드에는 이벤트 핸들러가 연결되어 있을 수도 있습니다. 이벤트가 트리거되면 이벤트 핸들러가 실행됩니다.

 

 

 

- 독해에서 알게 된 사실

저 짧은 글의 독해과정에서 다음과 같은 사실을 알 수 있다.

영어문장은 한국어와 어순이 다르기 때문에 전치사 등을 기준으로 문장을 끊어서 잘 해석해야한다. 

Nodes can also have event handler attached to them 에서 attached to them이라는 문장을 각 노드 라고 직접 독해한 것은 잘했다고 생각한다. Each Node라고 해도 같은 맥락으로 봐도 되는지..

전치사에 대한 딱딱한 해석은 그만해야한다.

가령 The DOM represents document with a logical tree와 같은 문장에서는 with이 '~와 함께' 이런 뜻이 아니다. 정확히 말하면 뜻이 완전히 다르다고는 할 수 없지만 문맥상 어울리지 않는다. 따라서 주어와 동사의 문맥에 맞게 해석하는 편이 옳다.

The DOM represent  = DOM은 표현한다.   

목적어 : document  = 문서를

관용어? 꾸며주는 부분 with a logical tree = 로직트리와 함께(x) 로직트리로(o)

 

- 알게 된, 알고있던 단어

by -ing : ~함으로써

represent : 표현하다, 묘사하다, 대표하다

refer to : 가르키다, ~에 대해서 언급하다, 인용하다 등의 의미로 사용

even though : 비록 ~일지라도

programmatic : 프로그래밍적

allow : 허용하다는 뜻으로 알고 있었는데 이 문장에서는 뒤에 access라는 단어, 즉 접근권한에 대한 얘기가 나오다 보니 allow자체가 access할 수 있다라는 의미로 쓰이는 듯하다.

trigger : 작동시키다 -> 여기서는 is triggerd로 사용됐으므로 be + p.p의 형태로 작동되면, 동작하면,, 과 같은 뜻으로 해석할 수 있다.