Merge pull request #279 from afilahkle/master

afilahkle · web-flow · commit b9fa58dc7022 · 2023-05-16T19:18:13.000+03:00
Walking the DOM
diff --git a/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md b/2-ui/1-document/03-dom-navigation/1-dom-children/solution.md
@@ -1,27 +1,26 @@
-There are many ways, for instance:
+هناك العديد من الطرق، على سبيل المثال:
 
-
-The `<div>` DOM node:
+عقدة `<DOM <div`:
 
 ```js
-document.body.firstElementChild
-// or
-document.body.children[0]
-// or (the first node is space, so we take 2nd)
-document.body.childNodes[1]
+document.body.firstElementChild;
+// أو
+document.body.children[0];
+// أو (العقدة الأولى هي المسافة، لذلك نأخذ الثانية)
+document.body.childNodes[1];
 ```
 
-The `<ul>` DOM node:
+عقدة `<DOM <ul`:
 
 ```js
-document.body.lastElementChild
-// or
-document.body.children[1]
+document.body.lastElementChild;
+// أو
+document.body.children[1];
 ```
 
-The second `<li>` (with Pete):
+العنصر `<li>` الثاني (مع Pete):
 
 ```js
-// get <ul>, and then get its last element child
-document.body.lastElementChild.lastElementChild
+// احصل على <ul>، ثم احصل على آخر عنصر فرعي له
+document.body.lastElementChild.lastElementChild;
 ```
diff --git a/2-ui/1-document/03-dom-navigation/1-dom-children/task.md b/2-ui/1-document/03-dom-navigation/1-dom-children/task.md
@@ -2,23 +2,24 @@ importance: 5
 
 ---
 
-# DOM children
+# اطفال ال DOM
 
-Look at this page:
+انظر إلى هذه الصفحة:
 
 ```html
 <html>
-<body>
-  <div>Users:</div>
-  <ul>
-    <li>John</li>
-    <li>Pete</li>
-  </ul>
-</body>
+  <body>
+    <div>المستخدمون:</div>
+    <ul>
+      <li>جون</li>
+      <li>بيت</li>
+    </ul>
+  </body>
 </html>
 ```
 
-For each of the following, give at least one way of how to access them:
-- The `<div>` DOM node?
-- The `<ul>` DOM node?
-- The second `<li>` (with Pete)?
+لكل من التالي، أعطِ طريقة واحدة على الأقل لكيفية الوصول إليها:
+
+- عقدة `<DOM <div`؟
+- عقدة `<DOM <ul`؟
+- العنصر `<li>` الثاني (مع Pete)؟
diff --git a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/solution.md
@@ -1,6 +1,6 @@
-1. Yes, true. The element `elem.lastChild` is always the last one, it has no `nextSibling`.
-2. No, wrong, because `elem.children[0]` is the first child *among elements*. But there may exist non-element nodes before it. So `previousSibling` may be a text node.
+1. نعم، صحيح. العنصر `elem.lastChild` هو دائمًا الأخير، ولا يوجد له `nextSibling`.
+2. لا، خطأ، لأن `elem.children[0]` هو الطفل الأول _بين العناصر_. ولكن قد توجد عقد غير عنصرية قبله. لذلك قد يكون `previousSibling` عقدة نصية.
 
-Please note: for both cases if there are no children, then there will be an error.
+يرجى الملاحظة: في كلا الحالتين إذا لم يكن هناك أطفال، فسيكون هناك خطأ.
 
-If there are no children, `elem.lastChild` is `null`, so we can't access `elem.lastChild.nextSibling`. And the collection `elem.children` is empty (like an empty array `[]`).
+إذا لم يكن هناك أطفال، فإن `elem.lastChild` هو `null`، لذلك لا يمكننا الوصول إلى `elem.lastChild.nextSibling`. ومجموعة `elem.children` فارغة (مثل مصفوفة فارغة `[]`).
diff --git a/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/task.md b/2-ui/1-document/03-dom-navigation/3-navigation-links-which-null/task.md
@@ -2,9 +2,9 @@ importance: 5
 
 ---
 
-# The sibling question
+# سؤال الأشقاء
 
-If `elem` -- is an arbitrary DOM element node...
+إذا كان `elem` -- هو عقدة DOM عنصرية عشوائية...
 
-- Is it true that `elem.lastChild.nextSibling` is always `null`?
-- Is it true that `elem.children[0].previousSibling` is always `null` ?
+- هل صحيح أن `elem.lastChild.nextSibling` هو دائمًا `null`؟
+- هل صحيح أن `elem.children[0].previousSibling` هو دائمًا `null`؟
diff --git a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/solution.md
@@ -1 +1 @@
-We'll be using `rows` and `cells` properties to access diagonal table cells.
+سنستخدم خصائص `rows` و `cells` للوصول إلى الخلايا القطرية في الجدول.
diff --git a/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md b/2-ui/1-document/03-dom-navigation/4-select-diagonal-cells/task.md
@@ -2,17 +2,17 @@ importance: 5
 
 ---
 
-# Select all diagonal cells
+# حدد كل الخلايا القطرية
 
-Write the code to paint all diagonal table cells in red.
+اكتب الكود لتلوين كل الخلايا القطرية في الجدول باللون الأحمر.
 
-You'll need to get all diagonal `<td>` from the `<table>` and paint them using the code:
+سوف تحتاج إلى الحصول على كل `<td>` قطرية من `<table>` وتلوينها باستخدام الكود:
 
 ```js
-// td should be the reference to the table cell
+// يجب أن يكون td مرجعًا لخلية الجدول
 td.style.backgroundColor = 'red';
 ```
 
-The result should be:
+يجب أن يكون النتيجة:
 
 [iframe src="solution" height=180]
diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-We'll be using `rows` and `cells` properties to access diagonal table cells.
	`1`	+سنستخدم خصائص `rows` و `cells` للوصول إلى الخلايا القطرية في الجدول.