"โหนดหลัก"
มักใช้เพื่อรับโหนดหลักขององค์ประกอบ คิดว่า parentNodes เป็นคอนเทนเนอร์และมีโหนดย่อยอยู่ในคอนเทนเนอร์
ตัวอย่าง:
<div id="ผู้ปกครอง">
<b id="child">ข้อความของฉัน</b>
</div>
ในโค้ดด้านบน คุณจะเห็นว่า "Dad" ถูกใช้เป็นคอนเทนเนอร์ div และมี "ลูก" ในคอนเทนเนอร์ซึ่งเป็นส่วนข้อความตัวหนา หากคุณวางแผนที่จะใช้เมธอด getElementById() เพื่อรับตัวหนา element และอยากรู้ว่า "พ่อ" คือใคร ข้อมูลที่ส่งคืนจะเป็น div สาธิตสคริปต์ต่อไปนี้แล้วคุณจะรู้ว่าเกิดอะไรขึ้น...
อ้าง:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div id="ผู้ปกครอง">
<b id="child">ข้อความของฉัน</b>
</div>
<script type="text/javascript">
-
alert(document.getElementById("child").parentNode.nodeName);
-
</สคริปต์>
การใช้ parentNode ไม่จำเป็นต้องค้นหา "พ่อ" เท่านั้น แต่ "ลูกชาย" ยังสามารถกลายเป็น "พ่อ" ได้ ดังตัวอย่างต่อไปนี้...
อ้าง:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div id="ผู้ปกครอง">
<div id="ผู้ปกครองเด็ก">
<b id="child">ข้อความของฉัน</b>
</div>
</div>
มี "ผู้ปกครอง" สองคนและ "ลูก" สองคนในโค้ดด้านบน div แรก (id "parent") คือ "Father" ของ div ที่สอง (childparent)
มีองค์ประกอบตัวหนา (id "child") ใน "childparent" ซึ่งเป็น "child" ของ div "childparent" ดังนั้นจะเข้าถึง "ปู่" (id "parent") ได้อย่างไร มันง่ายมาก... .
อ้าง:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div id="ผู้ปกครอง">
<div id="ผู้ปกครองเด็ก">
<b id="child">ข้อความของฉัน</b>
</div>
</div>
<script type="text/javascript">
-
alert(document.getElementById("child").parentNode.parentNode.nodeName);
-
</สคริปต์>
คุณสังเกตเห็นว่า parentNode สองตัวถูกใช้ร่วมกันหรือไม่ "parentNode.parentNode" โหนดหลักแรกคือ div (id "childparent") เนื่องจากเราต้องการรับองค์ประกอบพาเรนต์ด้านนอกสุด ดังนั้นเราจึงเพิ่ม parentNode อื่นให้กับ div (id "childparent" ) "พ่อแม่").
การใช้ parentNode เป็นมากกว่าการค้นหา nodeName ขององค์ประกอบ ตัวอย่างเช่น คุณสามารถรับโหนดหลักขององค์ประกอบจำนวนมากและเพิ่มโหนดใหม่ที่ส่วนท้ายได้
IE มีชื่อเป็นของตัวเองเรียกว่า "parentElement" และสำหรับสคริปต์ข้ามเบราว์เซอร์ ขอแนะนำให้ใช้ parentNode
อีกสองคำ:
หากคุณใส่จาวาสคริปต์ไว้ที่ส่วนหัวของไฟล์ html จะมีข้อผิดพลาดเกิดขึ้น Firefox จะรายงานข้อผิดพลาดต่อไปนี้:
document.getElementById("child") ไม่มีคุณสมบัติ
สำหรับ IE มันคือ:
วัตถุจำเป็น
เหตุผลก็คือเบราว์เซอร์ทั้งหมดที่รองรับ JavaScript รัน JavaScript ก่อนที่จะแยกวิเคราะห์ DOM โดยสมบูรณ์ ในการเขียนโปรแกรมเว็บจริง JavaScript ส่วนใหญ่อาจถูกวางไว้ในแท็ก head เพื่อให้ทำงานได้อย่างถูกต้อง การแจ้งเตือนจะต้องรวมอยู่ในฟังก์ชันและในเอกสาร เรียกใช้ฟังก์ชันหลังจากโหลด เช่น เพิ่มลงในแท็ก Body
อะไรคือความแตกต่างระหว่าง parentNode, parentElement, childNodes และ Children?
parentElement รับวัตถุหลักในลำดับชั้นของวัตถุ
parentNode รับวัตถุพาเรนต์ในลำดับชั้นของเอกสาร
childNodes รับชุดขององค์ประกอบ HTML และวัตถุ TextNode ที่สืบทอดโดยตรงของวัตถุที่ระบุ
เด็ก ๆ รับคอลเลกชันของวัตถุ DHTML ที่สืบทอดโดยตรงของวัตถุ
-------------------------------------------------- -------------------------------------------------- ------
parentNode มีฟังก์ชันเหมือนกับ parentElement และ childNodes มีฟังก์ชันเหมือนกับ parentElement อย่างไรก็ตาม parentNode และ childNodes เป็นไปตามมาตรฐาน W3C และอาจกล่าวได้ว่าเป็นสากล อีกสองรายการรองรับโดย IE เท่านั้น ไม่ใช่มาตรฐาน และไม่รองรับโดย Firefox
-------------------------------------------------- -------------------------------------------------- ------
กล่าวอีกนัยหนึ่ง parentElement และลูก ๆ เป็นของ IE เองและไม่ได้รับการยอมรับจากที่อื่น
จากนั้นเวอร์ชันมาตรฐานคือ parentNode, childNodes
ฟังก์ชั่นของทั้งสองนี้เหมือนกับ parentElement และลูก ๆ และเป็นมาตรฐานและเป็นสากล
-------------------------------------------------- -------------------------------------------------- ------
ต่อไปนี้เป็นคำอธิบายง่ายๆ โปรดใส่ใจกับความแตกต่างในแต่ละคำ:
คุณสมบัติ parentNode: ดึงวัตถุหลักในลำดับชั้นของเอกสาร
คุณสมบัติ parentElement:ดึงข้อมูลวัตถุหลักในลำดับชั้นของวัตถุ
เด็กโหนด:
ดึงคอลเลกชันขององค์ประกอบ HTML และวัตถุ TextNode ที่สืบทอดโดยตรงของวัตถุที่ระบุ
เด็ก:
ดึงชุดของวัตถุ DHTML ที่สืบทอดโดยตรงของวัตถุ
parentElement parentNode.parentNode.childNodes ตัวอย่างการใช้งาน
วิธีแรก
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<หัว>
<TITLE> เอกสารใหม่ </TITLE>
<META NAME="เครื่องกำเนิดไฟฟ้า" C>
<META NAME="ผู้เขียน" ซี>
<META NAME="คำหลัก" C>
<META NAME="คำอธิบาย" C>
<SCRIPT LANGUAGE="จาวาสคริปต์">
-
แถว var = -1;
ฟังก์ชั่น showEdit (obj) {
var cell2 = obj.parentNode.parentNode.childNodes[1];
var rowIndex = obj.parentNode.parentNode.rowIndex;
cell2.innerHTML = "<input type='text' value='"+ cell2.innerHTML +"'>";
ถ้า (แถว != -1){
var oldCell2 = document.getElementById("tb").rows[แถว].cells[1];
oldCell2.innerHTML = oldCell2.childNodes[0].ค่า;
-
แถว = แถวดัชนี;
-
-
</สคริปต์>
</HEAD>
<ร่างกาย>
<ตาราง id="tb">
<TR>
<TD><ประเภทอินพุต="วิทยุ" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><ประเภทอินพุต="วิทยุ" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><ประเภทอินพุต="วิทยุ" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
</ตาราง>
</ร่างกาย>
</HTML>
วิธีที่สอง
คัดลอกรหัสรหัสดังต่อไปนี้:
<เส้นขอบตาราง=1 ความกว้าง=100%>
<tr>
<td><ชื่ออินพุต=m ประเภท=ช่องทำเครื่องหมาย ></td>
<td>1111</td>
<td><input name=aaa value="222" ปิดการใช้งาน></td>
<td><ชื่ออินพุต=bbb value="333" ปิดการใช้งาน></td>
</tr>
<tr>
<td><ชื่ออินพุต=m ประเภท=ช่องทำเครื่องหมาย ></td>
<td>1111</td>
<td><input name=aaa value="222" ปิดการใช้งาน></td>
<td><ชื่ออินพุต=bbb value="333" ปิดการใช้งาน></td>
</tr>
<tr>
<td><ชื่ออินพุต=m ประเภท=ช่องทำเครื่องหมาย ></td>
<td>1111</td>
<td><input name=aaa value="222" ปิดการใช้งาน></td>
<td><ชื่ออินพุต=bbb value="333" ปิดการใช้งาน></td>
</tr>
</ตาราง>
<SCRIPT LANGUAGE="จาวาสคริปต์">
ฟังก์ชั่น มม.(อี)
-
var currentTr=e.parentElement.parentElement;
var inputObjs=currentTr.getElementsByTagName("อินพุต");
สำหรับ (var i=0;i<inputObjs.length;i++)
-
if(inputObjs[i ]==e) ดำเนินการต่อ;
inputObjs[i].disabled=!e.checked;
-
-
</สคริปต์>
รับวิธีการควบคุมหลักใน HTML
คัดลอกรหัสรหัสดังต่อไปนี้:
ฟังก์ชั่นตั้งค่า (v, o)
-
//var obj=document.getElementById(''batchRate'');
//หน้าต่าง.
การแจ้งเตือน (o.parentNode.innerHTML);
alert(o.parentNode); //parentNode ยังได้รับการควบคุมหลักที่นี่
alert(o.parentElement); //parentElement ยังได้รับการควบคุมหลักที่นี่
alert(o.parentElement.parentNode); //parentElement.parentNode ยังได้รับการควบคุมหลักที่นี่
//o.parentNode.bgColor="สีแดง";
o.parentElement.parentNode.bgColor = "สีแดง";
-
ตัวอย่าง:
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<meta http-equiv="ภาษาเนื้อหา" c>
<meta http-equiv="ประเภทเนื้อหา" c>
<title>หน้าเว็บใหม่ 1</title>
</หัว>
<สคริปต์>
ฟังก์ชั่นตั้งค่า (v, o)
-
//var obj=document.getElementById(''batchRate'');
//หน้าต่าง.
การแจ้งเตือน (o.parentNode.innerHTML);
การแจ้งเตือน (o.parentNode);
การแจ้งเตือน (o.parentElement);
//o.parentNode.bgColor="สีแดง";
o.parentElement.parentNode.bgColor = "สีแดง";
-
</สคริปต์>
<ร่างกาย>
<table id="table1">
<tr>
<td><a >dfsdfdsfdsa</a></td>
<td> </td>
<td> </td>
</tr>