Artikel ini menjelaskan penggunaan javascript untuk node halaman web. Bagikan untuk referensi Anda. Analisis spesifiknya adalah sebagai berikut:
1. Konsep Dasar
Bagian ini disebut "html dom". DOM HTML yang disebut adalah aturan pemuatan halaman web, yang merupakan aturan, yang merupakan rumus dasar untuk halaman web.
Artinya, semua halaman web harus ditulis sesuai dengan aturan: <html> <body> </body> </html> ... dan juga dimuat sesuai dengan aturan tersebut.
Yang disebut "node halaman web" juga merupakan penjelasan populer tentang "simpul dom". Misalnya, konten di bawah node HTML adalah semua konten antara <html> </html>, dan konten di bawah node tubuh adalah semua konten antara <body> </body>.
HTML DOM menetapkan sebagai berikut: 1. Seluruh dokumen adalah simpul dokumen; 2. Setiap tag HTML (artinya <body> <able> dan tag HTML lainnya, daripada tag <html> sederhana) adalah node elemen; 3. Teks yang terkandung dalam elemen HTML adalah simpul teks; 4. Setiap atribut html adalah node atribut
Misalnya, Anda dapat menggambar halaman ke pohon simpul DOM berikut:
Definisi resmi HTML DOM adalah sebagai berikut: HTML DOM adalah singkatan dari model objek dokumen HTML, dan HTML DOM adalah model objek dokumen yang diterapkan secara khusus untuk HTML/XHTML. Orang yang akrab dengan pengembangan perangkat lunak dapat memahami HTML DOM sebagai API halaman web. Ini memperlakukan setiap elemen di halaman web sebagai objek, sehingga elemen di halaman web juga dapat diperoleh atau diedit oleh bahasa komputer. Misalnya, JavaScript dapat menggunakan HTML DOM untuk secara dinamis memodifikasi halaman web.
Menggunakan JavaScript dapat dengan mudah mengontrol penambahan, penghapusan, modifikasi, dan pencarian node halaman web untuk node DOM ini.
2. Tujuan Dasar
Gunakan JavaScript untuk menambah, menghapus, memodifikasi, dan memeriksa node halaman web. Di halaman web:
1. Tombol "Tambahkan Node", sambil menambahkan opsi node di menu tarik-turun yang terkait dengan tombol "Ganti". Jika ada 9 node di halaman web, tidak ada peringatan dan pop-up akan diizinkan.
2. Tombol "Hapus Node Terakhir", sambil mengurangi opsi simpul di menu tarik-turun yang terkait dengan tombol "Ganti".
3. Tombol "Ganti Node Content", pertama -tama pilih node yang akan dioperasikan, dan kemudian masukkan konten yang akan diganti, dan simpul yang sesuai akan diganti.
4. Jika tidak ada node di halaman web, tidak ada penghapusan atau penggantian yang diizinkan, dan peringatan pop-up akan diberikan.
3. Proses Produksi
Tanpa mengkonfigurasi lingkungan apa pun, cukup tulis kode berikut di halaman web. Kode spesifiknya adalah sebagai berikut, dan berikut ini akan dijelaskan sebagian:
Salin kode kode sebagai berikut: <! Doctype html public "-// w3c // pd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/pd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> jsDivNode </iteme>
<type skrip = "Teks/JavaScript">
var i = 0;
function createNode () {
if (i <9) {
i ++;
var option = document.createElement ("option");
opsi.value = i;
option.innerHtml = "node" + i.tostring ();
document.geteLementById ("number"). endapan (opsi);
var p = document.createElement ("p");
p.innerHtml = "node" + i.tostring ();
document.geteLementById ("d"). AppendChild (p);
} kalau tidak
waspada ("Aku baik -baik saja, ada terlalu banyak node, aku tidak bisa melakukannya ~");
}
function removenode () {
if (i> 0) {
Saya--;
var s = document.geteLementById ("angka");
S.Removechild (S.LastChild);
var d = document.getElementById ("d");
D.Removechild (D.LastChild);
} kalau tidak
waspada ("Tidak ada node, hapus benang ~");
/*var ps = d.geteLementsbyTagname ("p");*/
/*document.getElementById("d").removechild(ps[9]); */
}
fungsi replacenode () {
if (i> 0) {
var d = document.getElementById ("d");
var p = document.createElement ("p");
p.innerHtml = document.getElementById ("text"). value;
var ps = d.geteLementsbyTagname ("p")
D.Replacechild (p, ps [document.geteLementById ("angka"). Nilai - 1]);
} kalau tidak
peringatan ("Tidak ada simpul, ganti benang ~");
}
</script>
</head>
<body>
<input type = "tombol" value = "create node" onclick = "createNode ()" />
<input type = "Tombol" value = "Hapus simpul terakhir" onClick = "removenode ()" />
<Pilih id = "Nomor"> </pilih>
<input type = "text" id = "text" />
<input type = "tombol" value = "content replaceNode" ontClick = "replaceNode ()" />
<Div id = "d">
</div>
</body>
</html>
1. <body> node
Salin kode sebagai berikut: <tody>
<!-Tombol X2, kedua tombol memiliki tindakan onClick yang menunjuk ke fungsi yang sesuai->
<input type = "tombol" value = "create node" onclick = "createNode ()" />
<input type = "Tombol" value = "Hapus simpul terakhir" onClick = "removenode ()" />
<!-Menu drop-down tanpa <pection> node anak ditambahkan secara bersamaan oleh node createNode (). ->
<Pilih id = "Nomor"> </pilih>
<!-Kotak Input X1, Perhatikan pengaturan ID, ReplacEnode () untuk mendapatkan nilai kotak teks ini->
<input type = "text" id = "text" />
<!-Tombol x1, sama seperti tombol x2->
<input type = "tombol" value = "content replaceNode" ontClick = "replaceNode ()" />
<!-Lapisan kosong tanpa apa-apa, karena simpul induk <p>, semua anak dari simpul <ve> ini ditambahkan
<Div id = "d">
</div>
</body>
2. <head> node
Salin kode sebagai berikut: <head>
<!-Pengkodean dan judul yang digunakan oleh halaman web tidak penting, kuncinya adalah bagian skrip JS berikut->
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> jsDivNode </iteme>
<type skrip = "Teks/JavaScript">
/*Merekam variabel global berapa banyak node yang ada di halaman web saat ini*/
var i = 0;
/*Ada 3 fungsi di bawah ini. Saat tombol diklik, itu disebut*/
function createNode () {
/*Jika ada kurang dari 9 node di halaman web, itu akan berfungsi, jika tidak ada jendela pop-up*/
if (i <9) {
/*Tambahkan satu lagi node untuk setiap catatan variabel global i+1*//
i ++;
/*Buat simpul opsi, dan kemudian nama pointernya juga opsi*/
var option = document.createElement ("option");
/*Deklarasikan atribut nilai dari simpul opsi yang dibuat adalah nilai saat ini dari i, yaitu, ketika i = 1, ada node anak seperti <nilai opsi = 1> </pection>. */
/*Beberapa halaman web mengatakan bahwa menggunakan metode setAttribute () untuk mengatur atribut, tetapi secara pribadi dipraktikkan tidak mudah digunakan*/
opsi.value = i;
/*Atur teks di bawah node opsi. Setelah pernyataan ini, simpul anak menjadi <nilai opsi = 1> node1 </pection>*/
option.innerHtml = "node" + i.tostring ();
/*<CILT> ID dari node induk adalah nomor. Pernyataan ini mensyaratkan bahwa <Value Option = 1> node1 </pection>*/ditambahkan ke node induk di <colly> </ pilih>
document.geteLementById ("number"). endapan (opsi);
/*Prinsipnya sama seperti di atas. Tambahkan simpul anak <p> di bawah simpul induk <viv>, dan nilai teks di bawah simpul anak <p> adalah node1*/
var p = document.createElement ("p");
p.innerHtml = "node" + i.tostring ();
document.geteLementById ("d"). AppendChild (p);
} kalau tidak
waspada ("Aku baik -baik saja, ada terlalu banyak node, aku tidak bisa melakukannya ~");
}
function removenode () {
/*Jika ada lebih dari 0 node di halaman web, yaitu, ada node, dan kemudian hanya jendela pop-up
if (i> 0) {
/*Untuk setiap pengurangan node, variabel global I-1 dari halaman web saat ini dicatat.
Saya--;
/*Tentukan pointer s ke simpul induk <colly>*/
var s = document.geteLementById ("angka");
/*Hapus simpul anak terakhir di bawah simpul induk dari <Colly>, yaitu <pection>. Jika Anda ingin menghapus yang pertama, parameternya menjadi S.FirstChild*/
S.Removechild (S.LastChild);
/*Prinsip yang sama seperti di atas, hapus simpul anak terakhir di bawah lapisan <viv>*/
var d = document.getElementById ("d");
D.Removechild (D.LastChild);
/*Jika Anda ingin menghapus ke -8 <p> di bawah <viv>, silakan lakukan sebagai berikut*/
/*PS adalah pointer ke set simpul anak <p>*/
/*var ps = d.geteLementsbyTagname ("p");*/
/*document.getElementById("d").removechild(ps[9]); */
} kalau tidak
waspada ("Tidak ada node, hapus benang ~");
}
fungsi replacenode () {
/*Jika ada lebih dari 0 node di halaman web, yaitu, ada node, dan kemudian hanya jendela pop-up
if (i> 0) {
/*Tentukan pointer ke simpul induk d*/
var d = document.getElementById ("d");
/*Buat simpul <p> </p>*/
var p = document.createElement ("p");
/*Dapatkan konten yang dimasukkan di kotak teks dan masukkan ke dalam simpul <p> </p>*/
p.innerHtml = document.getElementById ("text"). value;
/*PS adalah pointer ke set simpul anak <p> dan kelompok node anak di bawah simpul orangtua <SEV>*/
var ps = d.geteLementsbyTagname ("p")
/*Biarkan simpul yang baru saja Anda buat mengganti simpul anak <P> di <piv>, di mana n adalah nilai -1 yang dipilih dalam daftar drop -down sekarang. Alasan untuk -1 adalah bahwa penghitungan set simpul anak dan kelompok anak -anak mulai dari 0, sementara jumlah manusia kita dimulai dari 1. */
D.Replacechild (p, ps [document.geteLementById ("angka"). Nilai - 1]);
} kalau tidak
peringatan ("Tidak ada simpul, ganti benang ~");
}
</script>
</head>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.