[백엔드온라인TIL] java 학습 39일차

프론트엔드 개발자라면 자바스크립트(JavaScript)라는 프로그래밍 언어를 아는 것과 동시에, DOM에 대해서 반드시 알고 있어야만 웹 개발을 시작할 수 있다고 해도 과언이 아닙니다. 브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면 HTML, CSS로도 충분하겠지만 그 이상의 인터랙티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 써야만 하기 때문입니다.

그렇다면 DOM이란 무엇이고, 어떻게 자바스크립트와 DOM을 이용해 인터랙티브한 기능을 구현할 수 있는지 알아보도록 하겠습니다.

---

DOM (문서 객체 모델)

먼저 DOM, 문서 객체 모델이 무엇인지에 대해 살펴볼게요.

DOM (문서 객체 모델)이란?

문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다.

DOM(문서 객체 모델)은 어떻게 생성되고 어떻게 보여질까?

DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이기도 합니다. 따라서 HTML DOM, 혹은 HTML DOM Tree로 부르기도 합니다.

트리 자료구조는 노드들의 계층 구조로 이루어져 있습니다. 계층 구조로 이루어져 있기 때문에 부모-자식 관계, 형제관계를 표현하는 비선형 자료구조를 나타냅니다.

트리 자료 구조로 구축이 되기 때문에, HTML 문서는 최종적으로 하나의 최상위 노드(root 노드)에서 시작해 자식 노드들을 가지며, 아래로만 뻗어나가는 구조로 만들어지게 됩니다.

어떻게 DOM으로 표현될 수 있는지 간단한 구조로 되어 있는 웹페이지를 보도록 하겠습니다.

H2 태그가 들어있는 웹페이지

이 웹페이지를 코드로 표현해보겠습니다.

이렇게 HTML 문서 안에 h2 태그로 감싸진 text가 존재하고 있을 것입니다. 해당 문서는 트리 구조로 표현한다면 이렇게 표현이 될 수 있어요.

document 노드가 최상위 노드가 되고, 밑으로 element 노드가 오며, 이어 text 노드와 attribute 노드가 오는 계층적인 구조임을 알 수 있습니다. 이러한 노드 타입에는 총 12개가 있는데 가장 중요한 것은 위에서도 명시가 되어 있듯 총 4가지의 노드가 있습니다.

document node (문서 노드)

DOM Tree에서 최상위 루트 노드를 나타내며, document 객체를 가리킵니다. HTML 문서 전체를 나타내는 노드이기도 합니다. window 객체의 document 프로퍼티로 바인딩(연결)이 되어 있어 window.document , document로 참조해 사용할 수 있습니다. HTML 문서에 이 문서 노드는 오로지 1개만 존재합니다.

element node (요소 노드)

모든 HTML 요소 (body, h2, div 등)는 이 요소 노드입니다. 속성 노드를 가질 수 있는 유일한 노드로서, 부모-자식 관계를 가지게 되기 때문에 계층적 구조를 이룰 수 있게 됩니다.

attribute node (속성 노드)

모든 HTML 요소의 속성은 이 속성 노드입니다. 요소 노드에 대한 정보를 가지고 있습니다. 그렇기 때문에 부모 노드가 아닌 해당 노드와 연결(바인딩)이 되어 있습니다.

text node (텍스트 노드)

HTML 문서의 모든 텍스트는 이 텍스트 노드라 해도 과언이 아닙니다. 텍스트 노드는 정보를 표현하며, 가장 마지막에 위치하는 자식 노드이기 때문에 잎사귀를 닮았다 해 리프 노드라고 불리기도 합니다.

이 4가지 노드들이 존재함으로써 스크립팅 언어가 웹페이지에 접근하고 조작할 수 있게 됩니다. 특히 데이터 검색하기가 빠른 트리 구조로 이뤄져 있기 때문에 이 접근하고 조작하여 업데이트를 하는 속도는 빠른 편입니다.

자바스크립트(JavaScript) DOM

자바스크립트와 DOM은 어떤 관계일까요?

JavaScript DOM

자바스크립트는 DOM을 조작할 수 있는 프로그래밍 언어 중에서 가장 유명한 언어입니다. 웹페이지를 만듦에 있어서 거의 한 몸처럼 사용하게 되다 보니, 가끔 자바스크립트와 DOM을 혼동해 “자바스크립트 안에 DOM이 있는 거 아니냐” 혹은 “DOM은 자바스크립트로만 다룰 수 있는 거 아니냐” 같은 심심한 오해가 생기게 되기도 합니다.

