The DOM and JavaScript

큰 그림

페이지 안 레이어 이동, 레이어, 팝업 메뉴 보이기와 감추기 등과 같은 비주얼 효과는 "DHTML"이나 "Dynamic HTML"로 자주 참조됩니다. 일부 사람들은 표현(presentation)이 아니라 내용(content)을 다루기로 된 웹 페이지에서 이런 기술의 실제 쓰임을 묻습니다. 하지만 오늘날 실제 쓰임은 그 물음에 있습니다.

내가 이 프로젝트에서 일하고 많은 웹마스터들과 연락한 뒤로, 웹 디자인 커뮤니티 대부분이 그들의 DHTML이 어떻게 동작하는 지 모른다는 사실이 생각났습니다. 대부분의 시간을 그들은 스크립트 저장소(repository) 사이트에 가서, 그들 웹 페이지에 그 코드를 그냥 복사하고 붙여넣습니다. 불행하게도 이들 사이트 대부분은 결코 "DOM"에 관해서는 이야기하지 않으면서 "javascript"와 "DHTML"은 이야기합니다. 비록 DOM이 오래된 개념이더라도 DOM이 최근에야 "평균 웹 디자이너 전문어(jargon)"의 부분이 되었다는 사실입니다.

그 사이트를 W3C DOM을 위해 코딩할 가치가 있다고 사이트 임자에게 납득시키기는 Mozilla 같은 프로젝트를 위한 큰 도전입니다. 이는 때때로 많은 작업과 예전 브라우저를 위한 지원을 중단함을 뜻합니다. 또한 W3C DOM을 위한 지원에 관해 곧바로 참모습을 알아내는 큰 도전입니다. Netscape 6은 Netscape 4와 document.layers와 document.all를 쓰는 Internet Explorer를 위해 그들의 "JavaScript"를 작성했던 어리석은 웹 디자이너들에게 많은 혹평을 받았습니다. 매일 우리는 그들의 사이트를 얻도록 뉴스그룹에서, 개인 email로, Bugzilla로 되도록 공손하게 사람들을 돕기 위해 힘씁니다. 우리가 부딪친 문제 가운데 가장 큰 것은 JavaScript와 DHTML 그리고 DOM 사이의 혼동(confusion)입니다. 이 문서는 이를 정리하고 이 화려하고 쓸모 있는 기술 사이의 관계를 설명하려는 하나의 시도입니다.

JavaScript, 웹 스크립팅 언어

JavaScript은 Netscape Communications Corp에서 오늘날 Mozilla 프로젝트의 리더 가운데 한 명인 Brendan Eich가 처음 개발한 "object scripting language"입니다. Mozilla가 쓰는 JavaScript 엔진은 SpiderMonkey입니다. 이 엔진은 ECMA-262 개정 3 명세(specification)를 따릅니다. JavaScript는 또한 ECMAScript로 알려졌습니다(하지만 상세한 설명은 링크된 페이지를 보세요).

일반인의 오해와는 달리, JavaScript는 "Interpretive Java"가 아닙니다. 줄여 말하면, JavaScript는 개체 생성에 기반을 둔 원형(prototype)을 지원하는 dynamic scripting language입니다. 기본 구문(syntax)은 언어를 배우는 데 필요한 새로운 개념의 수를 줄이기 위해 Java와 C++ 둘 다와 개념에 있어 비슷합니다. JavaScript가 대단한 점은 혹시 여러분이 기본 프로그래밍(간단한 DHTML에서 필요한 것 같은)을 하고 싶은 경우 배우기 정말 쉽다는 점입니다. 불분명한 변수형, 정말 쓰기 쉬운 문자열, 전체 플랫폼 중립성(neutrality) 등. 또한 고급 코더들을 위해 개체 중심(object-oriented) 언어와 절차(procedural) 언어 둘 다로 기능합니다.

JavaScript에 관한 이 단락 대부분은 Mozilla JavaScript 페이지에서 가져왔음을 알게 됩니다. 가장 최근 ECMA 명세는 여기에서 찾습니다.

Document Object Model, 언어 중립 인터페이스 집합

JavaScript는 여러분이 DOM 개체를 운영(operate)하고 개체를 프로그램으로 조작(manipulate)하게 하는 프로그래밍 언어이지만, DOM은 여러분이 작업하는 문서의 부분을 검색(retrieve), 수정(modify), 갱신(update), 삭제(delete)하는 메소드(method)와 프로퍼티(property)를 제공합니다. 예를 들어, 여러분이 DOM을 써서 HTML textfield 값을 문자열로 검색할 지도 모릅니다. 그렇다면 여러분은 뜻있는 문장이 되도록 그 문자열을 다른 문자열에 연결(concatenate)하는 JavaScript "+" 연산자를 쓸 수 있습니다. 그리고 나서 여러분은 dialog에서 사용자에게 그 문자열을 표시하기 위해 DOM "alert()" 메소드를 씁니다. 또한 아래 예제를 보세요.

