"Node Induk"
Sering digunakan untuk mendapatkan simpul induk dari suatu elemen. Anggaplah parentNodes sebagai sebuah wadah, dan ada simpul anak di dalam wadah tersebut.
contoh:
<div id="orang tua">
<b id="child">Teks saya</b>
</div>
Pada kode di atas, Anda melihat bahwa "Ayah" digunakan sebagai wadah div, dan ada "anak" di dalam wadah tersebut, yang merupakan bagian teks tebal. Jika Anda berencana menggunakan metode getElementById() untuk mendapatkan huruf tebal elemen dan ingin mengetahuinya Siapa "Ayah"? Informasi yang dikembalikan akan berupa div. Tunjukkan skrip berikut dan Anda akan tahu apa yang terjadi...
Mengutip:
Copy kode kodenya sebagai berikut:
<div id="orang tua">
<b id="child">Teks saya</b>
</div>
<skrip tipe="teks/javascript">
<!--
alert(document.getElementById("child").parentNode.nodeName);
//-->
</skrip>
Menggunakan parentNode tidak serta merta hanya mencari "ayah", "anak" juga bisa menjadi "ayah", seperti pada contoh berikut...
Mengutip:
Copy kode kodenya sebagai berikut:
<div id="orang tua">
<div id="orang tua anak">
<b id="child">Teks saya</b>
</div>
</div>
Ada dua "parent" dan dua "children" pada kode di atas. Div pertama (id "parent") adalah "father" dari div kedua (childparent).
Ada elemen tebal (id "child") di "childparent", yang merupakan "child" dari div "childparent" Jadi, bagaimana cara mengakses "grandpa" (id "parent")? .
Mengutip:
Copy kode kodenya sebagai berikut:
<div id="orang tua">
<div id="orang tua anak">
<b id="child">Teks saya</b>
</div>
</div>
<skrip tipe="teks/javascript">
<!--
alert(document.getElementById("child").parentNode.parentNode.nodeName);
//-->
</skrip>
Apakah Anda memperhatikan bahwa dua parentNode digunakan bersama-sama? "parentNode.parentNode". ParentNode pertama adalah div (id "childparent"), karena kami ingin mendapatkan elemen induk terluar, jadi kami menambahkan parentNode lain ke div (id "childparent" ) "orang tua").
Menggunakan parentNode tidak hanya sekedar menemukan nodeName suatu elemen. Misalnya, Anda bisa mendapatkan node induk dari sejumlah besar elemen dan menambahkan node baru di akhir.
IE memiliki namanya sendiri yang disebut "parentElement", dan untuk skrip lintas browser disarankan menggunakan parentNode.
Dua kata lagi:
Jika Anda meletakkan javascript di bagian atas file html, kesalahan akan terjadi Firefox akan melaporkan kesalahan berikut:
document.getElementById("child") tidak memiliki properti
Untuk IE itu adalah:
Diperlukan Objek
Alasannya adalah bahwa semua browser yang mendukung JavaScript menjalankan JavaScript sebelum mengurai DOM sepenuhnya. Dalam pemrograman Web sebenarnya, sebagian besar JavaScript dapat ditempatkan di tag head Agar dapat berjalan dengan baik, peringatan harus dibungkus dalam fungsi dan dokumen Panggil fungsi setelah memuat. Misalnya, tambahkan ke tag Body.
Apa perbedaan antara parentNode, parentElement, childNodes, dan anak-anak?
parentElement Mendapatkan objek induk dalam hierarki objek.
parentNode mendapatkan objek induk dalam hierarki dokumen.
childNodes Mendapat kumpulan elemen HTML dan objek TextNode yang merupakan turunan langsung dari objek tertentu.
anak-anak Mendapatkan koleksi objek DHTML yang merupakan turunan langsung dari objek tersebut.
--------------------------------------------------- ------
parentNode memiliki fungsi yang sama dengan parentElement, dan childNodes memiliki fungsi yang sama dengan anak. Namun parentNode dan childNodes mematuhi standar W3C dan dapat dikatakan relatif universal. Dua lainnya hanya didukung oleh IE, bukan standar, dan tidak didukung oleh Firefox.
--------------------------------------------------- ------
Dengan kata lain, parentElement dan anak-anak adalah milik IE sendiri dan tidak dikenali oleh tempat lain.
Kemudian, versi standarnya adalah parentNode, childNodes.
Fungsi keduanya sama dengan parentElement dan anak, serta bersifat standar dan universal.
--------------------------------------------------- ------
Berikut penjelasan sederhananya, harap diperhatikan perbedaan masing-masing kata:
Properti parentNode: Mengambil objek induk dalam hierarki dokumen.
Properti parentElement: Mengambil objek induk dalam hierarki objek.
node anak:
Mengambil kumpulan Elemen HTML dan objek TextNode yang merupakan turunan langsung dari objek tertentu.
anak-anak:
Mengambil kumpulan Objek DHTML yang merupakan turunan langsung dari objek tersebut.
contoh penggunaan parentElement parentNode.parentNode.childNodes
metode pertama
Copy kode kodenya sebagai berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transisi//EN">
<HTML>
<KEPALA>
<TITLE> Dokumen Baru </TITLE>
<NAMA META="Generator" C>
<META NAME="Penulis" C>
<META NAME="Kata Kunci" C>
<META NAMA="Deskripsi" C>
<BAHASA SKRIP="JavaScript">
<!--
var baris = -1;
fungsi tampilkanEdit(obj){
var sel2 = obj.parentNode.parentNode.childNodes[1];
var rowIndex = obj.parentNode.parentNode.rowIndex;
sel2.innerHTML = "<tipe masukan='teks' nilai='"+ sel2.innerHTML +"'>";
jika(baris != -1){
var oldCell2 = document.getElementById("tb").rows[row].cells[1];
oldCell2.innerHTML = oldCell2.childNodes[0].value;
}
baris = indeks baris;
}
//-->
</SKRIP>
</KEPALA>
<TUBUH>
<TABEL id="tb">
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
</TABEL>
</BODI>
</HTML>
Metode kedua
Copy kode kodenya sebagai berikut:
<batas tabel=1 lebar=100%>
<tr>
<td><nama masukan=m tipe=kotak centang ></td>
<td>1111</td>
<td><nama masukan=aaa value="222" dinonaktifkan></td>
<td><nama masukan=bbb value="333" dinonaktifkan></td>
</tr>
<tr>
<td><nama masukan=m tipe=kotak centang ></td>
<td>1111</td>
<td><nama masukan=aaa value="222" dinonaktifkan></td>
<td><nama masukan=bbb value="333" dinonaktifkan></td>
</tr>
<tr>
<td><nama masukan=m tipe=kotak centang ></td>
<td>1111</td>
<td><nama masukan=aaa value="222" dinonaktifkan></td>
<td><nama masukan=bbb value="333" dinonaktifkan></td>
</tr>
</tabel>
<BAHASA SKRIP="JavaScript">
fungsi mm(e)
{
var currentTr=e.parentElement.parentElement;
var inputObjs=currentTr.getElementsByTagName("input");
for(var i=0;i<inputObjs.panjang;i++)
{
if(inputObjs[i ]==e) lanjutkan;
inputObjs[i ].disabled=!e.diperiksa;
}
}
</SKRIP>
Dapatkan metode kontrol orang tua dalam HTML
Copy kode kodenya sebagai berikut:
nilai set fungsi(v,o)
{
//var obj=document.getElementById(''batchRate'');
//jendela.
alert(o.parentNode.innerHTML);
alert(o.parentNode); //parentNode juga mendapatkan kontrol induk di sini
alert(o.parentElement); //parentElement juga mendapatkan kontrol induk di sini
alert(o.parentElement.parentNode); //parentElement.parentNode juga mendapatkan kontrol induk di sini
//o.parentNode.bgColor="merah";
o.parentElement.parentNode.bgColor="merah";
}
Contoh:
Copy kode kodenya sebagai berikut:
<html>
<kepala>
<meta http-equiv="Bahasa-Konten" c>
<meta http-equiv="Jenis Konten" c>
<title>Halaman web baru 1</title>
</kepala>
<skrip>
nilai set fungsi(v,o)
{
//var obj=document.getElementById(''batchRate'');
//jendela.
alert(o.parentNode.innerHTML);
alert(o.parentNode);
alert(o.parentElement);
//o.parentNode.bgColor="merah";
o.parentElement.parentNode.bgColor="merah";
}
</skrip>
<tubuh>
<tabel id="tabel1">
<tr>
<td><a >dfsdfdsfdsa</a></td>
<td> </td>
<td> </td>
</tr>