그러나 자바스크립트와 DOM은 엄밀히 다른 개념이며, 꼭 자바스크립트로만 DOM을 다룰 수 있는 것도 아닙니다.

JavaScript와 DOM, 다른 개념인 이유는?

DOM은 자바스크립트 없이 DOM 인터페이스 구현만으로도 DOM을 조작할 수 있기 때문입니다. DOM은 앞서 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스라고 설명했습니다. 조금 더 부연 설명을 하자면 DOM은 어떤 프로그래밍 언어에 의존하지 않는 독립적인 인터페이스라는 것입니다.

이렇기 때문에 DOM은 꼭 자바스크립트로만 구현 되는 것도 아닙니다. 다른 프로그래밍 언어인 자바로도 구현할 수 있으며, C#으로도 구현할 수 있습니다. 그렇다면 왜 이런 오해가 생겼을까요?

DOM이 자바스크립트(JavaScript)라는 오해의 원인

현재 웹 브라우저에서 DOM을 조작하는 언어는 자바스크립트 뿐이기 때문입니다. 브라우저는 과거 HTML 문서로만 이루어진 웹 페이지를 출력하기만 했고, 그것만으로도 충분했었습니다. 그러나 점점 시간이 흐르며 동적인 기능을 요구하기 시작했고, HTML 문서 만으로는 이 기능을 제공하기 불가능 해졌습니다.

그래서 웹 브라우저 내부에 이 동적인 기능을 지원해줄 프로그래밍 언어를 넣기로 했는데, 현재의 자바스크립트의 초석이 되는 Mocha(모카)입니다. 웹 브라우저는 이 때 이후 내장 프로그래밍 언어로 쭉 자바스크립트를 고수해오고 있습니다. 그렇기 때문에 다른 언어로도 DOM을 조작할 수 있는 것은 분명하나, 브라우저를 꽉 잡고 있는 자바스크립트의 아성을 이기지는 못하는 것도 사실입니다.

어찌 되었든 결론적으로, 만일 브라우저가 자바스크립트 외에 다른 언어를 지원하게 된다 하더라도 DOM은 프로그래밍 언어와 독립적으로 구현됩니다. 따라서 자바스크립트가 아니더라도 그 언어를 통해 DOM을 사용하여 동일한 방식으로 HTML 문서를 조작하고 화면을 렌더링할 수 있을 것입니다.

DOM의 정적 생성과 동적 생성

지금 현재 브라우저에 내장되어 있는 언어는 자바스크립트이고, 자바스크립트는 가장 간편하고 빠르게 DOM으로 구조화된 웹 문서에 접근하여 노드(웹 컨텐츠를 이루는 기본 요소)들을 조작할 수 있습니다.

엄밀히 말하자면, 자바스크립트를 이용해 HTML 문서에 없는 노드를 만들어 이어 붙여 웹 페이지에 렌더링되게 만드는 모든 과정이 동적으로 구현하는 것이라 볼 수 있습니다. 또는 자바스크립트를 이용해 있던 노드에 없는 노드를 만들어 이어 붙이는 것도 동적으로 구현한다고 볼 수 있죠.

정적으로 생성되는 과정은 오로지 이미 HTML 파일에 적혀 있는 코드를 위에서부터 아래로 읽어내려가며 생성하는 과정만을 뜻합니다. 즉 HTML 문서에 직접 태그로 작성하는 것만을 정적으로 생성한다고 보기 때문에, 이런 부분에서 차이가 날 수밖에 없습니다.

즉, 이 코드를 읽어내려 웹페이지에 콘텐츠를 띄우는 과정은 정적 생성 과정입니다. 여기에는 자바스크립트가 접근하여 DOM을 조작한 흔적이 없습니다.

그러나 밑에 스크립트 태그를 달아 외부의 자바스크립트 파일을 연결하고, h2 태그에 id를 달아 일련의 작업(예를 들어 h2 태그를 클릭하면 밑에 사진이 나타나는 등의 동작)을 하게 된다면 이것은 동적으로 노드를 생성한다고 보는 것입니다.

DOM의 데이터타입(Datatype)

먼저 DOM 객체의 구성 요소부터 알아보도록 하겠습니다.