만약 웹페이지가 수입한 스웨덴 가구 한 점이라면, DOM은 선반, 나사못(bolt), Allen 렌치(wrench)와 드라이버 같은 각 부분의 도해입니다. 각 부분을 서로 조립하는 법과 많은 언어로 각 부분을 쓰는 법에 관한 명령 작성이 가능합니다. 하지만 여러분은 오직 여러분이 이해한 언어로 작성한 부분을 씁니다. 설명서는 실제 개체(브라우저의 렌더링 엔진)를 나타내는 개체의 도해(DOM)를 참조하는 작성 명령(JavaScript)을 써서 함께 가구를 만들기 쉽게 합니다. (유추한 Jonathan에게 감사를 올립니다!)

DOM에 있는 이 "언어 중립"이란 과대광고(hype)는 무엇일까요? DOM에 접근하는 데 쓰이는 유일한 언어가 JavaScript라면 왜 DOM이 언어 중립성을 띨까요? 글쎄요, 그것은 딱 맞지 않습니다. 예를 들어, Mozilla는 사용자 인터페이스를 위해 내부에 C++와 JavaScript로 작성된 DOM을 씁니다. 이를테면, 편집기는 Composer 모듈로 페이지를 작성(compose)할 때 여러분이 보는 HTML을 삽입(insert), 수정(modify), 삭제(delete)하기 위해 광범위하게 DOM을 씁니다. 다른 알려진 DOM 구현(implementation)은 아마도 Perl, Java, ActiveX, Python, 그리고 다른 것들을 포함합니다. 물론 이는 오직 DOM의 언어 중립성 덕분에 가능합니다.

DOM과 JavaScript - 무엇이 무엇을 하는가?

우리는 이 문서의 본론에 이르렀습니다. 각각 무엇을 할까요? 내 웹 페이지에 끼워 넣은(embed) 스크립트에서, DOM은 무엇이고 JavaScript는 무엇일까요? 간단한 예를 하나 더 자세히 보죠. 예는 우리가 "anchorTags"라고 부르는 NodeList에서 모든 <a> tag을 검색합니다. 그리고 나서 각 anchor tag(anchorTags NodeList의 각 요소)의 "href" 속성값을 경고(alert)로 띄웁니다.

파란색은 JavaScript, 빨간색은 DOM입니다.

var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
   alert("Href of " + i + "-th element is : " + anchorTags[i].href + "\n");
}

설명

이 코드 조각(snippet)은 기본 JavaScript가 무엇인지, 그리고 DOM이 무엇인지를 보입니다.

var anchorTags =

이는 "anchorTags"로 부르는 JavaScript 변수를 만듭니다.

document.getElementsByTagName("a")

Document 인터페이스는 DOM1 Core에서 정의한 첫 번째 인터페이스이고 document는 Document 인터페이스를 구현하는 host 개체입니다. document는 여러분의 페이지에 있는 모든 것을 지닙니다.
DOM1 Core는 Document 인터페이스에 getElementsByTagName() 메소드를 정의합니다. 메소드는 그 함수에 pass되는 매개변수와 일치하는 모든 tag의 NodeList (노드를 지니는 DOM 고유 배열의 한 종류)에서 문서 소스에 나오는 순서대로 검색합니다. 따라서 이제 anchorTags 변수는 NodeList입니다.

;

기본 명령 끝(end-of-instruction) 쌍반점(쎄미콜론, semicolon). JavaScript 문법.

for (var i = 0; i <

프로그래밍 언어의 특징을 잘 나타내는 "for" 루프(loop). 이는 우리가 anchorTags NodeList에 포함된 각 노드를 샅샅이 거치게 합니다. 변수 "i"의 선언을 주의하세요. 역시 JavaScript.

anchorTags.length

DOM1 Core는 NodeList 인터페이스의 length 프로퍼티를 정의합니다. 프로퍼티는 NodeList에 포함된 노드수(정수)를 반환합니다. JavaScript 배열은 또한 length 프로퍼티도 있음을 덧붙입니다.

; i++) {

1씩 증가하는 전형적인 JavaScript 변수.

alert(

alert()은 여러분이 pass한 매개변수(문자열)을 팝업하는 DOM 메소드입니다. DOM level 0이나 DOM0으로 부르는 것의 일부임을 유의하세요. DOM0은 일부 브라우저에서 지원되는 인터페이스 집합이지만 DOM 명세의 일부는 아닙니다.

"Href of this a element is : " +

문자열 리터럴(literal)과 문자열 연결 연산자. JavaScript.

anchorTags[i].href

"href"는 DOM1 HTML 명세에 정의된 HTMLAnchorElement 인터페이스의 프로퍼티입니다. 있다면, 프로퍼티는 anchor 요소의 href 속성값을 반환합니다.
우리는 또한 배열의 i 번째 항목(item)에 접근하기 위해 JavaScript에서 쓰는 구문과 같은 anchorTags[i]를 씁니다. NodeList의 항목에 접근하기 위해 언어 중립성을 띄는 "DOM 방식"은 NodeList 인터페이스에 정의된 item() 메소드(anchorTags.item(1).href)를 씁니다. 하지만 JavaScript 구현 대부분은 더 간단한 배열 방식 구문을 쓰도록 하고 그게 사람들 대부분이 실제로 쓰는 방식입니다.

+ "\n");

추가 문자열 연결. 문자열의 끝에 carriage return을 삽입합니다.

}

"for" 루프의 끝.