Document Object Model , disingkat DOM, Cina:文档对象模型, adalah标准编程接口yang direkomendasikan oleh organisasi W3C untuk memproses bahasa markup yang dapat diperluas.
DOM Tree mengacu pada解析halaman HTML melalui DOM dan生成树状结构HTML tree dan访问方法yang sesuai. Dengan bantuan Pohon DOM, kita dapat secara langsung dan简易mengoperasikan setiap konten markup pada halaman HTML, seperti kode HTML berikut
<. html><kepala>
<title>Bermain dengan dom</title></head><body>
<p>Saya adalah simpul dom</p>
<p>
<p>hal hal</p>
</p></body></html> Diabstraksikan ke dalam pohon DOM sebagai berikut: 
Setelah memahami ilmu diatas, berikut tentang mempelajari API. Saya akan menjelaskan dari empat aspek: cara mendapatkan DOM, cara membuat dan menambahkan DOM, cara memodifikasi DOM dan cara
menghapus
Ada banyak API untuk mendapatkan DOM, tapi semuanya sangat sederhana, ayolah
:
document.getElementById("nama id"); Contoh:
<body>
<p id="p">Saya simpul p</p>
<skrip>
var p = dokumen.getElementById("p");
konsol.log(p);
</skrip></tubuh> 
Buka konsol dan Anda dapat melihat bahwa Anda berhasil mendapatkannya
2.
:
document.getElementsByTagName
("nama tag");
<p>Saya simpul p</p>
<p>Saya juga seorang simpul p</p>
<skrip>
var p = dokumen.getElementsByTagName("p");
konsol.log(p);
for (misalkan i = 0; i < p.length; i++) {
konsol.log(p[i]);
}
</skrip></tubuh> 
Catatan : Gunakan metode getElementsByTagName() untuk mengembalikan kumpulan objek dengan nama tag yang ditentukan. Karena yang diperoleh adalah kumpulan objek, maka kita perlu melakukan traverse jika ingin mengoperasikan elemen di dalamnya metode bersifat dinamis
:
document.getElementsByClassName("nama kelas"); Contoh:
<body>
<p class="p">Saya simpul p</p>
<p class="p">Saya simpul p</p>
<skrip>
var p = dokumen.getElementsByClassName("p");
konsol.log(p);
for (misalkan i = 0; i < p.length; i++) {
konsol.log(p[i]);
}
</skrip></tubuh> 
Ini juga sangat sederhana, ingatlah saja
sintaksis [yang disarankan] melalui api baru HTML5:
document.querySelector("Lihat contohuntuk
detailnya");
document.querySelectorAll
("Lihat contoh untuk detailnya");
<p class="p">Saya simpul p</p>
<p class="name">Bunga Pir</p>
<p id="info">Informasi</p>
<skrip>
// Dapatkan var dengan nama tag p = document.querySelector("p");
// Dapatkan melalui nama kelas, ingatlah untuk menambahkan var qname = document.querySelector(".name");
// Dapatkan berdasarkan id, ingatlah untuk menambahkan #
var info = dokumen.querySelector("#info");
// Dapatkan semua elemen yang cocok dan kembalikan array var all = document.querySelectorAll("p");
konsol.log(p);
konsol.log(qname);
konsol.log(info);
for (misalkan i = 0; i < semua.panjang; i++) {
konsol.log(semua[i]);
}
</skrip></tubuh> 
Seperti yang Anda lihat, penggunaan API baru HTML5 sangat fleksibel, jadi saya sangat suka menggunakan ini dan menyarankan Anda untuk menggunakan
Selain itu, ada beberapa elemen khusus yang memiliki metode perolehannya sendiri, seperti sebagai isi, Elemen html
Sintakselemen
:
document.body
;
<skrip>
var body = dokumen.body;
konsol.log(tubuh);
</skrip></tubuh> 
Seperti yang Anda lihat, seluruh isi elemen body telah berhasil diperoleh.
sintaks
document.documentElement;
contoh:
<body>
<skrip>
var html = dokumen.documentElement;
konsol.log(html);
</skrip></tubuh> 
Seperti yang Anda lihat, html seluruh halaman web telah diperoleh. Oke, sejauh ini akuisisi DOM telah berakhir. Sekarang mari kita mulai membuat dan menambahkan dom secara
dinamis
Mengoperasikan dom sama dengan bermain-main dengan data, menambah, menghapus, memodifikasi dan memeriksa, dan membuat dan menambahkan sama dengan menambahkan data, kita harus memiliki datanya terlebih dahulu, lalu menambahkannya Operasi DOM. Pertama, kita harus membuat DOM, lalu memberitahukan di mana menambahkannya. Akhirnya, operasi selesai. Mari kita pelajari cara membuat dom, dan cara menambahkan dom
sangat sederhana. jangan takut haha
Sintaks
:
document.createElement("Nama Elemen");
Jika Anda ingin membuat elemen p secara dinamis, Anda dapat menulisnya seperti ini. Hal yang sama berlaku untuk hal lainnya. Terapkan inferensi
var
= document.createElement("p"); .Gunakan sesuai dengan situasi.Satu di elemen induk.Tambahkan di akhir elemen anak, satu lagi untuk menambahkan setelah elemen anak yang ditentukan.Sintaks
penambahan
:
(
anak);
<p>
<a href="">Baidu</a>
</p>
<skrip>
var p = dokumen.createElement("p");
p.innerText = "Saya p"
var p = dokumen.querySelector("p");
p.appendChild(p);
</skrip></tubuh> 
Buat tag paragraf elemen p secara dinamis dan tulis teks "Saya p". Terakhir, dapatkan elemen p dan tambahkan p sebagai anak dari p. Metode penambahan ini ditambahkan di bagian akhir, sehingga efeknya seperti yang ditunjukkan pada gambar di atas.
Sintaks:
node.insertBefore(anak, elemen tertentu
Contoh:
<body>
<p>
<a href="">Baidu</a>
<span>Saya adik span</span>
</p>
<skrip>
var p = dokumen.createElement("p");
p.innerText = "Saya p"
var p = dokumen.querySelector("p");
var a = dokumen.querySelector("a");
//Buat p di bawah p, sebelum elemen a p.insertBefore(p, a);
</skrip></tubuh> 
Apakah ini akhirnya? Ya, bagaimana menurut Anda? Simpel banget kan? Simpel saja, tinggal praktek lagi. Oke langsung saja ke langkah berikutnya.
diringkas sebagai berikut:
Contoh 1: Dapatkan tag p pada halaman tersebut dan ubah kontennya menjadi "Zhou Qiluo"
<body>
<p>
<p></p>
</p>
<skrip>
var p = dokumen.querySelector("p");
p.innerText = "Zhou Qiluo";
</script></body> Contoh 2: Klik tombol untuk menghasilkan hyperlink Baidu
<body>
<p>
<button onclick="createBaidu()">Klik untuk membuat hyperlink Baidu</button>
</p>
<skrip>
fungsi buatBaidu() {
var p = dokumen.querySelector("p");
var a = dokumen.createElement("a");
a.href = "https://www.baidu.com";
a.innerText = "Cari saja di Baidu dan Anda akan tahu";
p.tambahkan(a);
}
</skrip></tubuh> 
Contoh 3: Klik tombol tersebut, warna teks pada tag p berubah menjadi hijau, dan kepala anjing
<body>diubah secara manual.
<p>
<button onclick="changeColor()">Klik untuk berubah menjadi hijau</button>
<p>Sebentar lagi aku akan berubah menjadi hijau</p>
</p>
<skrip>
fungsi perubahanWarna() {
var p = dokumen.querySelector("p");
p.style.color = "hijau";
}
</skrip></tubuh> 
Metode node.removeChild() menghapus node anak dari DOM dan mengembalikan node yang dihapus.
Sintaks
:
node.removeChild
(child);
<p>
<button onclick="removeP()">Klik untuk menghapus p</button>
<p>Saya p, waktunya akan habis sebentar lagi</p>
</p>
<skrip>
fungsi hapusP() {
var p = dokumen.querySelector("p");
var p = dokumen.querySelector("p");
p.removeChild(p);
}
</skrip></tubuh> 