Di awal artikel, saya ingin menyebutkan secara umum , apa itu DOM dan apa itu BOM , karena artikel ini pada akhirnya ditujukan kepada teman-teman yang memiliki dasar JavaScript tertentu, namun belum memahami atau bahkan mengetahui tentang DOM dan BOM. .
Namun, sebelum kita berbicara tentang apa itu DOM dan apa itu BOM , izinkan saya menunjukkan kepada Anda keseluruhan struktur Javascript :
Pada gambar di atas kita melihat ada empat elemen: JavaScript, ECMAScript, DOM dan BOM . Lalu apa hubungan keempatnya? Gunakan persamaan untuk meringkas hubungan di antara keduanya:
JavaScript = ECMAscript + BOM + DOM
Mari kita berikan gambarannya satu per satu :
ECMAscript:
ECMAScript adalah bahasa yang disahkan oleh ECMA International (sebelumnya Asosiasi Produsen Komputer Eropa) melalui ECMA-262 adalah bahasa pemrograman skrip standar . Ini adalah standar untuk JavaScript (disingkat JS), dan browser menerapkan standar ini .
ECMAscript lebih seperti peraturan yang mengatur bagaimana setiap browser mengeksekusi sintaks JavaScript , karena kita tahu bahwa JavaScript adalah bahasa scripting yang berjalan di browser! Ada peraturannya, tapi kami masih kekurangan cara untuk berinteraksi dengan setiap elemen di halaman . Saat ini, DOM berikut telah lahir!
DOM:
DOM ( Document Object Model ) adalah antarmuka pemrograman aplikasi yang tidak bergantung pada bahasa untuk mengoperasikan dokumen xml dan html .
Untuk JavaScript: Untuk mengaktifkan JavaScript untuk mengoperasikan Html , JavaScript memiliki antarmuka pemrograman DOM sendiri .
Dalam satu kalimat: DOM menyediakan JavaScript dengan "metode" untuk mengakses dan mengoperasikan elemen HTML (alasan mengapa kami tidak menggunakan kata antarmuka adalah karena kami takut beberapa teman akan ketakutan ketika melihat antarmuka, tetapi kenyataannya deskripsi paling akurat adalah antarmuka JavaScript) disediakan )
BOM:
BOM adalah Model Objek Browser, model objek browser . BOM adalah antarmuka yang muncul untuk mengontrol perilaku browser .
Untuk JavaScript: Untuk memungkinkan JavaScript mengontrol perilaku browser , JavaScript memiliki antarmuka BOM sendiri .
Dalam satu kalimat: BOM menyediakan JavaScript dengan "metode" untuk mengontrol perilaku browser.
Terakhir, di antara tiga komponen JavaScript di atas, ECMscript adalah spesifikasinya , sedangkan dua sisanya menyediakan "metode", masing-masing sesuai dengan elemen HTML dan browser , jadi di bawah ini kami fokus pada dua yang terakhir: DOM dan BOM, memberikan penjelasan sistematis . Karena untuk pemula, penjelasan saya berikut ini akan sesederhana dan semudah mungkin dipahami. Jika Anda tidak memiliki dasar yang baik, Anda bisa memakannya dengan percaya diri !
Pertama, mari kita jelaskan pengetahuan terkait DOM . Saya membaginya menjadi dua bagian :
Oke, jadi apa itu pohon DOM?
Beberapa pemula yang telah mempelajari DOM mungkin sedikit asing dengan kata ini, namun kenyataannya, pohon DOM bukanlah sesuatu yang fantasi, sebaliknya, bagi staf front-end, pohon DOM adalah HTML dari halaman yang Anda proses setiap hari. Pohon itu terdiri dari unsur-unsur:
Pada pohon BOM , setiap node dapat memiliki dua identitas: dapat berupa node anak dari node induk, atau dapat juga menjadi node induk dari node anak lainnya. Mari kita amati bersama kode berikut :
<!DOCTYPE html>
<htmllang="id">
<kepala>
<meta charset="UTF-8">
<title>DOM_demo</title>
</kepala>
<tubuh>
<p>
<a href="https://blog.csdn.net/qq_52736131">Udang karang menari tango</a>
</p>
</tubuh>
</html> Untuk kode di atas, pohon DOM -nya harus seperti ini:
Saat ini ada yang ingin bertanya, apakah menurut Anda pohon DOM selama ini ada hubungannya dengan pengoperasian elemen html ?
Jawabannya sangat relevan, dan hanya dengan memahami struktur pohon DOM pada dokumen kita dapat mengoperasikan elemen DOM secara akurat dan efektif , jika tidak, berbagai bug yang tidak terduga akan muncul. Sebelum kita mengoperasikan elemen HTML suatu halaman, kita harus memiliki gambaran yang jelas tentang DOM seluruh halaman . Bahkan jika kita tidak benar-benar menggambar, kita harus memiliki struktur konteks yang jelas dalam pikiran kita.
Mengenai beberapa metode umum pengoperasian elemen html di DOM dalam JavaScript , saya telah membaginya menjadi beberapa sub-bagian untuk diperkenalkan kepada Anda:
// 1. Pass Get nilai atribut id elemen, dan mengembalikan objek elemen var element = document.getElementById(id_content) //2. Dapatkan elemen melalui nilai atribut namanya, dan kembalikan array objek elemen var element_list = document.getElementsByName(name_content) //3. Dapatkan elemen melalui nilai atribut kelas elemen, dan kembalikan array objek elemen var element_list = document.getElementsByClassName(class_content) //4. Dapatkan elemen melalui nama tag, dan kembalikan array objek elemen var element_list = document.getElementsByTagName(tagName)
//1. Mendapatkan nilai atribut elemen. Parameter yang diteruskan secara alami adalah nama atribut, seperti kelas, id, href var attr = elemen.getAttribute(attribute_name) //2. Tetapkan nilai atribut elemen. Parameter yang diteruskan tentu saja adalah nama atribut elemen dan nilai atribut terkait yang akan ditetapkan elemen.setAttribute(attribute_name,attribute_value)
//1. Buat elemen html, dan parameter yang diteruskan adalah tipe elemen, seperti p, h1-5, a, ambil p sebagai contoh di bawah var element = document.createElement( "P") //2. Buat node teks dan teruskan konten teks yang sesuai (perhatikan bahwa ini adalah node teks, bukan elemen html) var text_node = dokumen.createTextNode(teks) //3. Buat node atribut, dan parameter yang diteruskan adalah nama atribut yang sesuai var attr_node = document.createAttribute(attribute_name) element.setAttributeNode(attr_node)
Berikan perhatian khusus pada yang ketiga. Metode pembuatan node atribut ini harus dicocokkan dengan elemen tertentu , yaitu, Anda harus terlebih dahulu mendapatkan elemen elemen tertentu, membuat node atribut, dan terakhir menambahkan ini atribut node ke elemen ini ( setAttributeNode) .
//1. Tambahkan node ke akhir elemen. Parameter yang diteruskan adalah tipe node element.appendChild(Node) //2. Sisipkan node di depan node yang ada di dalam elemen, dan tetap masukkan elemen parameter tipe node.insertBefore(new_Node, existing_Node).
Perhatikan bahwa sebelum menambahkan node , Anda harus membuat node terlebih dahulu, dan di pada saat yang sama Pilih elemen simpul induk . Pada metode kedua, Anda bahkan harus menemukan simpul saudara di belakang posisi penyisipan .
//
Menghapus node di dalam elemen. Parameter yang diteruskan adalah elemen parameter tipe node.removeChild(Node).
Terakhir, beberapa atribut DOM yang umum :
//1. Dapatkan node induk dari elemen saat ini var element_father = element.parentNode //2. Dapatkan node anak tipe elemen html dari elemen saat ini var element_son = element.children //3. Dapatkan semua jenis node anak dari elemen saat ini, termasuk elemen html, teks, dan atribut var element_son = element.childNodes //4. Dapatkan node anak pertama dari elemen saat ini var element_first = element.firstChild //5. Dapatkan elemen saudara sebelumnya dari elemen saat ini var element_pre = element.previousSibling //6. Dapatkan elemen saudara berikutnya dari elemen saat ini var element_next = element.nextSibling //7. Dapatkan semua teks elemen saat ini, termasuk kode sumber html dan teks var element_innerHTML = element.innerHTML //8. Dapatkan semua teks dari elemen saat ini, tidak termasuk kode sumber html var element_innerTEXT = element.innerText.
Diantaranya, yang ketujuh berarti mengubah kode html dan teks dalam elemen menjadi text , dan kode html asli dijalankan. , mengubahnya menjadi teks sama dengan mengubahnya menjadi string biasa!
Selanjutnya kita akan membahas kembali tentang BOM. Karena keterbatasan tempat, maka BOM tidak akan dijelaskan secara detail (kepraktisannya memang tidak sehebat DOM). Mari kita tinjau pengenalan tentang BOM di awal:
BOM menyediakan beberapa "metode" untuk JavaScript untuk mengoperasikan browser.
Pertama, mari kita gunakan gambar untuk memilah struktur keseluruhan BOM. Mirip dengan DOM, BOM juga memiliki struktur Pohon:
Dari gambar di atas kita dapat melihat:
jendela adalah bagian atas dari seluruh rantai makanan pohon BOM , sehingga setiap jendela yang baru dibuka dianggap sebagai objek jendela.
Objek jendela mempunyai properti dan metode umum berikut:
| Properti/Metode | Arti |
| pembuka | Jendela induk dari |
| panjang | jendela saat iniJumlah frame dalam |
| dokumen | jendelaObjek dokumen yang saat ini ditampilkan di jendela |
| alert(string) | Membuat kotak dialog peringatan dan menampilkan pesan |
| close() | Tutup jendela |
| konfirmasi() | Buat kotak dialog yang memerlukan konfirmasi pengguna |
| buka(url, nama, [pilihan]) | Buka jendela baru dan kembalikan objek jendela baru |
| prompt(teks, defaultInput) | Buat kotak dialog yang mengharuskan pengguna memasukkan informasi |
| setInterval(ekspresi, milidetik) | menghitung ekspresi setelah interval waktu yang ditentukan |
| setInterval(fungsi, mili enconds, [argumen]) | memanggil fungsi setTimeout(ekspresi, mili detik) setelah interval waktu yang ditentukan |
| setTimeout(ekspresi, mili detik | |
| ) | setelah penghitung waktu berakhir | menghitung fungsi setelah penghitung waktu berakhir. |
Diantaranya, Anda dapat melihat bahwa ada fungsi alert() di atas , karena ketika kita mempelajari JavaScript, sebagian besar kami menggunakan jendela pop-up fungsi alert() sebagai aliran input dan output. Ini adalah demo pertama saya , jadi ketika Anda melihat ini, Anda mungkin bertanya:
Ketika saya menggunakan fungsi alert(), sepertinya jendela itu tidak disebutkan. Jadi, apakah alert() di sini sama dengan alert() yang saya pelajari sebelumnya ? Jawabannya begini:
kedua alert() ini memang memiliki fungsi yang sama . Alasan mengapa window dapat dihilangkan adalah karena semua properti dan metode window dapat diekspresikan dalam dua cara :
(1) window.property/window.
(2) Panggilan atribut/metode langsung ()
bukan hanya alert(), semua atribut dan fungsi jendela di atas valid, teman-teman yang berminat dapat mencobanya sendiri.
Apa yang dimaksud dengan objek lokasi ?
Objek lokasi adalah atribut objek jendela yang menyediakan informasi tentang dokumen yang dimuat di jendela saat ini dan juga menyediakan beberapa fungsi navigasi.
Objek lokasi memiliki atribut dan metode umum berikut:
| Konten | atribut/metode | |
| host | : nomor port | |
| host | nama host | |
| href | seluruh nama jalur URL | |
| nama | jalur | |
| nomor | port | |
| protokol protokol | bagian | |
| string kueri | pencarian | |
| reload() | memuat ulang URL saat ini | |
| menggunakan | repalce() | URL baru menggantikan halaman saat ini. |
Faktanya, jika kita mengamati diagram struktur di atas dengan cermat, kita akan menemukan bahwa
objek lokasi tidak hanya merupakan atribut dari objek jendela, tetapi juga merupakan atribut dari objek dokumen.
Artinya:
window.location = lokasi = dokumen.lokasi
Apa yang dimaksud dengan objek sejarah ?
Objek riwayat adalah atribut dari objek jendela yang menyimpan catatan akses Internet pengguna. Stempel waktu catatan ini dihitung sejak jendela dibuka.
Objek sejarah memiliki atribut dan metode umum berikut:
| deskripsi | atribut/metode |
| Jumlah | catatan dalam objek sejarah |
| back() | menuju ke URL sebelumnya dari entri riwayat browser, mirip dengan mundur ke |
| depan () | menuju ke URL berikutnya dari entri riwayat browser, mirip dengan |
| maju (num) | Browser bergerak maju atau mundur dalam objek riwayat |
Terakhir, mari kita perkenalkan objek navigator :
Objek navigator adalah atribut jendela di BOM yang mengidentifikasi browser klien.
Beberapa atribut umum yang terkait dengan navigator:
| deskripsi | atribut |
| appName | nama lengkap browser dan versi |
| platform | sistem tempat browser |
| plugin | susunan informasi plug-in yang dipasang di browser |
| userAgent | string agen pengguna browser |
| userLanguage | bahasa default sistem operasi |