Javascript에서 창, 화면 및 문서의 차이점은 무엇입니까?
이 용어는 DOM의 전역 환경으로 상호 교환 가능하게 사용됩니다. 차이점은 무엇이며 (있는 경우) 언제 사용해야합니까?
Windowglobal object브라우저에서 기본 JavaScript 객체 루트이며 문서 객체 모델의 루트로 취급 될 수도 있습니다. 당신은 그것을 액세스 할 수 있습니다window
window.screen또는 screen실제 화면 크기에 대한 작은 정보 개체 일뿐 입니다.
window.document또는 document보이는 (또는 더 나은 : 렌더링 된) 문서 객체 모델 / DOM의 주요 객체 일뿐 입니다.
이후 window전역 객체는 당신은 속성 이름으로의 속성을 참조 할 수 있습니다 - 당신이 아래로 쓸 필요가 없습니다 window.- 그것은 런타임에 의해 파악 될 것이다.
창은 브라우저에 가장 먼저로드됩니다. 이 윈도우 객체는 length, innerWidth, innerHeight, name, 닫힌 경우, 부모 등과 같은 대부분의 속성을 갖습니다.
그러면 문서 객체는 어떻습니까? 문서 객체는 html, aspx, php 또는 브라우저에로드 될 기타 문서입니다. 문서는 실제로 창 개체 안에로드되며 제목, URL, 쿠키 등과 같은 속성을 사용할 수 있습니다. 이것이 실제로 무엇을 의미합니까? 즉, 윈도우의 속성에 액세스하려는 경우 window.property이고, 문서 인 경우 window.document.property이며 document.property로도 짧게 사용할 수 있습니다.
충분히 간단 해 보입니다. 그러나 IFRAME이 도입되면 어떻게됩니까?
- http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CwLGOk9c.dpuf 에서 자세히 참조하십시오 .
는 window실제 전역 객체이다.
는 screen이 사용자의 디스플레이에 대한 속성이 포함 된 화면입니다.
는 documentDOM을이 곳입니다.
간단히, 아래에서 더 자세히 설명하면
window해당 컨텍스트의 JavaScript에 대한 실행 컨텍스트 및 글로벌 오브젝트입니다.documentHTML을 파싱하여 초기화 된 DOM을 포함screen실제 디스플레이의 전체 화면을 설명합니다
참조 W3C 와 모질라 이러한 개체에 대한 자세한 내용은 참조. 세 사이의 가장 기본적인 관계는 각각의 브라우저 탭 자체를 가지고 있다는 것입니다 window, 그리고는 window가지고 window.document및 window.screen속성. 브라우저 탭의는 window그래서 글로벌 컨텍스트입니다 document및 screen참조 window.document하고 window.screen. Flanagan의 JavaScript : Definitive Guide 에 따르면 세 가지 객체에 대한 자세한 내용은 다음과 같습니다 .
window
각 브라우저 탭에는 고유 한 최상위 window개체가 있습니다. 각 <iframe>(그리고 더 이상 사용되지 않는 <frame>) 요소는 window부모 창 안에 중첩 된 자체 객체를 가지고 있습니다. 이 창들은 각각 별도의 전역 객체를 갖습니다. window.window항상을 의미 window하지만, window.parent및 window.top, 창을 둘러싸는 다른 실행 컨텍스트에 대한 액세스 권한을 부여 참조 할 수도 있습니다. 아래에 설명 document되고 추가 된 속성에는screenwindow
setTimeout()및setInterval()타이머에 이벤트 처리기를 바인딩location현재 URL 제공history메소드back()와forward()탭의 변경 가능 히스토리 제공navigator브라우저 소프트웨어 설명
document
각 window객체에는 document렌더링 할 객체가 있습니다. 고유 한 ID가 할당 될 때 HTML 요소가 전역 객체에 추가되기 때문에 이러한 객체는 부분적으로 혼동됩니다. 예를 들어 HTML 스 니펫에서
<body>
<p id="holyCow"> This is the first paragraph.</p>
</body>
단락 요소는 다음 중 하나에 의해 참조 될 수 있습니다.
window.holyCow또는window["holyCow"]document.getElementById("holyCow")document.body.firstChilddocument.body.children[0]
screen
이 window객체 screen에는 물리적 디스플레이를 설명하는 속성 이있는 객체도 있습니다.
화면 속성
width과height전체 화면입니다화면 속성
availWidth및availHeight툴바 생략
The portion of a screen displaying the rendered document is the viewport in JavaScript, which is potentially confusing because we call an application's portion of the screen a window when talking about interactions with the operating system. The getBoundingClientRect() method of any document element will return an object with top, left, bottom, and right properties describing the location of the element in the viewport.
the window contains everything, so you can call window.screen and window.document to get those elements. Check out this fiddle, pretty-printing the contents of each object: http://jsfiddle.net/JKirchartz/82rZu/
You can also see the contents of the object in firebug/dev tools like this:
console.dir(window);
console.dir(document);
console.dir(screen);
window is the root of everything, screen just has screen dimensions, and document is top DOM object. so you can think of it as window being like a super-document...
The window is the first thing that gets loaded into the browser. This window object has the majority of the properties like length, innerWidth, innerHeight, name, if it has been closed, its parents, and more.
The document object is your html, aspx, php, or other document that will be loaded into the browser. The document actually gets loaded inside the window object and has properties available to it like title, URL, cookie, etc. What does this really mean? That means if you want to access a property for the window it is window.property, if it is document it is window.document.property which is also available in short as document.property.
'Programing' 카테고리의 다른 글
| CSS3 선택기 : 클래스 이름이있는 첫 번째 유형? (0) | 2020.05.05 |
|---|---|
| RecyclerView 및 java.lang.IndexOutOfBoundsException : 불일치가 발견되었습니다. (0) | 2020.05.05 |
| 종료 메시지를 만드는 방법 (0) | 2020.05.05 |
| 글로브가 bash에서 일치하는지 테스트 (0) | 2020.05.05 |
| TypeScript 함수 오버로딩 (0) | 2020.05.05 |