[Javascript] iframe 하위 객체 접근 방법

[Javascript] iframe 하위 객체 접근 방법

 

 

 

보통 Document 하위 객체를 접근하기 위해서는 셀렉터 사용 혹은 자식 요소를 통해 접근한다.

 

 

 

<div class="parent">  
	<div class="child">
		<div class="child2">자식의 자식</div>
	</div>        
</div>

 

 

예를들면, class가 child2인 요소를 찾기 위해서는 다음과 같은 방법 등으로 접근할 수 있는 것이다.

 

document.querySelector(".child2");

document.querySelector(".parent").firstElementChild.firstElementChild;

 

 

 

 

하지만 iframe 요소의 하위를 찾을 때는 위와 같이 동일한 방법이 적용되지 않기 때문에 다음과 같이 활용해야 한다.

 

 

 

iframe 내부에 iframe 내부에 .se2_inputarea 라는 요소를 찾기 위한 방법

 

 

1. JQuery 

 

var textarea = $('iframe').contents().find("iframe").contents().find('.se2_inputarea');

 

 

2. Pure JS

 

var textarea = document.querySelector("iframe").contentWindow.document.querySelector("iframe").contentWindow.document.querySelector(".se2_inputarea");