• 프로퍼티(property) : DOM 객체의 멤버 변수입니다. HTML 태그의 속성을 반영합니다.
• 메소드(method) : DOM 객체의 멤버 함수입니다. HTML 태그를 제어합니다.
• 컬렉션(collection) : 정보를 집합적으로 표현하는 일종의 배열입니다. 예를 들어 children 컬렉션은 DOM 객체의 모든 자식 DOM 객체에 대한 주소를 가집니다.
• 이벤트 리스너(event listener) : HTML 태그에 작성된 이벤트 리스너(onclick, onchange 등)들을 그대로 가집니다.
• 스타일(style) : 이 프로퍼티를 통해 HTML 태그에 적용된 CSS 스타일 시트에 접근 가능합니다.

이제부터 DOM의 중요한 데이터 타입들에 대해 알아보도록 하겠습니다. 데이터 타입에는 여러 개가 있는데, 데이터 타입은 객체이기 때문에 각각 프로퍼티와 메소드를 가지고 있습니다.

document

member(프로퍼티 혹은 메서드)가 document 타입의 object를 리턴할 때, 이 object는 root document object 자체입니다. 예를 들어 element의 ownerDocument property(ex. document.getElementById("myP").ownerDocument)는 해당 프로퍼티가 속해 있는 document를 return 합니다.

documentobject 에 대한 설명은 DOM document Reference에서 더 자세히 볼 수 있습니다.

element

element는 DOM API 의 member에 의해 return 된 element 또는 element 타입의 노드를 의미합니다. 
document.createElement() method 가 node를 참조하는 object 를 리턴한다고 말하는 대신, 이 method가 DOM 안에서 생생되는 element를 리턴한다고 좀 더 단순하게 말할 수 있습니다. element 객체들은 DOM Element 인터페이스와 함께, 좀 더 기본적인 Node  인터페이스를 구현한 것이기 때문에 이 참조(reference)에는 두 가지가 모두 포함되었다고 생각하면 됩니다.

 

nodeList

nodeList 는 element의 배열입니다. (document.getElementsByTagName() method에 의해 리턴된 것과 같습니다.) nodeList의 Items 은 index 를 통해 접근 가능하며, 다음과 같이 두 가지 방식이 있습니다.

1. list.item(1) 
2. list[1] 

위의 방식들은 동일합니다. 1번의 item() method는 nodeList object의 단일 method입니다. 2번은 list에서 두번째 item을 가져오는(fetch) 전형적인 array 문법(syntax)입니다.

 

jQuery란?

jQuery는 빠르고, 작고, 기능이 많은 자바스크립트 라이브러리이다.
jQuery는 다양한 브라우저에서 동작하는 쉬운 API로, HTML 문서에 대한 순회 및 조작, 이벤트 핸들링, 애니메이션, Ajax등을 더 간단하게 만든다. 다재다능성과 확장성을 겸비한 jQuery는 수많은 사람들이 자바스크립트를 쓰는 방식을 바꾸었다.

(출처: jQuery 홈페이지)

jQuery 간단하게 살펴보기

1) DOM 순회 및 조작

class가 'continue'인 <button> 요소를 가져오고, HTML을 'Next Step...'으로 바꾸기

$("button.continue").html("Next Step...");

2) 이벤트 핸들링

#button-container에 해당되는 button을 클릭했을 때, CSS의 display:none으로 숨겨진 #banner-message 요소를 보여주기

var hiddenBox = $("#banner-message");
$("#button-container button").on("click", function (event) {
  hiddenBox.show();
});

3) Ajax

서버의 /api/getWeather에 있는 로컬 스크립트를 쿼리 파라미터 zipcode=97201과 함께 호출하고, #weather-temp의 HTML을 리턴된 값으로 교체하기.

$.ajax({
  url: "/api/getWeather",
  data: {
    zipcode: 97201,
  },
  success: function (result) {
    $("#weather-temp").html("<strong>" + result + "</strong> degress");
  },
});

(출처: jQuery 홈페이지)

Ajax란?
Ajax는 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)을 의미한다. 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하며, JSON, XML, HTML, 일반 텍스트형식 등 다양한 포맷을 주고받을 수 있다.
Ajax의 가장 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행되는 비동기성이다. 이러한 비동기성을 통해 클라이언트의 이벤트가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다.