'Seni Pengaturcaraan DOM JavaScript' Nota Bacaan Asas DOM_javascript kemahiran

DOM
         
DOM: Model Objek Dokumen;

Nod

Nod unsur: Atom DOM ialah nod unsur. Elemen seperti ,

,

. Elemen boleh mengandungi elemen lain. Satu-satunya elemen yang tidak terkandung dalam elemen lain ialah

Nod teks: Dalam dokumen XHTML, nod teks sentiasa disertakan di dalam nod elemen.

Nod atribut: Nod atribut digunakan untuk memberikan penerangan yang lebih khusus tentang elemen. Contohnya, hampir setiap elemen mempunyai atribut tajuk dan kita boleh menggunakan atribut ini untuk menerangkan dengan tepat perkara yang terkandung dalam elemen:

 

Jangan lupa beli barang ini.

Dalam DOM, title="a gentle reminder" ialah nod atribut.

CSS
Dapatkan elemen

Terdapat tiga kaedah untuk mendapatkan nod elemen: getElementById, getElementsByTagName dan getElementsByClassName.
GetElementsByTagName membenarkan kad bebas sebagai parameternya, yang bermaksud bahawa setiap elemen dalam dokumen akan mempunyai tempat dalam tatasusunan yang dikembalikan oleh fungsi ini. Aksara kad bebas ("*") mesti disertakan dalam tanda petikan untuk membezakannya daripada operasi pendaraban.

Anda juga boleh menggabungkan getElementById dan getElementsByTagName. Seperti yang ditunjukkan di bawah:

Salin kod Kod adalah seperti berikut:
    var shopping = document.getElementById("purchase");
    var item = shopping.getElementsByTagName("*");



Dengan cara ini anda boleh mendapatkan bilangan elemen yang mengandungi nilai atribut id pembelian.

Kaedah getElementsByClassName hanya disokong oleh penyemak imbas yang lebih baharu. Untuk mengimbangi ini, pengaturcara skrip DOM perlu menggunakan kaedah DOM sedia ada untuk melaksanakan getElementsByClassName mereka sendiri. Dalam kebanyakan kes, proses pelaksanaannya hampir serupa dengan getElementsByClassName berikut:

Salin kod Kod adalah seperti berikut:
Fungsi getElementsByClassName(nod, nama kelas){
If(node.getElementsByClassName){
             kembalikan node.getElementsByClassName(classname);
         }lain{
        hasil var = Array baharu();
            var elems = node.getElementsByTagName("*");
untuk(var i=0;i If(elems[i].className.indexOf(classname) != -1){
keputusan[results.length] = elem[i];
            }
         }
         kembalikan hasil;
}
}



Fungsi getElementsByClassName ini menerima dua parameter Nod pertama mewakili titik permulaan elemen carian dalam pepohon DOM, dan nama kelas kedua ialah nama kelas yang akan dicari.
Mendapatkan dan menetapkan sifat

getAttribute ialah fungsi dengan hanya satu parameter - nama atribut yang anda ingin tanyakan:

Salin kod Kod adalah seperti berikut:
object.getAttribute(attribute)



setAttribute() membenarkan kami mengubah suai nilai nod atribut. Selepas mengubah suai dokumen melalui setAttribute, apabila anda melihat kod sumber dokumen melalui pilihan sumber paparan penyemak imbas, anda masih akan melihat nilai atribut sebelum perubahan Dalam erti kata lain, pengubahsuaian yang dibuat oleh setAttribute tidak akan berubah dicerminkan dalam kod sumber dokumen itu sendiri. Fenomena "ketidakkonsistenan antara rupa dan dalam" ini datang daripada mod kerja DOM: kandungan statik dokumen dimuatkan dahulu, dan kemudian segar semula dinamik tidak menjejaskan kandungan statik dokumen. Inilah kuasa sebenar DOM: menyegarkan kandungan halaman tanpa memuat semula halaman dalam penyemak imbas.