자바스크립트에서 DOM 사용시 알아둘 것

개념 공부를 하면서 의문이 들만한 요소들을 정리해 둔 것이다.

 

DOM(Document Object Mode) : 문서 객체 모델

웹페이지의 각 요소를 가계도 처럼 구성한 것

 

노드(node)란?

DOM에서 노드(node)는 HTML 또는 XML 문서의 구성 요소를 나타내는 기본 단위이다.

가계도로 비유하자면 할아버지, 아버지, 아들 등 가족 구성원 1명, 1명이 각자 1개의 노드라고 할 수 있다.

마찬가지로 DOM에서는 각 HTML 요소, 텍스트, 주석 등이 각각 1개의 노드라고 할 수 있다.

 

DOM은 실제로 시각적인 인터페이스가 보이는 것이 아니다.

DOM은 각 요소를 추상적으로 구조화한 것이지 실제로 시각적인 형태로 보이게 만들어진 것은 아니다.

예를 들어 3명의 사람이 있고 이 사람(노드)들이 각각 할아버지 - 아버지 - 아들 관계라는 것을 알고 있지만 다른 누군가가 시각적으로 그것을 바로 알 수 있도록 아들의 몸에 ~의 아들 ~의 손자 식으로 써둔 것이 아니라는 것이다.

 

DOM API란?

우리가 JavaScript를 사용하여 DOM을 조작하는 행위는 모두 DOM API를 사용하는 것이다.

• document.getElementById(): ID를 이용하여 특정 요소를 선택한다.
• document.querySelector(): CSS 선택자를 이용하여 특정 요소를 선택한다.

같이 DOM의 요소를 가져오거나 수정하거나 하는 것은 모두 DOM API다.

 

API란?

API는 Application Programming Interface의 약자로, 소프트웨어들이 서로 상호작용할 수 있도록 정의된 규칙들의 집합이다. 쉽게 말해, 소프트웨어들이 서로 대화하는 방법이라고 생각할 수 있다.

JavaScript(이후 JS)의 map(), filter(), push() 같은 메서드는 JS가 제공하는 표준 내장 API이다. 우리는 이 API를 사용하여 JS의 기능을 활용할 수 있다.

이때 API에는 정해진 문법과 규칙이 존재하며, 만약 정해진 방식이 아닌 전혀 다른 방식으로 코드를 작성하면 JS가 이해할 수 없어 오류가 발생한다.

 

예를 들어 map()이 아니라 maap()처럼 잘못 작성하는 경우다. JS 입장에서는 maap()이라는 단어가 무엇을 의미하는지 전혀 알 수 없다. 이는 마치 한국어를 모르는 미국인에게 한국어로 말을 거는 것과 같은 상황이다. 상대방이 이해할 수 없는 언어로 말하면 의사소통이 되지 않듯이, JS도 정해진 문법과 규칙에 맞지 않는 코드를 해석할 수 없다.