You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/1-document/02-dom-nodes/article.md
+20-20Lines changed: 20 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,13 +8,13 @@ libs:
8
8
9
9
تُعد العلامات (الوسوم) عصب مستند HTML.
10
10
11
-
وفقًا لنموذج كائن المستند (DOM)، فإن كل علامة (وسم) من علامات HTML يُعد كائن. وكل العلامات المُدرجة داخل هذه العلامة تُعد أبناءً لها. كما يُعد النص الموجود داخل هذه العلامة كائنًا أيضا.
11
+
وفقًا لنموذج كائن المستند (DOM)، فإن كل علامة (وسم) من علامات HTML يُعد كائنًا. وكل العلامات المُدرجة داخل هذه العلامة تُعد أبناءً لها. كما يُعد النص الموجود داخل هذه العلامة كائنًا أيضا.
12
12
13
13
يُمكن الوصول إلى جميع تلك الكائنات باستخدام الجافاسكريبت؛ كما يُمكن استخدامهم لتعديل الصفحة.
14
14
15
15
على سبيل المثال، فإن `document.body` هو الكائن المُمثل للعلامة `<body>`.
16
16
17
-
سيؤدي تشغيل الكود التالي لجعل خلفية العلامة `<body>` أحمر اللون لمدة ثلاث ثوانٍ:
17
+
سيؤدي تشغيل الشفرة التالية لجعل خلفية العلامة `<body>` أحمر اللون لمدة ثلاث ثوانٍ:
18
18
19
19
```js run
20
20
document.body.style.background='red'; // لجعل الخلفية حمراء اللون
في الصورة أعلاه، يؤدي الضغط على أي عقدة عنصر إلى تمديد او طي أبنائها من العلامات.
60
+
في الصورة أعلاه، يؤدي الضغط على أي عقدة عنصر إلى تمديد أو طي أبنائها من العلامات.
61
61
```
62
62
63
63
كل عقدة في هذه الشجرة تُمثل كائنًا.
64
64
65
-
العلامات ما هي إلا *عقد العنصر* (أو تُعرف بالعناصر اختصارا)، وهي المُكونة لبنية الشجرة. `<html>` هو الجذر، ويُمثل كلا من الـ `<head>` والـ `<body>`ابناؤه، إلخ.
65
+
العلامات ما هي إلا *عقد العنصر* (أو تُعرف بالعناصر اختصارا)، وهي المُكونة لبنية الشجرة. `<html>` هو الجذر، ويُمثل كلا من الـ `<head>` والـ `<body>`أبناؤه، إلخ.
66
66
67
-
يُشكل النص الموجود داخل العناصر *عقد النصوص*، والمسمى `#text`. تشتمل عقدة النص على سلسلة واحدة فقط. قد لا تحتوي عقدة النص على أية ابناء، وهي دائما تُمثل ورقة في هذه الشجرة.
67
+
يُشكل النص الموجود داخل العناصر *عقد النصوص*، والمسمى `#text`. تشتمل عقدة النص على سلسلة واحدة فقط. قد لا تحتوي عقدة النص على أية أبناء، وهي دائما تُمثل ورقة في هذه الشجرة.
68
68
69
69
على سبيل المثال، العلامة `<title>` تحتوي على النص `"عن الظباء"`.
1. يتم تجاهل المسافات والأسطر الجديدة التي تأتي قبل الـ `<head>` وذلك لأسباب تاريخية.
80
80
2. إذا وُضع شيء بعد الـ `</body>`، فإنه سيُنقل تلقائيا إلى داخل الـ `body` وذلك في نهايته؛ حيث تتطلب مواصفات HTML أن يكون كل المحتوى داخل الـ `<body>`. ولذلك، فإنه من غير الممكن وجود أية مسافات بعد الـ `</body>`.
81
81
82
-
كل شيء يكون واضحا في بقية الحالات، فإذا كانت هناك مسافات في المستند (تماما مثل أي حرف)، فإنها تُسبح عقد نص في نموذج كائن المستند، وإذا اُزيلت فإن أيا منها لن يكون موجودا.
82
+
كل شيء يكون واضحا في بقية الحالات، فإذا كانت هناك مسافات في المستند (تماما مثل أي حرف)، فإنها تُصبح عقد نص في نموذج كائن المستند، وإذا اُزيلت فإن أيا منها لن يكون موجودا.
83
83
84
84
فيما يلي لا توجد عقد نصية تحتوي على مسافات فقط:
85
85
@@ -96,19 +96,19 @@ let node2 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,
96
96
drawHtmlTree(node2, 'div.domtree', 690, 210);
97
97
</script>
98
98
99
-
```smart header="عادة ما تُخفى المسافات في بداية/نهاية السلاسل، وفي العقد النصية التي تحتوي على مسافات فقط من الادوات"
99
+
```smart header="عادة ما تُخفى المسافات في بداية/نهاية السلاسل، وفي العقد النصية التي تحتوي على مسافات فقط من الأدوات"
100
100
أدوات المتصفح (التي سيتم تغطيتها قريبا) والتي تعمل مع نموذج كائن المستند لا تعرض عادة المسافات في بداية/نهاية النص، والعقد النصية الفارغة (فواصل الأسطر) بين العلامات.
101
101
102
102
وبهذه الطريقة، توفر أدوات المطور مساحة الشاشة.
103
103
104
-
في صور نموذج كائن المستند الأخرى، سنحذفها أحيانا عندما تكون غير متصلة بالموضوع. عادة، فإن هذه المسافات لا تؤثر على كيفية عرض المستند.
104
+
في صور نموذج كائن المستند الأخرى، سنحذفها أحيانا عندما تكون غير متصلة بالموضوع. عادة، لا تؤثر هذه المسافات على كيفية عرض المستند.
105
105
```
106
106
107
107
## التصحيح التلقائي
108
108
109
109
عندما يواجه المتصفح ترميز HTML مكتوب بشكل غير صحيح، فإنه يقوم بتصحيحه تلقائيا عند إنشاء نموذج كائن المستند DOM.
110
110
111
-
على سبيل المثال,تتواجد العلامة `<html>` في الأعلى؛ وذلك حتى في حال عدم تواجدها في المستند، فإنها تظل متواجدة في نموذج كائن المستند؛ وذلك لأن المتصفح يقوم بإنشائها. وينطبق الأمر ذاته على علامة `<body>`.
111
+
على سبيل المثال، توجد العلامة `<html>` في الأعلى؛ وذلك حتى في حال عدم تواجدها في المستند، فإنها تظل متواجدة في نموذج كائن المستند؛ وذلك لأن المتصفح يقوم بإنشائها. وينطبق الأمر ذاته على علامة `<body>`.
112
112
113
113
مثال: إذا كان ملف الـ HTML يحتوى فقط على كلمة `"مرحبا"`، فإن المتصفح سيقوم بتضمينه داخل علامتي `<html>` و `<body>`، كما سيقوم بإضافة علامة `<head>`؛ وعليه يكون نموذج كائن المستند كما يلي:
114
114
@@ -142,8 +142,8 @@ let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,
142
142
drawHtmlTree(node4, 'div.domtree', 690, 360);
143
143
</script>
144
144
145
-
````warn header="الجداول دائما ما تحتوي على `<tbody>`"
146
-
تُشكل الجداول "حالة خاصة" مُثيرة للإهتمام. وفقا لمواصفات نموذج كائن المستند، ينبغي أن يكون لدى الجداول علامة `<tbody>`، ولكنها قد تكون محذوفة من HTML (الرسمي). ويقوم المتصفح لاحقا بإنشاء `<tbody>` تلقائيا في نموذج كائن المستند.
145
+
````warn header="الجدأول دائما ما تحتوي على `<tbody>`"
146
+
تُشكل الجدأول "حالة خاصة" مُثيرة للإهتمام. وفقا لمواصفات نموذج كائن المستند، ينبغي أن يكون لدى الجدأول علامة `<tbody>`، ولكنها قد تكون محذوفة من HTML (الرسمي). ويقوم المتصفح لاحقا بإنشاء `<tbody>` تلقائيا في نموذج كائن المستند.
147
147
148
148
ملف HTML:
149
149
@@ -160,14 +160,14 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":
160
160
drawHtmlTree(node5, 'div.domtree', 600, 200);
161
161
</script>
162
162
163
-
أترى؟ لقد وُجدت علامة `<tbody>` من العدم. يجب أن تضع هذا في الاعتبار أثناء العمل مع الجداول لتجنب المفاجأت.
163
+
أترى؟ لقد وُجدت علامة `<tbody>` من العدم. يجب أن تضع هذا في الاعتبار أثناء العمل مع الجدأول لتجنب المفاجآت.
164
164
````
165
165
166
166
## أنواع العقد الأخرى
167
167
168
168
هناك بعض أنواع العقد الأخرى إلى جانب العناصر وعقد النص.
**كل شيء في HTML، حتى التعليقات، تصبح جزءا من نموذج كائن المستند.**
201
201
202
-
حتى تعليمة `<!DOCTYPE...>` في بداية HTML هي أيضا عقدة من نموذج كائن المستند. فهي تتواجد في شجرة نموذج كائن المستند قبل `<html>` مباشرة. لن نتعامل مع تلك العقدة، حتى أنها لا تُرسم على الرسوم البيانية لهذا السبب، ولكنها موجودة.
202
+
حتى تعليمة `<!DOCTYPE...>` في بداية HTML هي أيضا عقدة من نموذج كائن المستند. فهي توجد في شجرة نموذج كائن المستند قبل `<html>` مباشرة. لن نتعامل مع تلك العقدة، حتى أنها لا تُرسم على الرسوم البيانية لهذا السبب، ولكنها موجودة.
203
203
204
204
كائن `المستند`، والذي يُمثل المستند بأكمله، يُكون عقدة من نموذج كائن المستند أيضا.
يُرجى ملاحظة أن بنية نموذج كائن المستند في أدوات المطورين مُبسطة. حيث يتم عرض العُقد النصية كنص فقط؛ ولا توجد أي عُقد نصية "فارغة" (مسافة فقط) على الإطلاق. وهذا جيد، لأننا مهتمون في معظم الأحيان بعُقد العناصر.
228
228
229
-
يسمح لنا النقر على الزر <span class="devtools" style="background-position:-328px -124px"></span> في الزاوية اليُسرى العُليا باختيار عقدة من صفحة الويب باستخدام الفأرة (أو أجهزة التأشير الأخرى) و "فحصها" (الانتقال إليها في علامة تبويب العناصر). وهذا يكون رائعا عندما يكون لدينا صفحة HTML ضخمة (ونموذج كائن مستند ضخم بالتبعية) ونود أن نرى مكان عنصر معين فيه.
229
+
يسمح لنا النقر على الزر <span class="devtools" style="background-position:-328px -124px"></span> في الزأوية اليُسرى العُليا باختيار عقدة من صفحة الويب باستخدام الفأرة (أو أجهزة التأشير الأخرى) و "فحصها" (الانتقال إليها في علامة تبويب العناصر). وهذا يكون رائعا عندما يكون لدينا صفحة HTML ضخمة (ونموذج كائن مستند ضخم بالتبعية) ونود أن نرى مكان عنصر معين فيه.
230
230
231
231
هناك طريقة أخرى للقيام بذلك وهي النقر بزر الفأرة الأيمن على صفحة الويب واختيار "فحص Inspect" في قائمة السياق.
أثناء العمل مع نموذج كائن المستند، قد نرغب أيضا في تطبيق الجافاسكربت عليه. مثل: ايجاد عقدة وتشغيل بعض التعليمات البرمجية لتعديلها، وذلك لرؤية النتيجة. إليك بعض النصائح للتنقل بين علامتي التبويب Elements و console.
245
+
أثناء العمل مع نموذج كائن المستند، قد نرغب أيضا في تطبيق الجافاسكربت عليه. مثل: إيجاد عقدة وتشغيل بعض التعليمات البرمجية لتعديلها، وذلك لرؤية النتيجة. إليك بعض النصائح للتنقل بين علامتي التبويب Elements و console.
246
246
247
247
في البداية:
248
248
249
249
1. حدد أول عنصر `<li>` في تبويب Elements.
250
-
2. اضغط `مفتاح:Esc`-- سيفتح الـ console اسفل علامة تبويب Elements مباشرة.
250
+
2. اضغط `مفتاح:Esc`-- سيفتح الـ console أسفل علامة تبويب Elements مباشرة.
251
251
252
252
الآن أخر عنصر تم تحديده متاح كـ `$0`، والعنصر الذي كان مُحددا قبله هو `$1` إلخ.
هذه هي كيفية الحصول على عقدة من علامة تبويب Elements في console.
259
259
260
-
ووعلى عكس المثال السابق، فإذا كان هناك متغير يُشير إلى عقدة من نموذج كائن المستند، فيُمكننا استخدام الأمر `فحص(العقدة) inspect(node)` في الـ Console لرؤيته في جزء العناصر.
260
+
وعلى عكس المثال السابق، فإذا كان هناك متغير يُشير إلى عقدة من نموذج كائن المستند، فيُمكننا استخدام الأمر `فحص(العقدة) inspect(node)` في الـ Console لرؤيته في جزء العناصر.
261
261
262
-
أو يُمكننا فقط اخراج عقدة نموذج كائن المستند في الـ console واستكشافها "في مكانها"، مثل: `document.body` أدناه:
262
+
أو يُمكننا فقط إخراج عقدة نموذج كائن المستند في الـ console واستكشافها "في مكانها"، مثل: `document.body` أدناه:
قمنا هنا بتغطية الأساسيات والإجراءات الأكثر استخدامًا والأكثر أهمية للبدء بها. هناك وثائق شاملة حول Chrome Developer Tools على <https://developers.google.com/web/tools/chrome-devtools>. أفضل طريقة لتعلم الأدوات هي بالنقر هنا وهناك، وقراءة القوائم: حيث مُعظم الخيارات واضحة. لاحقًا، عندما تعرفها مُجملة، اقرأ وثائقها وتعلم الباقي.
281
281
282
-
تحتوي عقد نموذج شجرة المستند على خصائص وأساليب تتيح لنا التنقل بينها وتعديلها والتنقل في الصفحة والمزيد. سنتناولها في الفصول القادمة.
282
+
تحتوي عقد نموذج شجرة المستند على خصائص وأساليب تتيح لنا التنقل بينها وتعديلها والتنقل في الصفحة والمزيد. سنتنأولها في الفصول القادمة.
0 commit comments