Apa perbedaan antara jendela, layar, dan dokumen dalam Javascript?
Jawaban:
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.
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.
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.
Tampaknya cukup sederhana. Tetapi apa yang terjadi setelah IFRAME diperkenalkan?
Secara singkat, dengan lebih detail di bawah ini,
windowadalah konteks eksekusi dan objek global untuk JavaScript konteks itudocumentberisi DOM, diinisialisasi dengan parsing HTMLscreenmenggambarkan 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()dansetInterval()mengikat penangan acara ke timerlocationmemberikan URL saat inihistorydengan metodeback()danforward()memberikan riwayat tab yang bisa berubahnavigatormenjelaskan 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.holyCowatauwindow["holyCow"]document.getElementById("holyCow")document.body.firstChilddocument.body.children[0]
screen
The windowobjek juga memiliki screenobjek dengan sifat yang menggambarkan tampilan fisik:
properti layar
widthdanheightmerupakan layar penuhproperti layar
availWidthdanavailHeighthapus 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.
window.onloadmenggunakan objek dokumen?
Ini windowadalah objek global aktual.
The screenadalah layar, mengandung sifat tentang tampilan pengguna.
Di documentsitulah DOM berada.
documentbisa juga bisa window.document, screenbisa window.screen, dan windowbisa window.window(atau window.window.window) :-P
windowmerupakan variabel global, yang menjadikannya properti dari windowobjek global . :-)
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...
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.