웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 DOM 확장(DOM Extension)

Last Modified : 2018-05-23 / Created : 2018-05-23
2,738
View Count

자바스크립트를 사용하여 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 확장은 피하는 것이 좋지 않을까 생각됩니다. 특히 최근에는 여러 라이브러리를 중복 사용하는 경우가 더더욱 많아졌기 때문이기도 합니다.

Previous

자바스크립트 메모라이제이션(memorization) 예제보기

Previous

[자바스크립트] key pressing 누르거나 클릭중인 이벤트 예제