Apa perbedaan antara jendela, layar, dan dokumen dalam Javascript?

244

Saya melihat istilah ini digunakan secara bergantian sebagai lingkungan global untuk DOM. Apa perbedaannya (jika ada) dan kapan saya harus menggunakan masing-masing?

javascript TimeEmit
sumber

Jawaban:

250

Windowadalah root objek JavaScript utama, alias global objectdalam browser, juga dapat diperlakukan sebagai root dari model objek dokumen. Anda dapat mengaksesnya sebagaiwindow

window.screenatau hanya screenobjek informasi kecil tentang dimensi layar fisik.

window.documentatau hanya documentobjek utama dari model objek dokumen / DOM yang berpotensi terlihat (atau lebih baik: belum).

Karena windowobjek global, Anda dapat mereferensikan properti apa pun hanya dengan nama properti - jadi Anda tidak perlu menuliskannya window.- itu akan diketahui oleh runtime.

Peter Aron Zentai
sumber
46
Dokumen bisa lebih besar dari jendela - jendela adalah bagian "terlihat" di browser Anda.
Mandy
1
@Mandy elemen html jika bukan bagian dari dokumen tidak terlihat. Anda dapat membuat iframe siapa windows benar-benar tidak terlihat sampai Anda melampirkan iframe ke dokumen
Peter Aron Zentai
27
Komentar dari @Mandy membingungkan windowdengan viewport . A windowadalah objek JavaScript untuk tab browser atau <iframe>(atau usang <frame>). The viewport adalah persegi panjang dari yang diberikan documentterlihat dalam tab atau frame.
Bennett Brown
2
window.document atau dokumen sama sepanjang waktu?
BOZ
2
karena window adalah objek global - setiap properti / metode dapat diakses tanpa benar-benar menuliskan [window.] sehingga window.document dapat ditulis hanya sebagai dokumen, dan tentu saja menunjuk ke hal yang sama - seperti properti itu sendiri adalah beberapa cara yang sama hanya direferensikan.
Peter Aron Zentai
102

Nah, jendela adalah hal pertama yang dimuat ke browser. Objek jendela ini memiliki sebagian besar properti seperti panjang, innerWidth, innerHeight, nama, jika telah ditutup, orang tuanya, dan banyak lagi.

Lalu bagaimana dengan objek dokumen? Objek dokumen adalah html, aspx, php, atau dokumen lain yang akan dimuat ke browser. Dokumen sebenarnya dimuat di dalam objek jendela dan memiliki properti yang tersedia untuknya seperti judul, URL, cookie, dll. Apa artinya ini? Itu berarti jika Anda ingin mengakses properti untuk jendela itu adalah window.property, jika itu dokumen itu adalah window.document.property yang juga tersedia singkat sebagai document.property.

dom

Tampaknya cukup sederhana. Tetapi apa yang terjadi setelah IFRAME diperkenalkan?

iframe

Arlan T
sumber
14
Menyesatkan bagi seseorang yang mencoba mempelajari dasar-dasarnya: "Objek dokumen adalah html, aspx, php, atau dokumen lain yang akan dimuat ke dalam browser." Browser membuat HTML dan CSS dan mengeksekusi JavaScript. File dengan bahasa sisi server seperti PHP tidak terlihat oleh browser.
Bennett Brown
Ini adalah penjelasan yang sangat membantu diikuti oleh gambar untuk pemahaman yang lebih baik ..
Faris Rayhan
49

Secara singkat, dengan lebih detail di bawah ini,

  • window adalah konteks eksekusi dan objek global untuk JavaScript konteks itu
  • document berisi DOM, diinisialisasi dengan parsing HTML
  • screen menggambarkan layar penuh tampilan fisik

Lihat referensi W3C dan Mozilla untuk perincian tentang objek-objek ini. Hubungan paling mendasar di antara ketiganya adalah bahwa setiap tab peramban memiliki sendiri window, dan windowmemiliki window.documentdan window.screenproperti. Tab browser windowadalah konteks global, jadi documentdan screenlihat window.documentdan window.screen. Rincian lebih lanjut tentang tiga objek di bawah ini, berikut JavaScript Flanagan: Definitive Guide .

window

