JavaScript HTML DOM 导航

من خلال HTML DOM، يمكنك استخدام علاقات العقد للتنقل في شجرة العقد.

عقد DOM

وفقًا لمواصفات W3C HTML DOM، كل شيء في مستند HTML هو عقد:

  • كل مستند كامل هو عقد مستند
  • كل عنصر HTML هو عقد عنصر
  • النص داخل العنصر HTML هو عقد نص
  • كل خاصية HTML هي عقد خاصية
  • كل التعليقات هي عقد تعليق
شجرة DOM HTML

مع HTML DOM، يمكن الوصول إلى جميع العقد في شجرة العقد باستخدام JavaScript.

يمكن إنشاء عقد جديدة، ويمكن تعديل وإزالة جميع العقد.

علاقات العقد

العقد في شجرة العقد لديهم علاقات هرمية مع بعضهم البعض.

  • المصطلحات (الأب، الابن، الشقيق، parent، child، sibling) تستخدم لوصف هذه العلاقات.
  • في شجرة العقد، يُسمى العقد الأعلى بالجذر (العقد الجذر ليس له أب).
  • كل عقد له عقد أب، باستثناء الجذر (لا يوجد أب للعقد الجذر).
  • يمكن للعقد امتلاك عدد معين من الأبناء
  • الشقيق (الأخ أو الأخت) هو العقد الذي يمتلك نفس الأب.
<html>
   <head>
       <title>دليل DOM</title>
   </head>
  <body>
       <h1>درس الأول في DOM</h1>
       <p>مرحبًا بالعالم!</p>
   </body>
</html>
شجرة DOM HTML

من خلال HTML المذكور أعلاه، يمكنك قراءة المعلومات التالية:

  • <html> هو العقد الجذر
  • <html> ليس له أب
  • <html> هو الأب لـ <head> و <body>
  • <head> هو أول ابن <html>
  • <body> هو الأبناء الأخيرين لـ <html>

في نفس الوقت:

  • <head> لديه ابن واحد: <title>
  • <title> لديه ابن واحد (عقدة نصية): "دليل DOM"
  • <body> لديه ابناين: <h1> و <p>
  • <h1> لديه ابن واحد: "DOM الدرس الأول"
  • <p> لديه ابن واحد: "Hello world!"
  • <h1> و <p> هم إخوة

التنقل بين العقد

من خلال JavaScript، يمكنك استخدام الخاصيات العقدية التالية للتنقل بين العقد

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

العقدة الأصلية والقيمة العقدية

واحدة من الأخطاء الشائعة في معالجة DOM هي الاعتقاد بأن العقدة العنصرية تحتوي على نص.

مثال:

<title id="demo">دليل DOM</title>

على العقدة العنصرية <title> (في المثال السابق) لا يحتويالنص.

إنه يحتوي على نص "دليل DOM".عقدة النص.

يمكن الحصول على قيمة العقدة النصية من خلال العقدة innerHTML الخصائص للوصول إليها:

var myTitle = document.getElementById("demo").innerHTML;

زيارة خصائص innerHTML تساوي زيارة العقدة الأصلية الأولى nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

يمكنك أيضًا زيارة أولى العقدة الأصلية كما يلي:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

فيما يلي ثلاثة أمثلة لاسترجاع <h1> النص العنصرية وإلى <p> في العنصر:

مثال 1

<html>
<body>
<h1 id="id01">مجلة اولى صفحتي</h1>
<p id="id02">مرحبا!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

جرب بنفسك

مثال 2

<html>
<body>
<h1 id="id01">مجلة اولى صفحتي</h1>
<p id="id02">مرحبا!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

جرب بنفسك

مثال 3

<html>
<body>
<h1 id="id01">مجلة اولى صفحتي</h1>
<p id="id02">مرحبا!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

جرب بنفسك

InnerHTML

في هذا الدرس، نستخدم innerHTML استرجاع محتوى العنصر HTML.

على الرغم من ذلك، تعلم الطرق الأخرى المذكورة يساعد في فهم بنية شجرة DOM والتنقل.

root node للDOM

هناك خاصيتان خاصتان تسمحان بالوصول إلى الوثيقة الكاملة:

  • document.body - جسم الوثيقة
  • document.documentElement - الوثيقة الكاملة

مثال

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM مفيد جدًا!</p>
<p>هذا المثال يظهر خاصية <b>document.body</b>.</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

جرب بنفسك

مثال

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM مفيد جدًا!</p>
<p>هذا المثال يظهر خاصية <b>document.documentElement</b>.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

جرب بنفسك

property nodeName

nodeName property يحدد اسم العنصر.

  • property nodeName هو فقط قراءة
  • nodeName للعنصر هو اسم العنصر
  • nodeName للخاصية هو اسم الخاصية
  • nodeName للنص دائمًا #text
  • nodeName للعنصر الوثيقة دائمًا #document

مثال

<h1 id="id01">موقعي الأول</h1>
<p id="id02">مرحبا!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

جرب بنفسك

ملاحظة:nodeName يحتوي دائمًا على اسم العنصر الكبير بالحروف الكبيرة.

property nodeValue

nodeValue property يحدد قيمة العنصر.

  • property nodeValue هو undefined للعنصر
  • property nodeValue هو النص النصي
  • property nodeValue هو قيمة الخاصية

property nodeType

property يعود نوع العنصر.property هو فقط قراءة.

مثال

<h1 id="id01">موقعي الأول</h1>
<p id="id02">مرحبا!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

جرب بنفسك

أهم خاصية nodeType هي:

عقد نوع مثال
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (مستأنف)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- هذه تعليقات -->
DOCUMENT_NODE 9 مستند HTML نفسه (أب <html>)
DOCUMENT_TYPE_NODE 10 <!DOCTYPE html>

نوع 2 تم التخلي عنه في HTML DOM. لم يتم التخلي عنه في XML DOM.