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

يصف اجتياز DOM كيفية التنقل في البنية الشبيهة بالشجرة التي تنشئها مستندات HTML. فيما يلي دليل كامل حول كيفية اجتياز DOM باستخدام JavaScript.

ما هو عبور DOM؟

ال طراز كائن المستند، أو DOM باختصار ، هو تمثيل يشبه الشجرة لمستند HTML. يوفر API يتيح لك ، بصفتك مطور الويب ، التفاعل مع موقع ويب باستخدام JavaScript.

يُعرف كل عنصر في DOM بالعقدة. فقط من خلال DOM ، يمكنك التعامل مع بنية مستند HTML ومحتوياته ونمطه.

اجتياز DOM (يُسمى أيضًا المشي أو التنقل في DOM) هو عملية تحديد العقد في شجرة DOM من العقد الأخرى. ربما تكون بالفعل على دراية بعدة طرق لـ الوصول إلى العناصر في شجرة DOM من خلال معرفهم أو صنفهم أو اسم العلامة. يمكنك استخدام طرق مثل document.querySelector () و document.getElementById () لنفعل ذلك.

هناك طرق أخرى يمكنك استخدامها جنبًا إلى جنب ، للتنقل في DOM بطرق أكثر فعالية وقوة. كما يمكنك أن تتخيل ، من الأفضل البحث من نقطة معروفة بالفعل على الخريطة بدلاً من إجراء بحث كامل.

instagram viewer

على سبيل المثال ، يعد تحديد عنصر فرعي من أصله أسهل وأكثر كفاءة من البحث عنه في جميع أنحاء الشجرة بأكملها.

مستند نموذج لاجتيازه

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

تتضمن الطريقة الأولى البحث عن عنصر يبدأ بالعقدة العلوية (مثل عقدة المستند) والانتقال إلى أسفل.

الطريقة الثانية هي العكس: تنتقل من عنصر داخلي إلى أعلى الشجرة ، بحثًا عن عنصر خارجي. الطريقة الأخيرة هي عندما تبحث عن عنصر من عنصر آخر في نفس المستوى (بمعنى أن العنصرين أشقاء) في شجرة الوثيقة.

للتوضيح ، ضع في اعتبارك مثال مستند HTML هذا:

<! DOCTYPE html>
<أتش تي أم أل لانج ="ar">
<رأس>
<meta charset ="UTF-8" />
<meta http-equiv ="متوافق مع X-UA" المحتوى ="IE = حافة" />
<اسم التعريف ="منفذ العرض" المحتوى ="العرض = عرض الجهاز ، المقياس الأولي = 1.0" />
<عنوان>نموذج الصفحة</title>
</head>
<جسم>
<رئيسي>
<h1>عنوان صفحتي</h1>
<ص>تسمية توضيحية لطيفة هنا</ ص>


<فئة المادة ="المادة الأولى">
<h2>قائمة الفواكه الرائعة</h2>
<ص>يجب أن تأكل الفاكهة</ ص>


<فئة div ="المجمع -1">
<فئة ul ="قائمة التفاح">
<فئة لي ="تفاحة">تفاح</li>
<فئة لي ="البرتقالي">البرتقال</li>
<فئة لي ="أفوكادو">افوكادو</li>
<فئة لي ="عنب">
 العنب


<ماي>
<فئة لي ="النوع 1">قطرات القمر</li>
<لي>سلطانة</li>
<لي>كونكورد</li>
<لي>قرمزي بدون بذور</li>
</ul>
</li>
<فئة لي ="موز">موز</li>
</ul>


<فئة الزر ="BTN-1">اقرأ القائمة الكاملة</button>
</div>
</article>


<فئة المادة ="الثاني_المقالة">
<h2>أماكن رائعة في كينيا</h2>
<ص>يجب زيارة الأماكن في كينيا</ ص>


<فئة div ="المجمع -2">
<فئة ul ="قائمة الأماكن">
<لي>ماساي مارا</li>
<لي>شاطئ دياني</li>
<لي>شاطئ واتامو</li>
<لي>حديقة أمبوسيلي الوطنية</li>
<لي>بحيرة ناكورو</li>
</ul>


<فئة الزر ="BTN-2">اقرأ القائمة الكاملة</button>
</div>
</article>
</main>
</body>
</html>

عبور DOM إلى أسفل

يمكنك اجتياز DOM إلى أسفل باستخدام إحدى طريقتين. الطريقة الأولى هي طريقة المحدد الشائعة (element.querySelector أو element.querySelectorAll). ثانيًا ، يمكنك استخدام ملف أطفال أو ChildNodes ملكية. هناك أيضًا خاصيتان خاصتان أخريان ، وهما الطفل الأخير و أولا.

استخدام طرق المحدد

تسمح لك طرق querySelector () بالبحث عن عنصر واحد أو أكثر يطابق محددًا معينًا. على سبيل المثال ، يمكنك البحث عن العنصر الأول باستخدام فئة "first-article" باستخدام document.querySelector (". first-article"). وجلب كل شيء h2 العناصر الموجودة في المستند ، يمكنك استخدام ملحق الاستعلام طريقة: document.querySelectorAll ('h2'). ال الاستعلام طريقة إرجاع قائمة العقدة من العناصر المطابقة ؛ يمكنك تحديد كل عنصر باستخدام تدوين القوس:

