자바스크립트를 사용하여
DOM 확장(DOM Extension) 방법에 대하여 알아보고 어떤 경우에 그리고 어떻게 사용하는지 아래에서 자세히 알아봅니다.
# DOM 확장이란?
먼저 DOM 오브젝트를 확장하는 방법은 무엇일까요?
DOM은
문서객체 모델로 웹페이지의 오브젝트를 조작하는 웹API입니다. 이를 확장하여 원하는 추가 기능등을 수행할 수 있게됩니다. 예를들어 제이쿼리의 closest() 메소드는 특정 엘리먼트의 부모 요소 중에서 원하는 부모만 찾는 매우 자주 사용되는 메소드죠. DOM 확장을 통해 원래는 없는 closest() 메소드를 기존의 DOM 객체 모델에 추가하여 사용할 수 있습니다. 라이브러리 없이도 사용할 수 있게되죠.
! DOM 확장 방법 알아보기
그렇다면 DOM 확장 방법을 알아봅니다. 먼저 DOM 확장을 위해서 기존의 DOM 객체에 접근 및 조작이 필요한데 조작하기 위해서는
Element 객체를 사용하여 가능합니다. 참고로 Element가 아닌 HTMLElement 객체 등을 사용하여 만들 수도 있습니다. HTMLElement는 Element로 부터 상속받은 웹API로 이 외에도 HTMLAnchorElement 등등 여러가지 세분화된 객체가 존재합니다. 이를 사용하는 이유는 전체가 아닌 특정 엘리먼트에게만 확장하는 경우 이를 사용하죠.
Element.prototype.greeting = function() {
alert('Hi');
};
위 코드는 아래와 같이 사용할 수 있으며 아래 코드는 a 태그인 Anchor 요소에만 적용됩니다.
HTMLAnchorElement.prototype.greeting = function () {
alert('Hi');
}
위에 보시면 prototype을 사용하여 DOM을 확장하여 사용하였습니다. 이처럼 Element.prototype 방법을 사용하여 DOM 객체를 확장토록합니다. 참고로 DOM 모델은 브라우저 환경에 따라 각각 다를 수 있다는 것도 알아두어야합니다.
# DOM 확장 예제보기
이미 위에서 보는 것 처럼 기존에 없던 greeting()이라는 함수를 DOM에 추가하였습니다. 이처럼 브라우저 내부에 존재하는 DOM 객체를 확장하면 없던 메소드를 추가할 수 있게할 수 있죠 아래에는 새롭게 hide()라는 메소드를 DOM을 확장하여 만들도록하겠습니다. hide()를 엘리먼튼에 사용하면 사라지도록 만들 것입니다. 그렇다면 아래 코드를 봐주세요.
Element.prototype.hide = function() {
this.style.display = 'none';
}
이제 새롭게 hide()를 엘리먼트에 적용가능합니다. 아래와 같이 동작해볼까요? body 태그를 사라지도록 해보겠습니다.
document.body.hide();
body태그에 display: none; 값이 적용되어 더 이상 보이지 않게되었습니다. 이처럼 라이브러리 없이도 없는 기능을 새롭게 추가 가능합니다. 매우 유용할 수 있겠죠? 하지만 주의할 점도 있습니다. 이 부분은 매우 중요하여 아래에 따로 명시하겠습니다.
# DOM 확장시 알아둘 점
DOM 확장시 주의할 부분입니다. DOM 확장에 대하여
부정적인... 의견이 많이 있습니다. 그 이유는
내장 객체를 직접 수정한다는 점에서 위험성이 다수 존재하기 때문입니다. 그런 이유로 DOM 확장을 사용하지 말아야한다는 의견도 많습니다. 대표적인 이유를 몇 가지 알아보면...
- DOM 확장은 브라우저 업데이트 및 변화에 따라 예측 불가능한 상황 발생 가능
- 확장된 DOM API가 동일한 이름으로 중복 사용될 수도 있음(확장된 여러개의 라이브러리 사용시)
- 버그 등이 발생할 수 있음
이처럼 DOM 확장된 웹어플리케이션은 이를 사용하거나 개발하는 개발자... 다른 개발자에게도 혼동을 주는 경우가 생길 수 있을 것입니다. 또한 DOM을 사용하려면 다양한 브라우저 및 환경을 고려하여 DOM 확장이 필요합니다. 이런 이유로 가급적 DOM 확장은 피하는 것이 좋지 않을까 생각됩니다. 특히 최근에는 여러 라이브러리를 중복 사용하는 경우가 더더욱 많아졌기 때문이기도 합니다.