"عقدة الوالدين"
غالبًا ما تستخدم للحصول على العقدة الأصلية لعنصر ما، فكر في العقدة الأصل كحاوية، وهناك عقد فرعية في الحاوية.
مثال:
<div معرف = "الأصل">
<b id="child">النص الخاص بي</b>
</div>
في الكود أعلاه، ترى أن "Dad" يُستخدم كحاوية div، ويوجد "فرع" في الحاوية، وهو جزء النص الغامق إذا كنت تخطط لاستخدام طريقة getElementById() للحصول على الخط الغامق العنصر وتريد أن تعرفه من هو "أبي"؟ ستكون المعلومات التي تم إرجاعها عبارة عن div. قم بإظهار النص التالي وستعرف ما الذي يحدث...
يقتبس:
انسخ رمز الكود كما يلي:
<div معرف = "الأصل">
<b id="child">النص الخاص بي</b>
</div>
<نوع البرنامج النصي = "نص/جافا سكريبت">
<!--
تنبيه (document.getElementById("child").parentNode.nodeName);
//-->
</script>
إن استخدامparentNode لا يؤدي بالضرورة إلى العثور على "أب" فقط، بل يمكن أن يصبح "الابن" أيضًا "أبًا"، كما في المثال التالي...
يقتبس:
انسخ رمز الكود كما يلي:
<div معرف = "الأصل">
<div معرف = "الطفل">
<b id="child">النص الخاص بي</b>
</div>
</div>
يوجد "والدان" و"طفلان" في الكود أعلاه. القسم الأول (معرف "الوالد") هو "أب" القسم الثاني (الوالد).
يوجد عنصر غامق (معرف "طفل") في "الوالد"، وهو "الطفل" في قسم "الوالد" لذا، كيفية الوصول إلى "الجد" (المعرف "الوالد")؟ .
يقتبس:
انسخ رمز الكود كما يلي:
<div معرف = "الأصل">
<div معرف = "الطفل">
<b id="child">النص الخاص بي</b>
</div>
</div>
<نوع البرنامج النصي = "نص/جافا سكريبت">
<!--
تنبيه (document.getElementById("child").parentNode.parentNode.nodeName);
//-->
</script>
هل لاحظت أنه يتم استخدام عقدتين أصليتين معًا؟ "parentNode.parentNode". العقدة الأصلية الأولى هي div (المعرف "childparent")، لأننا نريد الحصول على العنصر الأصلي الأبعد، لذلك نضيف عقدة أصلية أخرى إلى div (المعرف "childparent"). ) "الوالد").
يؤدي استخدامparentNode إلى أكثر من مجرد العثور على اسم العقدة لعنصر ما، على سبيل المثال، يمكنك الحصول على العقدة الأصلية لعدد كبير من العناصر وإضافة عقدة جديدة في النهاية.
IE له اسم خاص به يسمى "parentElement"، وبالنسبة للنصوص البرمجية عبر المتصفحات، فمن المستحسن استخدامparentNode.
كلمتين أخريين:
إذا قمت بوضع جافا سكريبت في رأس ملف html، فسيحدث خطأ، وسيقوم Firefox بالإبلاغ عن الخطأ التالي:
document.getElementById("child") لا يحتوي على أي خصائص
بالنسبة لـ IE فهو:
مطلوب كائن
والسبب هو أن جميع المتصفحات التي تدعم JavaScript تقوم بتشغيل JavaScript قبل تحليل DOM بشكل كامل. في برمجة الويب الفعلية، قد يتم وضع معظم JavaScript في علامة الرأس لكي يعمل بشكل صحيح، يجب تضمين التنبيه في الوظيفة وفي المستند قم باستدعاء الوظيفة بعد التحميل، على سبيل المثال، قم بإضافتها إلى علامة Body.
ما هي الاختلافات بينparentNode وparentElement وchildNodes والأطفال؟
parentElement يحصل على الكائن الأصل في التسلسل الهرمي للكائن.
يحصلparentNode على الكائن الأصلي في التسلسل الهرمي للمستند.
ChildNodes يحصل على مجموعة من عناصر HTML وكائنات TextNode التي تنحدر مباشرة من الكائن المحدد.
children يحصل على مجموعة من كائنات DHTML التي تنحدر مباشرة من الكائن.
-------------------------------------------------- ------
لدىparentNode نفس وظيفةparentElement، وchildNodes لها نفس وظيفة الأبناء. ومع ذلك، فإنparentNode وchildNodes يتوافقان مع معايير W3C ويمكن القول أنهما عالميتان نسبيًا. الاثنان الآخران مدعومان فقط بواسطة IE، وليس المعايير، ولا يدعمهما Firefox.
-------------------------------------------------- ------
بمعنى آخر، ParentElement و children هي أشياء خاصة بـ IE ولا يتم التعرف عليها في أماكن أخرى.
ثم، الإصدار القياسي الخاص بهم هوparentNode وchildNodes.
وظائف هذين الاثنين هي نفس وظيفة ParentElement والأطفال، وهي قياسية وعالمية.
-------------------------------------------------- ------
وفيما يلي شرح بسيط، يرجى الانتباه إلى الاختلافات في الكلمات الفردية:
خاصيةparentNode: استرداد الكائن الأصلي في التسلسل الهرمي للوثيقة.
خاصية ParentElement: استرداد الكائن الأصلي في التسلسل الهرمي للكائن.
عقد الطفل:
يسترد مجموعة من عناصر HTML وكائنات TextNode التي تنحدر مباشرة من الكائن المحدد.
أطفال:
يسترد مجموعة من كائنات DHTML التي تنحدر مباشرة من الكائن.
مثال على استخدامparentElementparentNode.parentNode.childNodes
الطريقة الأولى
انسخ رمز الكود كما يلي:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<أتش تي أم أل>
<الرأس>
<TITLE> مستند جديد </TITLE>
<اسم ميتا = "المولد" C>
<اسم ميتا = "المؤلف" ج>
<اسم التعريف = "الكلمات الرئيسية" C>
<اسم ميتا = "الوصف" ج>
<لغة البرنامج النصي = "جافا سكريبت">
<!--
الصف فار = -1؛
دالة showEdit(obj){
var cell2 = obj.parentNode.parentNode.childNodes[1];
varrowIndex = obj.parentNode.parentNode.rowIndex;
cell2.innerHTML = "<input type='text' value='"+ cell2.innerHTML +"'>";
إذا (صف!= -1){
var oldCell2 = document.getElementById("tb").rows[row].cells[1];
oldCell2.innerHTML = oldCell2.childNodes[0].value;
}
صف = صفيندكس؛
}
//-->
</النص>
</الرأس>
<الجسم>
<معرف الجدول = "تيب">
<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>
</الجدول>
</الجسم>
</HTML>
الطريقة الثانية
انسخ رمز الكود كما يلي:
<حدود الجدول=1 العرض=100%>
<تر>
<td><اسم الإدخال = نوع m = خانة الاختيار </td>
<td>1111</td>
<td><اسم الإدخال = قيمة aaa = "222" معطل></td>
<td><اسم الإدخال = قيمة bbb = "333" معطل></td>
</tr>
<تر>
<td><اسم الإدخال = نوع m = خانة الاختيار </td>
<td>1111</td>
<td><اسم الإدخال = قيمة aaa = "222" معطل></td>
<td><اسم الإدخال = قيمة bbb = "333" معطل></td>
</tr>
<تر>
<td><اسم الإدخال=نوع m=مربع الاختيار </td>
<td>1111</td>
<td><اسم الإدخال = قيمة aaa = "222" معطل></td>
<td><اسم الإدخال = قيمة bbb = "333" معطل></td>
</tr>
</الجدول>
<لغة البرنامج النصي = "جافا سكريبت">
وظيفة ملم (ه)
{
var currentTr=e.parentElement.parentElement;
var inputObjs=currentTr.getElementsByTagName("input");
for(var i=0;i<inputObjs.length;i++)
{
إذا (inputObjs[i]==e) يستمر؛
inputObjs[i].disabled=!e.checked;
}
}
</النص>
احصل على طريقة الرقابة الأبوية بتنسيق HTML
انسخ رمز الكود كما يلي:
قيمة مجموعة الدالة (v,o)
{
//var obj=document.getElementById(''batchRate'');
//windows.
تنبيه (o.parentNode.innerHTML)؛
تنبيه (o.parentNode)؛ //parentNode يحصل أيضًا على التحكم الأصلي هنا
تنبيه (o.parentElement)؛ //parentElement يحصل أيضًا على التحكم الأصلي هنا
تنبيه (o.parentElement.parentNode)؛ //parentElement.parentNode يحصل أيضًا على التحكم الأصلي هنا
//o.parentNode.bgColor="red";
o.parentElement.parentNode.bgColor="red";
}
مثال:
انسخ رمز الكود كما يلي:
<أتش تي أم أل>
<الرأس>
<meta http-equiv="Content-Language" c>
<meta http-equiv="Content-Type" c>
<title>صفحة ويب جديدة 1</title>
</الرأس>
<النص البرمجي>
قيمة مجموعة الدالة (v,o)
{
//var obj=document.getElementById(''batchRate'');
//windows.
تنبيه (o.parentNode.innerHTML)؛
تنبيه (o.parentNode)؛
تنبيه (o.parentElement)؛
//o.parentNode.bgColor="red";
o.parentElement.parentNode.bgColor="red";
}
</script>
<الجسم>
<معرف الجدول = "الجدول 1">
<تر>
<td><a >dfsdfdsfdsa</a></td>
<td> </td>
<td> </td>
</tr>