[JQUERY] 부모 좌표 노드 구하기

 

 

여기서 부모 좌표 노드란 특정 노드의 기준 좌표가 되는 노드를 말함. 이에 따라 자식 노드의 위치는 부모 좌표 노드에 영향을 받게됨

* 일반 프로그래밍에서의 좌표와 자바스크립트 좌표는 대부분 비슷하지만 좌표의 기준이 되는 부모 좌표 노드를 찾는 방법은 완전히 다름 * 

사용법  |  $대상.offsetParent()

 

1. 일반 프로그래밍에서의 부모 좌표 노드 

  일반 프로그래밍의 경우 노드를 감싸고 있는 노드가 부모가 되며 이 부모를 기준으로 위치를 잡음 

  즉 부모의 위치가 움직이면 내부에 들어 있는 자식 요소도 같이 움직임 

// 일반 프로그래밍에서의 부모 좌표 노드 예시
<div id="parent1>
  <div id="parent2">
    <div id="child">
    </div>
  </div>
</div>

// child의 부모 좌표 노드는 #parent2
// #parent2의 부모 좌표 노드는 #parent1

2. 자바스크립트 DOM에서 부모 좌표 노드 

  일반 프로그래밍과는 달리 자바스크립트 DOM에서는 position 속성값이 absolute 또는 relative로 설정된 조상 노드 중 가

  장 근접한 노드가 부모 좌표 노드가 됨.

 

출처 : 본인 PPT / 그림 1

<div id="parent1">
  parent1
  <div id="parent2">
    parent2
    <div id="child">
      child
    </div>
  </div>
</div>

 그림 1의 기본 틀이 되는 html은 위와 같은 코드로 작성이 되어있다. css를 통해 좀더 그림1과 동일한 모양을 만들어 보겠

 음

#parent1 {
  position:absolute;
  width:300px;
  height:300px;
  left:100px;
  top:100px;
  background-color:#ccc;
}

#parent2 {
  margin:50px;
  background-color:#ffo;
  width:200px;
  height:200px;
}

#child {
  position:absolute;
  width:100px;
  height:100px;
  left:50px;
  top:100px;
  background-color:foo;
}

 

예를 들어 위의 그림과 같이 노드에 스타일이 적용되었다고 보면

#child의 부모 좌표 노드 : #parent2 X #parent1 O

이유는 parent2의 position 속성값이 absolute 또는 relative가 아니고 #parent1의 position 속성값이 absolute이기 때문.

 

이 상황에서 #child의 좌표 기준이 되는 부모 좌표 노드의 id 값을 출력하려면?

<script>
   // $(function)으로 써도 됨
   $(document).ready(function(){
   
     // 부모 좌표 노드 구하기
     var $parent = $("#child").offsetParent();
     
     // 출력
     consol.log("id= " +$parent.attr("id"));
   })
</script>

 

실행결과
 id = parent1

 

설명 

jQueyr의 offsetParent() 메서드를 활용하면 아주 쉽게 부모 좌표 노드를 찾을 수 있음. 실행결과에서 알 수 있는 것 처럼 부모 좌표는 parent2가 아닌 parent1이 됨 

 

 

위치/크기 관련 기능을 다룰때 가장 기본이 되지만 초보자 입장에선 헷갈리거나 실수할 수 있는 부분이기 때문에 명확하게 학습할 필요성이 있어 포스팅을 올림