APA ITU DOM?
1. Pendahuluan
Model Objek Dokumen (DOM) adalah antarmuka pemrograman standar yang direkomendasikan oleh organisasi W3C untuk menangani bahasa logo yang dapat diperluas. Model objek dokumen dapat ditelusuri kembali ke "pertempuran browser" antara Microsoft dan Netscape pada akhir 1990 -an. Untuk melawan hidup dan mati dengan JScript di JavaScript, kedua belah pihak memberi browser fungsi yang kuat dalam skala besar. Microsoft telah menambahkan banyak hal eksklusif ke teknologi halaman web, termasuk VBScript, ActiveX, dan format DHTML Microsoft sendiri, yang membuat banyak halaman web tidak dapat ditampilkan secara normal menggunakan platform dan browser non-Microsoft. Dom adalah karya agung yang diseduh pada waktu itu.
DOM (Model Objek Dokumen) adalah antarmuka program aplikasi (API) untuk HTML dan XML. DOM akan merencanakan seluruh halaman ke dalam dokumen yang terdiri dari level node.
Model objek dokumen yang disebut sebenarnya adalah representasi internal dari berbagai elemen dalam halaman web HTML, seperti header, paragraf, daftar, gaya, ID, dll. Dalam HTML. Semua elemen dapat diakses melalui DOM.
JavaScript pada akhirnya perlu mengoperasikan halaman HTML dan mengubah HTML menjadi DHTML, dan DOM diharuskan untuk mengoperasikan halaman HTML. DOM adalah untuk mensimulasikan halaman HTML menjadi suatu objek. Jika JavaScript hanya melakukan beberapa perhitungan, loop dan operasi lainnya, dan tidak dapat mengoperasikan HTML, itu akan kehilangan artinya.
DOM adalah model halaman HTML. Setiap tag digunakan sebagai objek. JavaScript dapat mengontrol kotak teks, lapisan, dan elemen teks secara terprogram di halaman web dengan memanggil properti dan metode di DOM. Misalnya, dengan mengoperasikan objek DOM dari kotak teks, Anda dapat membaca nilai -nilai di kotak teks dan mengatur nilai -nilai di kotak teks.
2. Ilustrasi
About window the entire page or window is a window object----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Variabel dan metode yang ditentukan dalam halaman adalah jendela
window.id
document.geteLementById ()
Saat menggunakan properti dan metode objek jendela, jendela dapat dihilangkan.
Misalnya:
window.alert ('halo');
Dapat dihilangkan untuk mengingatkan ('halo');
window.document dapat ditulis langsung dengan dokumen
Jika Anda tidak dapat menulis jendela, jangan menulisnya, karena ini dapat mengurangi jumlah byte dalam file JS.
Salinan kode adalah sebagai berikut:
window.alert ('halo semuanya!'); // kotak dialog peringatan muncul
window.confirm ('Apakah Anda yakin ingin menghapusnya?'); // Konfirmasi, Batalkan kotak dialog, kembalikan benar atau salah;
window.navigate (url); // Navigasi ulang halaman web ke URL, mendukung IE dan opera11.6. Tidak disarankan, beberapa browser tidak berfungsi,
Disarankan untuk menggunakan window.location.href = 'url'; // mendukung sebagian besar browser
Mengoperasikan elemen DOM secara dinamis
1. Dapatkan DOM
getElementById (), (sangat umum digunakan), dapatkan objek sesuai dengan ID elemen, dan ID di halaman web tidak dapat diulang. Anda juga dapat merujuk ke elemen secara langsung melalui ID elemen, tetapi ada ruang lingkup yang valid.
getElementsbyname (), dapatkan objek sesuai dengan nama elemen. Karena nama -nama elemen di halaman dapat diulang, seperti nama beberapa radiobuttons, nilai pengembalian GetElementsByName adalah array objek.
GetElementsByTagname (), dapatkan serangkaian elemen dengan nama tag yang ditentukan. Misalnya, GetElementsByTagname ("Input") bisa mendapatkan semua tag <sput>. *Menunjukkan semua label
2. Tambah, Hapus, Ganti
Document.write hanya dapat dibuat secara dinamis selama pemuatan halaman.
Anda dapat memanggil metode pembuatan dokumen untuk membuat objek DOM dengan tag yang ditentukan, dan kemudian menambahkan elemen yang baru dibuat ke elemen yang sesuai dengan memanggil AppendChild (); Metode elemen tertentu. // objek elemen induk.removechild (objek elemen anak); Hapus elemen.
createelement ('elemen'); Buat node
AppendChild (node); Tambahkan simpul
Removechild (node); Removechild (node); Hapus node
replacechild (baru, lama); Ganti node
insertBefore (baru, lihat); Tambahkan node ke depan (masukkan ke depan node)
metode:
milik:
FirstChild
LastChild
3. Gunakan innerHTML atau createElement (), AppendChild () dan Removechild ()?
Saat memanipulasi elemen halaman, haruskah kita menggunakan innerhtml, createelement (), appendChild () dan removechild ()?
1. Saat melakukan sejumlah besar operasi node, kinerja menggunakan InnerHTML lebih baik daripada operasi DOM yang sering (ada parser HTML yang ditulis secara khusus dalam C atau C ++.). Pertama -tama tulis kode HTML halaman, lalu hubungi bagian dalam HTML sekali, alih -alih berulang kali memanggil innerHTML.
2. Untuk menghapus node menggunakan innerHTML = '', akan ada masalah memori dalam beberapa kasus. Misalnya: Ada banyak elemen lain di bawah DIV, dan setiap elemen terikat pada penangan acara. Pada saat ini, bagian dalam HTML hanya menghilangkan elemen saat ini dari pohon simpul, tetapi penangan peristiwa itu masih menempati memori.
Gaya Operasi JS
Gaya elemen adalah properti ClassName.
(Kelas adalah kata yang dipesan dalam JavaScript. Atribut tidak dapat menggunakan kata kunci atau kata -kata yang dipesan, sehingga menjadi classname) Pengaruh lampu switching halaman web.
Ubah gaya elemen tidak mungkin ini. STYLE = "Latar Belakang: Merah".
Gunakan "Gaya. Nama atribut" untuk memodifikasi atribut gaya secara terpisah. Perhatikan bahwa ketika nama atribut dioperasikan dalam JavaScript di CSS, nama atribut mungkin berbeda, terutama berfokus pada atribut yang mengandung - dalam atribut, karena - tidak dapat digunakan dalam JavaScript.
Saat mengoperasikan gaya pelampung
Yaitu: obj.style.stylefloat = 'benar';
Browser Lainnya: Obj.Style.CSSFLOAT = 'Right';
Bentuk objek
Umumnya digunakan: klik (), fokus (), blur (); // peralatan adalah peristiwa yang memicu klik elemen, memperoleh fokus dan kehilangan fokus melalui program.
Objek bentuk adalah objek DOM dari formulir.
Metode: Kirim () mengirimkan formulir, tetapi acara Onsubmit tidak akan dipicu.
Menerapkan AutoPost, yaitu, halaman dikirimkan segera setelah fokus meninggalkan kontrol, alih -alih mengirimkan hanya setelah tombol kirim dikirimkan. Ketika kursor pergi, peristiwa Onblur dipicu, dan metode pengiriman formulir dipanggil di Onblur.
Setelah mengklik Kirim, acara Formulir Onsubmit dipicu. Verifikasi data dapat dilakukan di Onsubmit. Jika ada masalah dengan data, kembalikan false untuk membatalkan pengiriman
Di atas adalah pemahaman pribadi saya tentang DOM Javascript, dan saya harap semua orang bisa menyukainya.