Struktur dan sifat konten
nodetype
Semua node memiliki jenis, dan ada total 12 jenis node.
Salinan kode adalah sebagai berikut:
Node antarmuka {
// nodetype
const unsigned short element_node = 1;
const unsigned short attribute_node = 2;
const unsigned short text_node = 3;
const unsigned pendek cdata_section_node = 4;
const unsigned short entity_reference_node = 5;
const unsigned short entity_node = 6;
const unsigned short processing_instruction_node = 7;
const unsigned short comment_node = 8;
const unsigned short document_node = 9;
const unsigned short document_type_node = 10;
const unsigned short document_fragment_node = 11;
const unsigned short notation_node = 12;
...
}
Dua node yang paling penting adalah node elemen (1) dan node teks (3). Sisanya jarang digunakan.
Misalnya, saat mendaftarkan semua node elemen anak, kami dapat mengulanginya dan menggunakan Childnodes [i] .nodetype! = 1 untuk mendeteksi.
Ini kode implementasinya:
Salinan kode adalah sebagai berikut:
<body>
<div> Pembaca yang diizinkan: </div>
<ul>
<li> John </li>
<li> Bob </li>
</ul>
<!-Node komentar->
<script>
var childnodes = document.body.childnodes
untuk (var i = 0; i <childnodes.length; i ++) {
if (childnodes [i] .nodetype! = 1) Lanjutkan
Peringatan (Childnodes [i])
}
</script>
</body>
*memikirkan
Apa yang akan diminta kode berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<body>
<script>
peringatan (document.body.lastchild.nodetype)
</script>
</body>
</html>
nodename, tagname
Baik nodename dan tagname berisi nama node.
Untuk document.body
waspada (document.body.nodename) // body
Semua nodename di HTML akan dikapitalisasi.
Saat nodename tidak dikapitalisasi
Situasi ini jarang terjadi, jika Anda penasaran, Anda dapat membaca yang berikut.
Anda mungkin sudah tahu bahwa ada dua cara bagi browser untuk menguraikan: pola html dan pola __xml. Biasanya, skema HTML digunakan, tetapi ketika teknologi XMLHTTPREQUEST ES digunakan untuk mendapatkan dokumen XML, skema XML digunakan.
Pola XML juga digunakan dalam Firefox ketika tipe konten dari dokumen XHTML diatur ke XMLISH.
Dalam mode __XML, nama simpul akan dipertahankan, sehingga tubuh atau tubuh dapat muncul.
Oleh karena itu, jika dokumen XML ke HTML dimuat dari server melalui teknologi XMLHTTPREQUESTED, nama simpul akan disimpan.
Nodename dan __tagname__ adalah sama untuk elemen.
Namun, node non-elemen juga memiliki atribut nodename, di mana mereka memiliki nilai khusus:
Peringatan (Document.nodename) // #Document
Sebagian besar tipe simpul tidak memiliki atribut tagname, dan tagname dari node dijelaskan di IE adalah!.
Oleh karena itu, secara umum, nodename lebih bermakna daripada tagname. Tapi tagname seperti versi yang disederhanakan, jadi ketika Anda hanya memproses node elemen, Anda dapat menggunakannya.
BUTNHTML
InnerHTML adalah bagian dari standar HTML5. Silakan lihat tautannya untuk detailnya
Ini memungkinkan akses ke konten simpul dalam teks. Contoh berikut akan menghasilkan semua konten dokumen.body dan menggantinya dengan konten baru.
Salinan kode adalah sebagai berikut:
<body>
<p> Paragraf </p>
<div> dan div </div>
<script>
Peringatan (document.body.innerhtml) // Baca konten saat ini
document.body.innerhtml = 'yaaahoo!' // ganti konten
</script>
</body>
InnerHTML akan berisi HTML yang efisien. Tetapi browser juga dapat mengurai HTML yang cacat.
InnerHTML dapat digunakan di node elemen apa pun. Ini sangat, sangat berguna.
jebakan dalamHTML
InnerHTML tidak sesederhana kelihatannya. Ia memiliki beberapa jebakan yang menunggu para pemula, dan kadang -kadang pemrogram yang berpengalaman tidak dapat menghindarinya.
InnerHtml dari node __table__ di IE hanya baca
Dalam IE, InnerHTML hanya baca di col, colgroup, frameset, head, html, style, table, tbody, tfoot, thead, judul, tr dan elemen lainnya.
Dalam tag tabel di IE, bagian dalam HTML hanya baca kecuali untuk TD.
InnerHTML tidak dapat ditambahkan
Dari struktur pernyataan itu, binthtml dapat melakukan operasi penambahan, seperti:
chatdiv.innerhtml += "<verv> hai <img src = 'smile.gif'/>! </div>"
chatdiv.innerhtml += "Bagaimana kabarmu?"
Tapi apa yang telah dilakukan pada kenyataannya:
1. Konten lama dibersihkan
2. Konten baru diuraikan dan dimasukkan. Konten tidak ditambahkan, itu diregenerasi.
Oleh karena itu, semua gambar dan sumber daya lainnya akan dimuat ulang setelah operasi +=, termasuk Smile.gif.
Untungnya, ada cara lain untuk memperbarui konten, yang tidak menggunakan innerHTML, jadi tidak ada masalah yang disebutkan di atas.
Nodevalue
InnerHTML hanya berlaku untuk node elemen.
Untuk jenis node lainnya, mereka menggunakan properti Nodevalue untuk mendapatkan konten. Contoh berikut akan menggambarkan cara kerjanya pada node teks dan node komentar.
Salinan kode adalah sebagai berikut:
<body>
Teks
<!-komentar->
<script>
untuk (var i = 0; i <document.body.childnodes.length; i ++) {
waspada (document.body.childnodes [i] .nodevalue)
}
</script>
</body>
Dalam contoh di atas, beberapa peringatan kosong karena node kosong. Perhatikan bahwa nodevalue === NULL untuk node skrip. Itu karena skrip adalah simpul elemen. Node Elemen, Gunakan InnerHTML.
Meringkaskan
nodetype
Tipe simpul. Yang paling penting adalah bahwa simpul elemen adalah 1, simpul teks adalah 3, dan hanya baca.
nodename/tagname
Nama tag Caps. Untuk node non-elemen, nodename juga akan memiliki nilai khusus, baca saja.
BUTNHTML
Konten node elemen dapat ditulis.
Nodevalue
Konten simpul teks dapat ditulis.
Node DOM memiliki beberapa atribut lain sesuai dengan jenisnya. Misalnya, tag input memiliki nilai dan atribut __Cecked__. Atribut A memiliki HREF dan sebagainya.
Di atas adalah semua tentang artikel ini, saya harap Anda menyukainya.