Setiap tab browser memiliki windowobjek tingkat atas sendiri . Setiap elemen <iframe>(dan usang <frame>) memiliki windowobjek sendiri juga, bersarang di dalam jendela induk. Masing-masing jendela ini mendapatkan objek global tersendiri. window.windowselalu merujuk window, tetapi window.parentdan window.topmungkin merujuk ke melampirkan jendela, memberikan akses ke konteks eksekusi lainnya. Selain documentdan screendijelaskan di bawah, windowproperti termasuk

  • setTimeout()dan setInterval()mengikat penangan acara ke timer
  • location memberikan URL saat ini
  • historydengan metode back()dan forward()memberikan riwayat tab yang bisa berubah
  • navigator menjelaskan perangkat lunak browser

document

Setiap windowobjek memiliki documentobjek yang akan dirender. Objek-objek ini menjadi bingung sebagian karena elemen-elemen HTML ditambahkan ke objek global ketika diberi id unik. Misalnya, dalam cuplikan HTML

<body>
  <p id="holyCow"> This is the first paragraph.</p>
</body>

elemen paragraf dapat dirujuk oleh salah satu dari yang berikut:

  • window.holyCow atau window["holyCow"]
  • document.getElementById("holyCow")
  • document.body.firstChild
  • document.body.children[0]

screen

The windowobjek juga memiliki screenobjek dengan sifat yang menggambarkan tampilan fisik:

  • properti layar widthdan heightmerupakan layar penuh

  • properti layar availWidthdan availHeighthapus bilah alat

Bagian layar yang menampilkan dokumen yang diberikan adalah viewport dalam JavaScript, yang berpotensi membingungkan karena kami menyebut bagian aplikasi dari layar sebagai jendela ketika berbicara tentang interaksi dengan sistem operasi. The getBoundingClientRect()Metode dari setiap documentelemen akan mengembalikan objek dengan top, left, bottom, dan rightsifat-sifat yang menggambarkan lokasi dari elemen di viewport.

Bennett Brown
sumber
ada instruksi yang setara untuk window.onloadmenggunakan objek dokumen?
FilipeCanatto
@FilipeCanatto lihat stackoverflow.com/questions/588040/…
Bennett Brown
48

Ini windowadalah objek global aktual.

The screenadalah layar, mengandung sifat tentang tampilan pengguna.

Di documentsitulah DOM berada.

Niet the Dark Absol
sumber
11
documentbisa juga bisa window.document, screenbisa window.screen, dan windowbisa window.window(atau window.window.window) :-P
Rocket Hazmat
6
@PeterAronZentai: Itu karena windowmerupakan variabel global, yang menjadikannya properti dari windowobjek global . :-)
Rocket Hazmat
1
Saya perlu membuka halaman baru dengan ajax, saya ingin mengganti seluruh halaman saat ini dengan yang baru. Haruskah saya menggunakan $ (dokumen) .load (halaman); atau $ (jendela) .load (halaman); ?
Martin AJ
11

itu windowberisi segalanya, jadi Anda bisa menelepon window.screendan window.documentmendapatkan elemen-elemen itu. Lihat biola ini, cukup cetak isi setiap objek: http://jsfiddle.net/JKirchartz/82rZu/

Anda juga dapat melihat konten objek di alat pembakar / dev seperti ini:

console.dir(window);
console.dir(document);
console.dir(screen);

windowadalah akar dari segalanya, screenhanya memiliki dimensi layar, dan documentmerupakan objek DOM teratas. sehingga Anda dapat menganggapnya windowseperti document...

JKirchartz
sumber
1

Jendela adalah hal pertama yang dimuat ke browser. Objek jendela ini memiliki sebagian besar properti seperti panjang, innerWidth, innerHeight, nama, jika telah ditutup, orang tuanya, dan banyak lagi.

Objek dokumen adalah html, aspx, php, atau dokumen lain yang akan dimuat ke browser. Dokumen sebenarnya dimuat di dalam objek jendela dan memiliki properti yang tersedia untuknya seperti judul, URL, cookie, dll. Apa artinya ini? Itu berarti jika Anda ingin mengakses properti untuk jendela itu adalah window.property, jika itu dokumen itu adalah window.document.property yang juga tersedia singkat sebagai document.property.

Manjunath Raddi
sumber