자바 스크립트 함수 document.querrySelectorAll이 Chrome에서 이상하게 작동합니다.

Question

document.querySelectorAll 함수를 사용하여 Chrome 개발자 콘솔에서 요소를 가져 오려고하는데 요점은 요소를 반환하지 않는다는 점입니다. 요소 탭.

누군가 비슷한 문제에 직면했는지 궁금합니다. 브라우저 구성에서 일부 옵션을 변경해야합니까?

그런데 Chrome 버전은 MAC에서 63입니다. 또한, 내가 일하고있는 페이지는 iframe html 태그를 가지고 있는데, 이것은 이상한 행동의 이유일까요?

이

내가 개발자 콘솔

에서 무엇을 얻을 내가 요소 탭에서 무엇을 얻을입니다 :

Answer 1

은 '이 때로 믿을 수 어떤 브라우저 설정도 document.querySelectorAll()에 영향을 미칩니다. 그것은 꽤 핵심 기능입니다.

당신은 iframe을 언급 했으므로 그것이 혼동의 원천 일 수 있습니다. iframes을 사용하는 경우 외부 레벨에서 직접 iframe의 내용에 액세스하거나 수정할 수 없습니다. 바깥 쪽 수준에서는 본질적으로 블랙 박스입니다. 이것은 브라우저가하는 샌드 박싱 때문입니다.

iframe과 기본 페이지가 동일한 도메인 (예 : http://example.com/page1 및 http://example.com/page2)에있는 경우는 예외입니다. 당신이 문서에 액세스 할 수 있습니다, 거기에서

const iframe = document.querySelector('iframe'); 
iframe.contentWindow // the window for the iframe 

, 그에 대한 querySelectorAll() 실행 : 그들은 동일한 도메인에 둘 경우

, 당신은 contentWindow으로는 윈도우의 액세스 할 수 있습니다

iframe.contentWindow.document.querySelectorAll('div'); 

을

그게 iframe의 모든 div 요소를 얻을 것이다.