مقدار ثابت العناوين = وثيقة.querySelectorAll ('h2') ،
مقدار ثابت firstHeading = العناوين [0]; // اختيار أول عنصر h2
مقدار ثابت secondHeading = العناوين [1]; // اختيار عنصر h2 الثاني

المصيد الرئيسي عند استخدام طرق المحدد هو أنه يجب عليك استخدام الرموز المناسبة ، عند الاقتضاء ، قبل المحدد كما تفعل في CSS. على سبيل المثال ، ".classname" للفئات و "#id" للمعرفات.

تذكر أن النتيجة ستكون عنصر HTML ، وليس المحتوى الداخلي للعنصر المحدد فقط. للوصول إلى المحتوى ، يمكنك استخدام العقدة داخلي HTML ملكية:

وثيقة.querySelector ('. orange'). innerHTML

استخدام الأطفال أو خصائص childNodes

ال أطفال تحدد الخاصية جميع العناصر الفرعية الموجودة مباشرة ضمن عنصر معين. فيما يلي مثال على ملف أطفال الملكية في العمل:

مقدار ثابت قائمة التفاح = وثيقة.querySelector ('. apple-list') ؛
مقدار ثابت التفاح = appleList.children ؛ 
وحدة التحكم.log (التفاح) ؛

تسجيل تفاح إلى وحدة التحكم ستعرض مجموعة من جميع عناصر القائمة مباشرة أسفل العنصر مع فئة "قائمة تفاحة" كمجموعة HTML. مجموعة HTML عبارة عن كائن يشبه المصفوفة ، لذا يمكنك استخدام تدوين الأقواس لتحديد العناصر ، كما هو الحال مع querySelectorAll.

على عكس أطفال ملكية، ChildNodes تُرجع جميع العقد الفرعية المباشرة (وليس فقط العناصر الفرعية). إذا كنت مهتمًا فقط بالعناصر الفرعية ، قل فقط عناصر القائمة ، فاستخدم أطفال ملكية.

استخدام خصائص LastChild و firstChild الخاصة

هاتان الطريقتان ليست قوية مثل الطريقتين الأوليين. كما توحي أسمائهم ، فإن الطفل الأخير و أولا تقوم الخصائص بإرجاع العقدتين الفرعيتين الأخيرتين والأولى للعنصر.

مقدار ثابت قائمة التفاح = وثيقة.querySelector ('. apple-list') ؛
مقدار ثابت firstChild = appleList.firstChild ؛
مقدار ثابت lastChild = appleList.lastChild ؛

عبور DOM لأعلى

يمكنك التنقل لأعلى في DOM باستخدام امتداد الوالدين (أو عقدة الأم) و الأقرب ملكيات.

استخدام parentElement أو parentNode

كلاهما الوالدين أو عقدة الأم تتيح لك الخصائص تحديد العقدة الأصلية للعنصر المحدد بمستوى واحد لأعلى. الاختلاف الحاسم هو ذلك الوالدين يختار فقط العقدة الأصلية التي هي عنصر. على الجانب الآخر، عقدة الأم يمكن تحديد أحد الوالدين بغض النظر عما إذا كان عنصرًا أو نوع عقدة مختلف.

في نموذج التعليمات البرمجية أدناه ، نستخدم الوالدين لتحديد div مع فئة "wrapper-1" من "apple-list":

مقدار ثابت قائمة التفاح = وثيقة.querySelector ('. apple-list') ؛
مقدار ثابت parentDiv = appleList.parentElement ؛ 
وحدة التحكم.log (parentDiv) ؛ // يعرض عنصر div مع غلاف الفئة 1

استخدام أقرب عقار

ال الأقرب تحدد الخاصية العنصر الأصل الأول الذي يطابق محددًا محددًا. يتيح لك تحديد مستويات متعددة للأعلى بدلاً من مستوى واحد. على سبيل المثال ، إذا كان لدينا بالفعل الزر مع تحديد الفئة "btn-1" ، فيمكننا تحديد رئيسي باستخدام عنصر الأقرب الملكية على النحو التالي:

مقدار ثابت btn1 = وثيقة.querySelector ('. btn-1');
const mainEl = btn1.closest ('رئيسي');
وحدة التحكم.log (mainEl) ؛ // يعرض العنصر الرئيسي

يحب الاستعلام و الاستعلام، استخدم المحددات المناسبة في الأقرب طريقة.

عبور جانبي DOM

هناك طريقتان متاحتان للمشي الجانبي في DOM. يمكنك استخدام العنصر التالي أو العنصر السابق. يستخدم العنصر التالي لتحديد عنصر الشقيق التالي و العنصر السابق لاختيار الأخ السابق.

مقدار ثابت برتقالي = وثيقة.querySelector ('. orange') ؛
مقدار ثابت تفاحة = orange.previousElementSibling ؛
مقدار ثابت الأفوكادو = orange.nextElementSibling ؛

هناك أيضا ما يعادلها التالي و الشقيق السابق الخصائص التي تختار أيضًا من جميع أنواع العقد ، وليس فقط العناصر.

أنجز المزيد من خلال تسلسل خصائص وأساليب اجتياز DOM

يمكن لجميع الطرق والخصائص أعلاه أن تمكنك من تحديد أي عقدة في DOM. ومع ذلك ، في بعض الحالات ، قد ترغب في التحرك لأعلى أولاً ، ثم لأسفل أو جانبيًا. في هذه الحالة ، سيكون ربط الخصائص المختلفة معًا مفيدًا.