Kata pengantar
Fungsi DOM adalah untuk mengubah halaman web menjadi objek JavaScript, sehingga Anda dapat menggunakan JavaScript untuk melakukan berbagai operasi di halaman web (seperti menambahkan dan menghapus konten). Browser akan mengurai dokumen HTML menjadi serangkaian node berdasarkan model DOM, dan kemudian membentuk struktur pohon dari node ini. Unit komposisi terkecil dari DOM disebut node, dan struktur pohon dokumen (pohon DOM) terdiri dari 12 jenis node.
milik
Secara umum, node memiliki setidaknya tiga sifat dasar: nodetype , nodename dan nodevalue .
Jenis simpul yang berbeda, nilai -nilai dari ketiga atribut ini juga berbeda.
nodetype
Properti nodetype mengembalikan nilai konstan dari tipe simpul. Jenis yang berbeda sesuai dengan nilai konstan yang berbeda, dan 12 jenis sesuai dengan nilai konstan dari 1 hingga 12 masing -masing.
Elemen simpul node.element_node (1)
Atribut node node.attribute_node (2)
Node teks node.text_node (3)
Node cdata node.cdata_section_node (4)
Name Referensi Entitas Node Node.ENTRY_REFERENCE_NODE (5)
NODE NODE NODE NODE.ENTITY_NODE (6)
Instruksi proses node node.processing_instruction_node (7)
Komentar node node.comment_node (8)
Node dokumen node.document_node (9)
Jenis dokumen node node.document_type_node (10)
Node fragmen dokumen node.document_fragment_node (11)
DTD Node Node node.notation_node (12)
DOM mendefinisikan antarmuka simpul, yang diimplementasikan sebagai tipe simpul di JavaScript, dan semua objek DOM di IE8-browser diimplementasikan sebagai objek COM. Oleh karena itu, IE8-browser tidak mendukung penulisan objek node
// return 1 di browser standar, dan kesalahan dilaporkan di IE8-browser, mendorong node yang console.log (node.element_node); // 1
nodename
Properti Nodename Mengembalikan nama node
Nodevalue
Properti NodEvalue mengembalikan atau menetapkan nilai node saat ini, dalam format sebagai string
Selanjutnya, deskripsi terperinci akan dibuat dari 1 hingga 12 sesuai dengan urutan yang sesuai dari nilai konstan dari tipe node.
【1】 Node elemen
Elemen elemen node sesuai dengan elemen tag HTML dari halaman web. Nilai node nodetype node dari simpul elemen adalah 1, nama node nodename nilai adalah nama label huruf besar, dan nilai nodevalue adalah nol
Ambil elemen tubuh sebagai contoh
// 1 'body' nullconsole.log (document.body.nodetype, document.body.nodename, document.body.nodevalue) console.log (node.element_node === 1); // true
【2】 Node fitur
Atribut atribut elemen sesuai dengan atribut tag HTML di halaman web. Itu hanya ada di atribut atribut elemen dan bukan bagian dari pohon dokumen DOM. Node Node Nodetype dari simpul karakteristik adalah 2, Node Node Nodename Nilai adalah nama atribut, dan nilai nodevalue adalah nilai atribut
Sekarang, elemen div memiliki atribut id = "tes"
<Div id = "test"> </div> <script> var attr = test.attributes.id; // 2 'id' 'test'console.log (attr.nodetype, attr.nodename, attr.nodevalue) console.log (node.attribute_node === 2); // script> true>
【3】 Node teks
Teks teks teks mewakili konten tag HTML di halaman web. Nilai node nodetype node dari simpul teks adalah 3, nilai node nodename adalah '#text', dan nilai nodevalue adalah nilai konten label
Sekarang, isi elemen div adalah 'tes'
<Div id = "test"> test </div> <script> var txt = test.firstchild; // 3 '#text' 'test' console.log (txt.nodetype, txt.nodename, txt.nodevalue) console.log (node.text_node === 3);//script </script> True </script>
【4】 Node CDATA
Tipe cDAatasection hanya untuk dokumen berbasis XML dan hanya muncul dalam dokumen XML. Itu mewakili area CDATA dan formatnya secara umum
<! [CDATA []]>
Nilai nodetype tipe simpul dari tipe node ini adalah 4, nilai node nodename node adalah '#cdata-section', dan nilai nodevalue adalah konten di area cdata
【5】 Node Nama Referensi Entitas
Entitas adalah deklarasi yang menentukan nama yang digunakan dalam XML alih -alih konten atau tag. Suatu entitas berisi dua bagian. Pertama, nama harus terikat pada konten penggantian menggunakan deklarasi entitas. Deklarasi entitas dibuat dalam definisi Jenis Dokumen (DTD) atau skema XML menggunakan nama <! Entitas "Nilai"> Sintaks. Kedua, nama yang ditentukan dalam deklarasi entitas kemudian digunakan dalam XML. Saat digunakan dalam XML, nama ini disebut referensi entitas.
Jenis simpul nodetype name referensi entitas simpul entry_reference adalah 5, nama node nodename adalah nama referensi entitas, dan nodevalue adalah nol
// Nama Entitas <! Entity Publisher "Microsoft Press"> // Referensi Nama Entitas <Pubinfo> Diterbitkan oleh & Penerbit; </pubinfo>
【6】 Node Nama Entitas
Telah dijelaskan secara rinci di atas, jadi saya tidak akan mengulanginya
Node tipe simpul dari simpul ini adalah 6, nama node nodename adalah nama entitas, dan nodevalue adalah nol
【7】 Pengolahan Instruksi Node
Nodetype tipe simpul yang menangani Instruksi Node ProcessingInstruction memiliki nilai 7, nodename nama simpul memiliki nilai target, dan nodevalue memiliki seluruh konten tidak termasuk target
【8】 Node Anotasi
Komentar Komentar Komentar mewakili komentar HTML di halaman web. Nilai nodetype tipe simpul dari simpul beranotasi adalah 8, nilai nama node nodename adalah '#comment', dan nilai nodevalue adalah konten komentar
Sekarang, ada <!-Saya berkomentar konten-> di elemen div dengan id id myDiv
<Div id = "myDiv"> <!-Saya adalah konten komentar-> </div> <script> var com = myDiv.firstChild; // 8 '#comment' 'Saya adalah Konten Komentar'Console.log (com.nodetype, com.nodename, com.nodevalue) console.log (node.nodename, com.
【9】 Dokumen Node
Dokumen Node Dokumen mewakili dokumen HTML, juga dikenal sebagai node root, menunjuk ke objek dokumen. Nodetype tipe simpul dari simpul dokumen adalah 9, nama node nodename adalah '#document', dan nodevalue adalah nol
<script> // 9 "#document" nullconsole.log (document.nodetype, document.nodename, document.nodevalue) console.log (node.document_node === 9); // true </script>
【10】 Node Jenis Dokumen
DocumentType node documentType berisi semua informasi tentang doctype dokumen. Node node nodetype node dari simpul tipe dokumen adalah 10, node nama nodename nilai adalah nama doctype, dan nilai nodevalue adalah nol
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> dokumen </iteme> </head> <body> <script> var nodedocumentType = document.firstchild; // 10 "html" nullconsole.log (nodedocumentType.nodetype, nodedocumentType.nodename, nodedocumentType.nodevalue); console.log (node.document_type_node === 10); </script> </body> </html>
【11】 Dokumen Fragmen Node
Dokumen Fragmen Node DocumentFragment tidak memiliki tag yang sesuai dalam dokumen. Ini adalah dokumen ringan yang dapat berisi dan mengontrol node, tetapi tidak akan mengatasi sumber daya tambahan seperti dokumen lengkap. Nodetype tipe simpul dari simpul ini adalah 11, nama node nodename adalah '#document-fragment', dan nodevalue adalah nol
<script> var nodedocumentFragment = document.createDocumentFragment (); // 11 "#Document-Fragment" nullconsole.log (nodedocumentFragment.nodetype, nodedocumentfragment.nodename, nodedocumentfragment.nodevalue); console.log (node.document_fragment_node === 11); // true </script>
【12】 Node Deklarasi DTD
Notasi simpul deklarasi DTD mewakili simbol yang dinyatakan dalam DTD. Nodetype tipe simpul dari simpul ini adalah 12, nama node nodename adalah nama simbolis, dan nodevalue adalah nol
Meringkaskan
Di antara 12 jenis simpul DOM ini, beberapa cocok untuk dokumen XML, dan beberapa tidak umum digunakan. Adapun jenis yang umum digunakan, kami akan memperkenalkannya secara rinci nanti. Artikel ini hanya memberikan gambaran umum dari 12 jenis node ini. Saya harap artikel ini akan membantu semua orang.