دليل أساسي لـ JavaScript

مكتبات JavaScript

وظائف JavaScript

JS HTML DOM

BOM لمتصفح JS

دليل أساسي لـ AJAX

دليل مرجعي لـ JavaScript

نموذج وحدة المتصفح JS تغيير خصائص العنصر بواسطة JS DOM

تنقل JS DOM

HTML DOM يسمح لـ JavaScript بتصفح شجرة النقاط باستخدام علاقات النقاط.

نقاط DOM

وفقاً لمواصفات W3C HTML DOM، كل محتوى وثيقة HTML هو نقطة:

الكلود الكامل هو نقطة وثيقة.
كل عنصر HTML هو نقطة عنصر.
النص داخل العنصر HTML هو نقطة نصية.
كل خاصية HTML هي نقطة خاصية (غير مستخدمة)
كل التعليقات هي نقاط تعليق.

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

يمكن إنشاء نقاط جديدة ويمكن تعديل أو حذف جميع النقاط.

علاقات النقاط

علاقات النقاط في شجرة النقاط.

مصطلحات "والد"، "طفل" و "أشقاء" تستخدم لوصف العلاقات.

في شجرة النقاط، النقطة العليا تُدعى الجذر (أو نقطة الجذر)
كل نقطة لديها والد واحد فقط، باستثناء النقطة الجذر (النقطة الجذر ليس لديها والد)
يمكن للنقطة أن تحتوي على عدة أطفال
الأشقاء (الأشقاء) هم عناصر تحت نفس الوالد

مثال

<html>
　　<head>
<title>تعليمية DOM</title>
　　</head>
　　
<h1>عناصر DOM</h1>
<p>مرحبًا، العالم</p>
　　
</html>

من خلال HTML أعلاه، يمكنك قراءة:
<html>الشجرة الجذر، وليس لديه والدين
<html>والد <head> و <body>
<head>أول طفل <html>
<body>آخر طفل <html>
و:
<head>عنوانين: <title>
<title>عنوانين: نص واحد (نقطة نصية): "تعليمية DOM"
<body>عنوانين: <h1> و <p>
<h1>لديه ابن (نود نصي)：“DOM Nodes”
<p>لديه ابن (نود نصي)：“Hello،world”
<h1>و<p>مستوى واحد

التنقل بين العناصر

يمكنك استخدام الخاصيات التالية للتنقل بين العناصر التي تحتوي على JavaScript:

parentNode

childNodes[nodenumber]

استدعاء الأبناء

يمكنك استخدامfirstChildللوصول إلى العنصر الأول المباشر للعنصر باستخدام خاصية DOM.

مثال

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName); // يعود SPAN
</script>

اختبار لـ ‹/›

ملاحظة:في المثال السابق، الناتج سيكون#text،بسبب إدراج نود نصية للحفاظ على الفراغ بين العلامات.#textالعنصر، من مسافة واحدة إلى عدة مسافات، علامات النص، وما إلى ذلك.

لكن، إذا تم حذف الفراغات، فإنها لن تُدرج#textالعنصر، وسوف يصبح عنصر span العنصر الأول للفقرة:

مثال

<p id="para"><span>First span</span> <b>First Bold</b></p>
<script>
var para = document.getElementById("para");
alert(para.firstChild.nodeName); // يعود SPAN
</script>

الاختبار لرؤية‹/›

يمكنك أيضًا استدعاء الأولاد الأولين بهذه الطريقة:

مثال

para.childNodes[0].nodeName; // يعود SPAN

الاختبار لرؤية‹/›

يمكنك استخدامlastChildللوصول إلى العنصر الأخير المباشر للعنصر باستخدام خاصية DOM.

مثال

para.lastChild.nodeName; // يعود B

الاختبار لرؤية‹/›

لتفادي ظهور#textأو#commentالنقطةfirstChildوlastChildيمكنك اختيار استخدام هذا المسألة:

firstElementChildتعيد الخاصية العنصر الأول من بين الأبناء للمعرف المحدد.

مثال

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.firstElementChild.nodeName); // يعود SPAN
</script>

الاختبار لرؤية‹/›

