Persyaratan: Lengkapi pengoperasian penambahan, penghapusan, perubahan dan penyalinan node
Metode dan atribut yang digunakan:
1. Dapatkan simpul induk dari suatu node
Atribut ParentNode
2. Dapatkan koleksi sub -Node dari sebuah node
Atribut Childnodes
3. Membuat Node Baru
CreateTextNode (Konten Teks Node) Metode Objek Dokumen tidak terlalu kompatibel pada beberapa browser
Objek dokumen createelement (objek), seperti: document.createelement ("a");
4. Tambahkan atribut dan nilai atribut ke objek node
settattribute (atribut, nilai atribut); misalnya: anode.setAttribute ("href", "http://www.baidu.com");
5. Ganti sub -node di bawah node tertentu
replacechild (simpul baru, node atom);
6. Tambahkan node ke node
AppendChild (node yang akan ditambahkan)
7. Klong Node tertentu
Clonenode () tidak meneruskan parameter sebagai parameter yang sebenarnya, menunjukkan bahwa node klon termasuk sub -node
Salin kode kode sebagai berikut:
<!
<Html>
<head>
<title> node_curd.html </iteme>
<meta http-equiv = "kata kunci" content = "kata kunci1, kata kunci2, kata kunci3">
<meta http-equiv = "description" content = "Ini halaman saya" >>
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8">
<!-<link rel = "stylesheet" type = "text/ css" href = "./ styles.css">->
<Type style = "text/css">
Div {
Perbatasan: Red 1px padat;
Lebar: 200px;
Tinggi: 50px;
margin: 20px 30px;
padding: 20px;
}
#Div_1 {{
Jelas: keduanya;
Latar Belakang-Color:#FF3366;
}
#Div_2 {{
Jelas: keduanya;
latar belakang-warna:#6699ff;
}
#Div_3 {{
Jelas: keduanya;
Latar Belakang-Color:#CCCC99;
}
#Div_4 {{
Jelas: keduanya;
latar belakang-warna:#00cc33;
}
</tyle>
<type skrip = "Teks/JavaScript">
// Tambahkan Metode 1: Tambahkan teks ke area Div Pertama
fungsi addText () {
// 1. Dapatkan node untuk menambahkan konten teks
var dig_1node = document.getElementById ("div_1");
// 2. Buat node teks. Metode CreateTextNode dari Objek Dokumen. Beberapa browser tidak didukung.
var textNode = document.createTextNode ("Bukankah ini ditampilkan?");
// 3. Tambahkan simpul teks ke metode endapan (instance sub -node) ke simpul yang akan ditambahkan
Div
}
// Tambahkan Metode 2: Tambahkan tombol ke area Div Pertama
fungsi addButton () {
// 1. Dapatkan node untuk menambahkan konten teks
var dig_1node = document.getElementById ("div_1");
// 2. Buat node. Createelement () dari objek dokumen
var anode = document.createElement ("input");
// 3. Tambahkan nilai atribut dan atribut ke objek yang ditentukan
//anode.setAttribute 18 ", type", "tombol"); // Ini sama dengan efek dari kode berikut yang dicapai
anode.type = "tombol";
anode.setAttribute ("nilai", "tombol");
Anode.setAttribute ("onClick", "deleteText ('div_1')");
// 4. Tambahkan simpul teks ke metode ApendChild (instance sub -Node yang akan ditambahkan) di bawah node yang akan ditambahkan
Div
}
// Hapus Metode 1: Hapus sub -node node di area kedua
function deleteText (nodeID) {
// 1. Dapatkan node
var dignode = document.getElementById (nodeID);
// 2. Dapatkan sub -node, yaitu, node teks
var chilenode = divnode.childnodes [0];
// 3. Hapus, lulus parameter true akan menghapus semua sub -node di bawahnya
//Chilenode.removenode (); // Metode ini tidak kompatibel dengan Firefox dan Google
Divnode.removechild (chilenode);
}
// Hapus metode dua: Hapus elemen
function deleteelement () {
// 1. Dapatkan node
var dig_2node = document.getElementById ("div_2");
// 2. Dapatkan node induk,
var parentNode = div_2node.
// 3. Hapus
ParentNode.removechild (div_2node);
}
// revisi
function updateText () {
// 1 Dapatkan simpul area tempat Anda ingin memodifikasi karakter
var dig_3node = document.getElementById ("div_3");
// 2. Dapatkan koleksi sub -Node di langkah pertama, tentukan node yang akan dimodifikasi
var childnode = div_3node.childnodes [0];
// 3. Buat node teks
var newNode = document.createTextNode ("haha, saya menggantikan Anda.");
// 4. Gunakan 3 langkah untuk mengganti node pada langkah 2 langkah
//Childnode.replacenode (newnode); // metode ini tidak kompatibel dengan firefox dan google
Div
}
//klon
Fungsi copynode () {
// 1. Dapatkan simpul regional keempat
var dig_1node = document.getElementById ("div_1");
// 2. Dapatkan simpul area pertama
var dig_4node = document.getElementById ("div_4");
// 3. Dapatkan simpul baru melalui simpul keempat klon
var newnode = div
// 4. Ganti simpul baru Langkah 3 untuk menghapus node pertama yang asli
Div
}
</script>
</head>
<body>
<Div id = "Div_1"> </div>
<Div id = "Div_2"> Ini adalah area kedua </div>
<Div id = "Div_3"> Ini adalah area ketiga </div>
<Div id = "Div_4"> Ini adalah area keempat </div>
<hr />
<font size = "12px"> Tingkatkan: </font>
<input type = "Tombol" value = "Tambahkan teks ke area pertama" onClick = "addText ()" />
<input type = "Tombol" value = "Tambahkan tombol ke area pertama" OnClick = "AddButton ()" />
<hr />
<font size = "12px"> hapus: </font>
<input type = "Tombol" value = "Hapus konten teks di area kedua" OnClight = "DeleteText ('Div_2')" /> />
<input type = "Tombol" value = "Hapus area kedua" onClick = "deleteelement ()" />
<hr />
<font size = "12px"> ubah: </font>
<input type = "tombol" value = "Ubah konten di area ketiga" onclick = "updateText ()" /> />> />
<hr />
<font size = "12px"> kloning: </font>
<input type = "tombol" value = "mengkloning wilayah keempat ke wilayah pertama" onclick = "copynode ()" / />>>
</body>
</html>