Tipe simpul
nodetype
Berikut adalah beberapa nilai nodetype penting:
1: Elemen Elemen
2: Attr
3: Teks teks
8: Komentar
9: Dokumen Dokumen
nodename, nodevalue
Hubungan simpul
Childnodes: Setiap node memiliki properti Childnodes, yang memegang objek nodelist
FirstChild: Setara dengan Childnodes [0]
LastChild: setara dengan childnodes.length-1
Pada saat yang sama, node lain dalam daftar yang sama dapat diakses dengan menggunakan properti sebelumnya dan berikutnya dari setiap node dalam daftar.
Node Operasi
ovendchild ()
Metode appendChild () digunakan untuk menambahkan node ke akhir daftar anak. Setelah menambahkan node, petunjuk hubungan dari simpul baru, simpul induk dan simpul anak -anak terakhir dari anak -anak akan diperbarui sesuai.
insertBefore ()
Metode InsertBefore () menerima dua parameter: node yang akan dimasukkan dan simpul yang akan direferensikan.
// Setelah dimasukkan, itu menjadi simpul anak terakhir dikembalikannode = somenode.insertbefore (newnode, null); // Setelah dimasukkan, itu menjadi simpul pertama yang dikembalikannode = somenode.insertbefore (newnode, somenode.firstchild); // masukkan sebelum node anak terakhir kembali.
replacechild ()
Replacechild () menerima dua parameter, node yang akan dimasukkan dan simpul yang akan diganti
var returnedNode = somenode.replacechild (newnode, somenode.firstchild);
Removechild ()
Hanya hapus dan tidak mengganti node.
var magrirstchild = somenode.removechild (somenode.firstchild);
clonenode ()
Item 1
Item 2
Item 3
var deeplist = mylist.clonenode (true); console.log (deeplist.length); // 3var shallowlist = mylist.clonenode (false); console.log (dayowlist.childnodes.length); // 0
Jenis Dokumen
Node dokumen memiliki karakteristik berikut:
Anak -anak dari dokumen tersebut
var html = document.documentElement; // Dapatkan referensi ke <html> console.log (html === document.childnodes [0]); // trueconsole.log (html === document.firstchild); // BENAR
Informasi dokumen
// Dapatkan judul dokumen var originalTitle = document.title; // Atur dokumen dokumen dokumen.title = "Judul Halaman Baru"; // Dapatkan Urlvar Url = Document.url; // Dapatkan Nama Domain Var Domain = Document.domain; // Dapatkan Urlvar Referrer = Document.referrer; // Asumsikan bahwa halaman tersebut berasal dari p2p.wrox Document.domain; " // dokumen yang berhasil.domain = "nczonline.net"; // Gagal
Call document.geteLementById ("myeLement"); Hasilnya akan mengembalikan elemen <sput> seperti yang ditunjukkan di bawah ini;
Cara terbaik adalah dengan tidak membuat atribut nama bidang formulir sama dengan ID elemen lain.
<input type = "text" name = "myeLement" value = "bidang teks"> <div id = "myeLement"> a div </div>
Koleksi Khusus
Penulisan dokumen
<Html> <Head> <title> document.write () Contoh 3 </iteme> </head> <body> <script type = "text/javascript"> document.write ("<script type =/" text/javascript/"src =/" file.js/">") + "<// script>"); </script> </body> </html>String <// Script> tidak akan dianggap sebagai tag tertutup untuk tag skrip eksternal, jadi tidak akan ada konten yang tidak perlu pada halaman.
Jenis elemen
Node elemen memiliki karakteristik berikut:
Untuk mengakses nama tag suatu elemen, Anda dapat menggunakan atribut nodename atau atribut tagname;
<div id = "myDiv"> </div> var div = document.geteLementById ("myDiv"); console.log (div.tagname); // divconsole.log (div.nodename); // divif (element.tagname == "div") {// Anda tidak dapat membandingkan seperti ini, mudah untuk membuat kesalahan} if (element.tagname.tolowercase == "div") {// Ini adalah yang terbaik (untuk dokumen apa pun)}Dapatkan fitur
Ada tiga metode DOM utama untuk karakteristik operasi, yaitu getAttribute (), setAttribute (), dan RemoveAttribute ();
Perhatikan bahwa nama atribut yang diteruskan ke getAttribute () sama dengan nama atribut yang sebenarnya. Kesan: Untuk mendapatkan nilai atribut kelas, Anda harus lulus di "kelas" bukan "className".
var div = document.getElementById ("myDiv"); console.log (div.getAttribute ("class")); // bdBuat elemen
Gunakan metode Document.CreateElement () untuk membuat elemen baru.
Anak -anak dari Elemen
Sebelum melakukan operasi, Anda biasanya perlu memeriksa properti nodetype terlebih dahulu, seperti yang ditunjukkan pada contoh berikut:
untuk (var i = 0; len = element.childnodes.length; i <len; i ++) {if (element.childnodes [i] .nodetype == 1) {// Lakukan beberapa operasi}}Jenis teks
Node teks memiliki karakteristik berikut:
Buat Node Teks
Anda dapat menggunakan Document.CreateTextNode () untuk membuat node teks baru.
Node teks yang dinormalisasi
Normalisasi ()
Node teks terpecah
splittext ()
Jenis Komentar
Node komentar memiliki karakteristik berikut:
Teknologi Operasi Dom
Formulir Operasi
// Buat TableVar Table = Document.CreateElement ("TABLE"); TABLE.BORDER = 1; TABLE.WIDTH = "100%"; // Buat TBodyVar TBody = Document.CreateElement ("TBody"); Table.AppendChild (tBody); // Buat baris pertama ("tbody"); Table.AppendChild (tBody); // Buat baris pertama ("tBody"); TABLE.AppendChild (tBody); // Buat baris pertama ("tbody"); tody.insertrow (0); tbody.rows [0] .insertcell (0); tbody.rows [0] .cells [0] .AppendChild (document.createTextNode ("sel 1,1"); tody.rows [0] .croatcell (1); tody.rows [0] 2,1 ")); // Buat baris kedua tbody.insertrow (01); tbody.rows [1] .insertcell (0); tbody.rows [1] .cells [0] .AppendChild (Document.CreateTextNode (" Cell 1,2 ")); tbody.rows [1] .Insertcell (1); tBody.rows [1] .cells [1] .AppendChild (Document.CreateTextNode (" Cell 2,2 ")); Document.Body.AppendChild (Tabel);API pemilih
Metode QuerySelector ()
// Dapatkan elemen tubuh var tbody = document.queryselector ('body'); // Dapatkan elemen dengan id "myDiv" var myDiv = document.QuerySelector ("#myDiv"); // Dapatkan elemen pertama dengan kelas "var dipilih = document.queryselector (". document.body.queryselector ("img.button");Metode QuerySelectorall ()
// Dapatkan semua <em> elemen dalam <vi> (mirip dengan GetElementsByTagname ("EM")) var ems = document.geteLementById ("myDiv"). QuerySelectorAll ("EM"); // Dapatkan semua elemen dari kelas "dipilih" var dipilih = Document.QuerySelectorAllAll (". Document.QuerySelectorall ("P Strong");Html5
Ekstensi terkait kelas
Metode GetElementsByClassName ():
Metode ini dapat dipanggil melalui objek dokumen dan semua elemen HTML.
// Dapatkan semua elemen yang berisi "nama pengguna" dan "saat ini" di kelas. Urutan nama kelas tidak masalah var allCurrentUserNames = document.geteLementsbyclassname ("username arus"); // Dapatkan semua elemen dengan nama kelas "dipilih" di elemen dengan id "myDiv" var dipilih = document.geteLementById ("myDiv"). GetElementByClasSname ("Document.getElementById (" myDiv "). GetElementsByClasSname (" "dipilih");Manajemen fokus
HTML5 juga menambahkan fungsi membantu dalam mengelola DOM Focus. Yang pertama adalah dokumen. Properti AactiveElement, yang selalu mengacu pada elemen dalam DOM yang saat ini telah mendapatkan fokus.
var button = document.geteLementById ("mybutton"); tombol.focus (); waspada (document.activeElement === tombol); // BENARSecara default, ketika dokumen baru saja dimuat, dokumen.activeElement disimpan dalam dokumen.activeElement dengan referensi ke elemen dokumen.body. Selama pemuatan dokumen, nilai dokumen.ActiveElement adalah nol.
Selain itu, metode Document.hasfocus () telah ditambahkan, yang digunakan untuk menentukan apakah dokumen tersebut telah mendapatkan fokus.
var button = document.getElementById ("mybutton"); Botton.focus (); waspada (document.hasfocus ()); // BENAR