부모 요소 그리고 그 부모의 부모 요소를 찾는 상위 요소 찾기, 검색 방법 중 많이 사용되는 closest()는 매우 편리합니다. 다만 이 내장함수는 모든 브라우저가 지원하지는 않는데요 ... 만약 jQuery를 사용하는 경우 동일한 메소드 closest()를 사용할 수 있습니다. 하지만 제이쿼리를 사용하지 않는 경우에는 IE에 적용하기 위해서 자바스크립트를 사용하여 구현하는 방법을 알아보려합니다.

먼저 부모 요소를 찾아 반환하는 closest()는 매우 편리합니다. 해당 요소의 부모 요소중 해당하는 선택자를 모두 찾아 간단하게 반환해줍니다. 만약 제이쿼리를 사용하지 않으며 크로스브라우징이 필요한 경우 어떻게 구현할까요?



# 상위 요소의 Class를 확인하여 찾는 경우
순수 자바스크립트를 사용하여 부모의 클래스이름을 확인하고 없는 경우 그 부모의 부모 클래스 그 다음에도 계속해서 DOM에서 클래스명으로 찾는 방법입니다.
HTMLElement.prototype.closestByClass = function(className) {
    var target = this;
    while (!target.parentElement.classList.contains(className)) {
        target = target.parentElement;
        if (target.parentElement === null) {
            throw new Error('Not found.');
        }
    }
    return target;
};

위 코드는 DOM을 확장한 방법으로 부모 요소를 루프(Loop)를 통해 원하는 클래스명을 찾아 반환합니다. 모든 선택자 방식이 아닌 클래스 이름으로만 동작하게됩니다.

이 방법은 Class에만 동작하는데 루프를 사용하는 방법이면서 동시에 DOM을 확장한 방법으로 가급적 최소한 기능을 활용하는 것이 좋을 것 같습니다. 해당 코드를 실행할 경우 해당하는 부모 요소를 찾으면 그 부모를 반환합니다. 사용은 예를들어 아래처럼 찾습니다.
element.closestByClass('classname');



# 상위 요소에서 태그 이름으로 찾는 경우
앞에서는 클래스명을 사용하여 상위 요소에서 존재 여부를 확인했다면 ~ 이번에는 클래스명이 아닌 태그이름으로 찾는 방법입니다. 위와 비슷하지만 태그이름으로 찾는 점이 다른 점입니다.
HTMLElement.prototype.closestTagname = function(tagName) {
  var target = this;
  if (target.tagName === tagName.toUpperCase()) return target;
  while (!target.tagName === tagName.toUpperCase()) {
    target = target.parentElement;
    if (target.parentElement === null) {
      throw new Error('Not found.');
    }
  }
return target.parentElement;

여기까지 자신이 속한 상위 요소에 특정 클래스명 또는 태그 이름의 요소가 존재하는지 확인하는 코드를 알아보았습니다.