DOM 과 이벤트 처리

DOM

브라우저 객체를 이용하는 것만으로도 브라우저 그 자체나 문서를 꽤 섬세한 부분까지 조작할 수 있지만, 실은 큰 문제가 있다.

브라우저 객체는 어디까지나 브라우저 벤더가 독자적으로 구현한 객체로, 그렇다 할 만한 표준 규격이 존재하지 않는다.

최근에는 꽤 호환성을 도모할 수 있게 되었지만, 브라우저 객체는 크로스 브라우저를 의식한 코드를 기술해야 한다는 것은 꽤나 번거러운 일이다.

그래서 등장한 것이 DOM( Document Object Model )이다.

HTML이나 XML과 같은 마크업 언어로 쓰여진 문서에 액세스 하기위한 표준적인 구조로 크로스 브라우저 환경에서도 호환성 높은 코드를 기술할 수 있다.

DOM은 문서를 문서 트리로서 취급한다. 

이름 그대로 문서에 포함되는 요소나 속성 텍스트를 각각 객체로 보기 때문에 이러한 객체의 집합이다. 참고로 문서를 구성하는 요소나 속성 텍스트 등의 객체를 노드라고 부르며, 객체의 종류에 따라 요소 노드, 속성 노드, 텍스트 노드 등으로 부른다. DOM은 이들 노드를 추출/ 추가/ 치환/ 삭제 하기 위한 범용적인 수단을 제공하는 API라고 할 수 있다.

※주의 

문서 트리의 해석은 브라우저 마다 다르다

실은 문서 트리의 해석은 브라우저 에 따라 미묘하게 다르다.

노드 간의 공백/ 개행( 공백노드 ) 를 무시한다.

title 요소 밑의 텍스트 노드를 무시한다 등

특히 공백 노드에 대한 인식의 차이는 주의가 필요하다. 향후 노드를 추출할 때 00 번째의 자식 이라고 지정하는 일이 있을텐데, 문서 트리의 해석의 차이에 따라 같은 코드임에도 동일 노드를 추출할 수 없을 가능성이 있다.

DOM의 레벨

W3C에서 표준화가 진행되어 현재는 1,2,3 의 레벨이 존재한다. 레벨이높은 것이 보다 고도의 기능을 제공한다고 생각하면 된다.

레벨 1 : 노드의 참조/ 추가/ 치환/ 삭제 등의 기본 기능을 정의

레벨 2 : 레벨1에 스타일 조작이나 이벤트 모델, 노드의 범위 지정 등의 기능을 추가

레벨 3 : 레벨2에 Xpath 타당성의 검증, 읽기/ 보존 등의 기능을 추가

접근 방법 

다이렉트 액세스 : id 값이나 태그명이라는 키를 가지고 목적의 요소를 직접 취득하는 방법

핀 포이트로 특정 요소를 취득하는 데에는 편리하지만 큰 문서를 대상으로 하는 경우에는 퍼포먼스 저하의 원인이 되기 쉽다.

노드 워킹 : 어느 요소를 기점으로 그 자식 요소, 부모 요소, 형제 요소 와 같이 상대적인 위치 관계로 노드를 취득 하는 방법

( 트리 형태로 된 노드 간의 가지를 따라 돌아다니는 모습에서 비유 )

조작의 섬세함이 장점이나, 다이렉트 액세스에 비하면 절차가 약간 복잡하여 장황하다.

권장 : 다이랙트 액세스로 뿐적인 트리를 취한 후, 근접 노드는 노드 워킹으로 취득하는 것

상황에 따라 양자를 병용하는 것이 가장 바람직하다.

이벤트 처리

이벤트 핸들러는 클라이언트 사이트 자바스크립트로 옛부터 이용되어 온 이벤트 처리의 수법이긴 하나, 이것에는 큰 문제가 있다.

동일한 요소/ 동일한 이벤트에 대해서 복수의 이벤트 핸들러를 정의 할 수 없다는 점이다.

간단한 어플리캐이션을 구축하고 있는 사람들에게는 그다지 신경쓰이는 제약은 아니나 복수의 라이브러리를 조합해 이용하고 있는 경우라면 상황이 다르다.

하나의 라이브러리가 어떤 요소의 특정 이벤트를 사용해 버렸다고 하면, 다른 라이브러리에서 동일 요소의 동일 이벤트를 사용하는 처리가 동작하지 않게 되어 버린다.

이래서 등장한 것이 이벤트 리스너

이벤트 리스너

이벤트 핸들러와 같이 발생한 이벤트에 대응해 그 처리 내용을 정의하는 코드의 덩어리 (함수 )

동일 요소의 동일 이벤트에 대해서 복수의 이벤트 리스너를 연관시킬 수 있다.

일단 설정했던 이벤트 리스너를 삭제할 수 있다.

이벤트 리스너를 이용하는 경우에는 크로스 브라우저를 의식한 코드를 기술 하여야 한다.