lastElementChildتعيد الخاصية العنصر الأخير من بين الأبناء للمعرف المحدد.

مثال

<p id="para">
　　<span>First span</span>
　　<b>First Bold</b>
</p>
<script>
var para = document.getElementById("para");
alert(para.lastElementChild.nodeName); // يعود B
</script>

الاختبار لرؤية‹/›

ملاحظة:هذاnodeNameهذه الخاصية قابلة للقراءة فقط، وتعيد اسم العنصر الحالي كنص.

استدعاء العنصر الأم

يمكنك استخدامparentNodeيمكنك استخدام الخاصية لاستدعاء الوالد للعنصر المحدد في شجرة DOM.

مثال

<div>
　　　<p>هذا هو أول علامة P داخل DIV</p>
　　　<p id="para">هذا هو الثاني P داخل DIV</p>
　　　<p>هذا هو الثالثة P داخل DIV</p>
</div>
<script>
var para = document.getElementById("para");
alert(para.parentNode.nodeName); // يرجع DIV
</script>

الاختبار لرؤية‹/›

يمكنك أيضًا استخدامparentElementميزة تُرجع العنصر الأم للعنصر المحدد.

لتحديد العنصر الأخضر والسابق

يمكنك استخدامpreviousSiblingوnextSiblingميزة لتحديد العنصر السابق واللاحق في شجرة DOM.

مثال

<div id="div-1">هذا هو div-1</div>
<div id="div-2">هذا هو div-2</div>
<div id="div-3">هذا هو div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousSibling.nodeName);
alert(x.nextSibling.nodeName);
</script>

الاختبار لرؤية‹/›

أو، يمكنك استخدامpreviousElementSiblingوnextElementSiblingلتجاوز أي نقاط نصية فارغة للحصول على العنصر الأخير من نفس المستوى.

مثال

<div id="div-1">هذا هو div-1</div>
<div id="div-2">هذا هو div-2</div>
<div id="div-3">هذا هو div-3</div>
<script>
var x = document.querySelector("#div-2");
alert(x.previousElementSibling.textContent);
alert(x.nextElementSibling.textContent);
</script>

الاختبار لرؤية‹/›

textContentميزة تمثل محتوى النص للعنصر.

العنصر الجذر للـ DOM

هذه الميزتان تُتيحان الوصول إلى الوثيقة بأكملها:

document.bodyميزة تُضبط أو تُرجع العنصر.

مثال

<!DOCTYPE html>
<html>
<p>مرحبًا، <br>عالم!</p>
<div>
　　<p>العنصر الجذر للـ DOM</p>
　　<p>ميزة document.body تُضبط أو تُرجع العنصر الجسم للوثيقة.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</html>

الاختبار لرؤية‹/›

document.documentElementميزة تُرجع الوثيقة.<html>العنصر.

مثال

<!DOCTYPE html>
<html>
<p>مرحبًا، <br>عالم!</p>
<div>
　　<p>العنصر الجذر للـ DOM</p>
　　<p>ميزة document.documentElement تُرجع العنصر الجذر للوثيقة.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</html>

الاختبار لرؤية‹/›

خاصية nodeType

nodeTypeيتم إرجاع نوع النقطة المحدد بالرقم.

مثال

var x = document.getElementById("myPara").nodeType;

الاختبار لرؤية‹/›

شجرة DOM تتكون من أنواع مختلفة من النقاط، مثل العناصر، النص، التعليقات، إلخ.

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

الجدول أدناه يعرض أبرز أنواع النقاط:

النقطة	نوع	مثال
ELEMENT_NODE	1	<p class="heading">مرحبًا العالم</p>
ATTRIBUTE_NODE	2	class =“heading”（غير مستخدمة)
TEXT_NODE	3	مرحبًا العالم
COMMENT_NODE	8	<！--هذا هو التعليق-->
DOCUMENT_NODE	9	HTML المستند نفسه (الوالد من <html>)
DOCUMENT_TYPE_NODE	10	<！doctype html>

نموذج وحدة المتصفح JS تغيير خصائص العنصر بواسطة JS DOM