Rumah > Artikel > hujung hadapan web > Dom dan Dom Maya

Dom dan Dom Maya

Susan Sarandonasal: 2024-11-02 02:33:03611semak imbas

Dalam artikel ini, kami akan meneliti dom secara terperinci dan apakah itu dom maya.

Apakah itu DOM (Document Objec Model) ?

Apabila halaman web dimuatkan ke dalam penyemak imbas, penyemak imbas menjana** HTML** untuk memaparkan halaman yang diminta kepada . Struktur html ini seperti pokok. DOM terbentuk hasil daripada menukar kandungan dokumen web (HTML atau XML) kepada struktur berorientasikan objek oleh penyemak imbas. Terima kasih kepada struktur ini, kandungan halaman adalah disusun dalam struktur pokok dalam penyemak imbas dan setiap teg atau kandungan HTML diwakili sebagai "nod".

Sekarang teroka model objek dokumen :

Mari kita tulis contoh kod untuk mengakses objek dokumen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document object model</title>
</head>
<body>
    <div class="card" style="width: 18rem;">
        <img class="card-img-top"  alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Lorem, ipsum dolor.</h5>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, tenetur!</p>
          <a href="#" class="btn btn-primary">Lorem, ipsum.</a>
        </div>
      </div>


    <script src="/script.js"></script>
</body>
</html>

console.log(document)

Output :

Dom and Virtual Dom

Kami boleh mengakses dom dengan console.log(dokumen). Apabila kami meneliti objek Dokumen, kami faham bahawa objek ini mewakili dokumen HTML. Dalam erti kata lain, objek dokumen mengandungi semua teg dalam dokumen HTML.

Dengan Javascript, kami boleh mengakses teg di dalam objek dokumen dan memanipulasi teg di dalam objek dokumen ini untuk mencipta halaman web dinamik. Mari kita berikan contoh cara mengakses :

const wrapper = document.getElementById("card")

console.log(wrapper)

Output:

Dom and Virtual Dom

Apakah DOM Maya?

Dom and Virtual Dom

Kini kami tahu bahawa cara paling mudah untuk menukar dom ("Tukar HTML") ialah menukar sifat innerHTML dalam elemen. Kaedah mengubah suai html ini tidak prestasi dengan baik dalam DOM mengecat semula (" Mengemas kini perkara yang pengguna lihat "). Ini kerana innerHTML perlu menghuraikan nod DOM daripada rentetan, praproses dan menambahkannya. jika terdapat terlalu banyak mutasi html pada halaman web, masalah prestasi akan berlaku.

Jadi, bagaimanakah isu prestasi diselesaikan?

Masalah ini telah dibetulkan dengan mencipta DOM maya. DOM maya ialah salinan DOM sebenar yang disimpan dalam ingatan. Apabila pengguna berinteraksi dengan halaman web dan keadaan halaman web dikemas kini, DOM maya baharu dicipta dalam ingatan. DOM maya baharu ini dibandingkan dengan DOM maya sebelumnya untuk mengenal pasti perubahan dan perubahan ini digunakan pada DOM sebenar untuk ditunjukkan kepada pengguna.

Ini ialah logik kerja perpustakaan moden yang anda gunakan dan menggunakan algoritma dif sebagai perbandingan. mereka semua menggunakan DOM maya. Tetapi walaupun pendekatan DOM maya adalah pantas, terdapat perkara yang perlu dipertimbangkan untuk prestasi. Perubahan dalam domain maya menjadikan seluruh halaman web Perpustakaan mempunyai cangkuk untuk pengoptimuman prestasi

Kesimpulan

dalam artikel ini, kami telah mengkaji apakah dom dan DOM maya itu. Kami mendapati mengapa dom maya digunakan. Kini anda tahu apa itu dom dan dom maya.

Atas ialah kandungan terperinci Dom dan Dom Maya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html String Object if for xml Property append copy console dom this innerHTML display issue Access

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Mendapatkan Teks Pilihan Berdasarkan Nilai dalam jQuery?Artikel seterusnya：Bagaimana untuk Mendapatkan Teks Pilihan Berdasarkan Nilai dalam jQuery?

Artikel berkaitan

Lihat lagi