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 index decfa62c7..8fdd3d043 100644 --- 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 `
` DOM node: +عقدة `` DOM node: +عقدة `` (with Pete): +العنصر `
  • ` الثاني (مع Pete): ```js -// get
      , and then get its last element child -document.body.lastElementChild.lastElementChild +// احصل على
        ، ثم احصل على آخر عنصر فرعي له +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 index d97f2748a..d4e2e91e4 100644 --- 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 - -
        Users:
        -
          -
        • John
          • -
        • Pete
          • -
        - + +
        المستخدمون:
        +
          +
        • جون
          • +
        • بيت
          • +
        + ``` -For each of the following, give at least one way of how to access them: -- The `
        ` DOM node? -- The `
          ` DOM node? -- The second `
        • ` (with Pete)? +لكل من التالي، أعطِ طريقة واحدة على الأقل لكيفية الوصول إليها: + +- عقدة `` الثاني (مع 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 index d76936320..5e94ce3ec 100644 --- 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 index 235e83a0c..4082204b2 100644 --- 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 index f2aa86302..5bda72668 100644 --- 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 index 23be59fc1..5f452c3fa 100644 --- 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 `` from the `` and paint them using the code: +سوف تحتاج إلى الحصول على كل `
          ` قطرية من `` وتلوينها باستخدام الكود: ```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 index f7123d70d..75c891953 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -1,107 +1,107 @@ libs: - - d3 - - domtree ---- +- d3 +- domtree +--- -# Walking the DOM +# المشي في الـ DOM -The DOM allows us to do anything with elements and their contents, but first we need to reach the corresponding DOM object. +يسمح لنا الـ DOM بالقيام بأي شيء مع العناصر ومحتوياتها، ولكن أولاً يجب علينا الوصول إلى كائن DOM المقابل. -All operations on the DOM start with the `document` object. That's the main "entry point" to DOM. From it we can access any node. +تبدأ جميع العمليات على الـ DOM مع كائن `document`. هذه هي النقطة الرئيسية للدخول إلى DOM. من خلاله يمكننا الوصول إلى أي عقدة. -Here's a picture of links that allow for travel between DOM nodes: +هذه صورة لروابط تسمح بالسفر بين عقد DOM: ![](dom-links.svg) -Let's discuss them in more detail. +دعونا نناقشهم بمزيد من التفصيل. -## On top: documentElement and body +## في الأعلى: documentElement و body -The topmost tree nodes are available directly as `document` properties: +تتوفر العقد الشجرية العليا مباشرة كخصائص `document`: -`` = `document.documentElement` -: The topmost document node is `document.documentElement`. That's the DOM node of the `` tag. +`html>` = `document.documentElement>` +: العقدة الوثيقة العليا هي `document.documentElement`. هذه هي عقدة DOM للعلامة ``. -`` = `document.body` -: Another widely used DOM node is the `` element -- `document.body`. +`body>` = `document.body>` +: عقدة DOM أخرى مستخدمة على نطاق واسع هي عنصر `body>` -- `document.body>`. -`` = `document.head` -: The `` tag is available as `document.head`. +`head>` = `document.head>` +: تتوفر علامة `` كـ `document.head`. -````warn header="There's a catch: `document.body` can be `null`" -A script cannot access an element that doesn't exist at the moment of running. +````warn header="هناك مشكلة: يمكن أن يكون `document.body`قيمته`null`" +لا يمكن للبرنامج النصي الوصول إلى عنصر غير موجود في لحظة التشغيل. -In particular, if a script is inside ``, then `document.body` is unavailable, because the browser did not read it yet. +على وجه الخصوص، إذا كان البرنامج النصي داخل ``، فإن `document.body` غير متاح، لأن المتصفح لم يقرأه بعد. -So, in the example below the first `alert` shows `null`: +لذلك، في المثال أدناه يظهر التنبيه الأول `null`: ```html run - - - + + + - + - + - + ``` -```` +````` -```smart header="In the DOM world `null` means \"doesn't exist\"" -In the DOM, the `null` value means "doesn't exist" or "no such node". +```smart header="فى عالم ال `null` DOM تعنى \"غير موجود\"" +في ال DOM، تعني قيمة `null` "غير موجود" أو "لا يوجد مثل هذه العقدة". ``` -## Children: childNodes, firstChild, lastChild +## الأطفال: childNodes، firstChild، lastChild -There are two terms that we'll use from now on: +هناك مصطلحان سنستخدمهما من الآن فصاعدًا: -- **Child nodes (or children)** -- elements that are direct children. In other words, they are nested exactly in the given one. For instance, `` and `` are children of `` element. -- **Descendants** -- all elements that are nested in the given one, including children, their children and so on. +- **عقد الأطفال (أو الأطفال)** -- العناصر التي هي أطفال مباشرين. بعبارة أخرى، هم متداخلون بالضبط في المعطى. على سبيل المثال، `` و `` هما أطفال عنصر ``. +- **السلالة** -- جميع العناصر المتداخلة في المعطى، بما في ذلك الأطفال وأطفالهم وهكذا. -For instance, here `` has children `
          ` and `
            ` (and few blank text nodes): +على سبيل المثال، هنا `` لديه أطفال `
            ` و `
              ` (وبعض العقد النصية الفارغة): ```html run -
              Begin
              +
              بداية
              • - Information + معلومات
              ``` -...And descendants of `` are not only direct children `
              `, `
                ` but also more deeply nested elements, such as `
              • ` (a child of `
                  `) and `` (a child of `
                • `) -- the entire subtree. +...وسلالة `` ليست فقط الأطفال المباشرين `
                  `، `
                    ` ولكن أيضًا العناصر المتداخلة بشكل أعمق، مثل `
                  • ` (طفل `
                      `) و `` (طفل `
                    • `) -- الشجرة الفرعية بأكملها. -**The `childNodes` collection lists all child nodes, including text nodes.** +**تدرج مجموعة `childNodes` جميع عقد الأطفال، بما في ذلك العقد النصية.** -The example below shows children of `document.body`: +يوضح المثال أدناه أطفال `document.body`: ```html run -
                      Begin
                      +
                      بداية
                        -
                      • Information
                        • +
                      • معلومات
                      -
                      End
                      +
                      نهاية
                      - ...more stuff... + ...المزيد من المحتوى... ``` -Please note an interesting detail here. If we run the example above, the last element shown is ` -```` +````` -## Siblings and the parent +## الأشقاء والوالد -*Siblings* are nodes that are children of the same parent. +_الأشقاء_ هم العقد التي هي أطفال من نفس الوالد. -For instance, here `` and `` are siblings: +على سبيل المثال، هنا `` و `` هم أشقاء: ```html @@ -192,80 +192,80 @@ For instance, here `` and `` are siblings: ``` -- `` is said to be the "next" or "right" sibling of ``, -- `` is said to be the "previous" or "left" sibling of ``. +- يقال أن `` هو الشقيق "التالي" أو "الأيمن" لـ ``, +- يقال أن `` هو الشقيق "السابق" أو "الأيسر" لـ ``. -The next sibling is in `nextSibling` property, and the previous one - in `previousSibling`. +الشقيق التالي موجود في خاصية `nextSibling`، والسابق - في `previousSibling`. -The parent is available as `parentNode`. +الوالد متاح كـ `parentNode`. -For example: +على سبيل المثال: ```js run -// parent of is -alert( document.body.parentNode === document.documentElement ); // true +// والد هو +alert(document.body.parentNode === document.documentElement); // صحيح -// after goes -alert( document.head.nextSibling ); // HTMLBodyElement +// بعد يأتي +alert(document.head.nextSibling); // HTMLBodyElement -// before goes -alert( document.body.previousSibling ); // HTMLHeadElement +// قبل يأتي +alert(document.body.previousSibling); // HTMLHeadElement ``` -## Element-only navigation +## التنقل الخاص بالعناصر فقط -Navigation properties listed above refer to *all* nodes. For instance, in `childNodes` we can see both text nodes, element nodes, and even comment nodes if there exist. +تشير خصائص التنقل المذكورة أعلاه إلى _جميع_ العقد. على سبيل المثال، في `childNodes` يمكننا رؤية كل من عقد النصوص وعقد العناصر وحتى عقد التعليقات إذا كانت موجودة. -But for many tasks we don't want text or comment nodes. We want to manipulate element nodes that represent tags and form the structure of the page. +ولكن للعديد من المهام لا نريد عقد النصوص أو التعليقات. نريد التلاعب بعقد العناصر التي تمثل العلامات وتشكل هيكل الصفحة. -So let's see more navigation links that only take *element nodes* into account: +لذلك دعونا نرى المزيد من روابط التنقل التي تأخذ _عقد العناصر_ فقط في الاعتبار: ![](dom-links-elements.svg) -The links are similar to those given above, just with `Element` word inside: +الروابط مشابهة لتلك المعطاة أعلاه، فقط مع كلمة `Element` بداخلها: -- `children` -- only those children that are element nodes. -- `firstElementChild`, `lastElementChild` -- first and last element children. -- `previousElementSibling`, `nextElementSibling` -- neighbor elements. -- `parentElement` -- parent element. +- `children` -- فقط تلك الأطفال التي هي عقد عناصر. +- `firstElementChild`، `lastElementChild` -- أول وآخر أطفال العناصر. +- `previousElementSibling`، `nextElementSibling` -- عناصر الجوار. +- `parentElement` -- عنصر الوالد. -````smart header="Why `parentElement`? Can the parent be *not* an element?" -The `parentElement` property returns the "element" parent, while `parentNode` returns "any node" parent. These properties are usually the same: they both get the parent. +````smart header="لماذا `parentElement`؟ هل يمكن أن يكون الوالد *ليس* عنصرًا؟" +تعيد خاصية `parentElement`الوالد "العنصر"، بينما تعيد`parentNode` الوالد "أي عقدة". هذه الخصائص عادة متشابهة: كلاهما يحصل على الوالد. -With the one exception of `document.documentElement`: +مع استثناء واحد لـ `document.documentElement`: ```js run -alert( document.documentElement.parentNode ); // document -alert( document.documentElement.parentElement ); // null +alert(document.documentElement.parentNode); // document +alert(document.documentElement.parentElement); // null ``` -The reason is that the root node `document.documentElement` (``) has `document` as its parent. But `document` is not an element node, so `parentNode` returns it and `parentElement` does not. +السبب هو أن العقدة الجذر `document.documentElement` (``) لديها `document` كوالدها. لكن `document` ليس عقدة عنصر، لذلك تعيد `parentNode` ولا تعيد `parentElement`. -This detail may be useful when we want to travel up from an arbitrary element `elem` to ``, but not to the `document`: +قد يكون هذا التفصيل مفيدًا عندما نريد السفر من عنصر عشوائي `elem` إلى ``، ولكن ليس إلى `document`: ```js -while(elem = elem.parentElement) { // go up till - alert( elem ); +while ((elem = elem.parentElement)) { // اذهب لأعلى حتى + alert(elem); } ``` ```` -Let's modify one of the examples above: replace `childNodes` with `children`. Now it shows only elements: +دعونا نعدل أحد الأمثلة أعلاه: استبدل `childNodes` بـ `children`. الآن يظهر العناصر فقط: ```html run -
                      Begin
                      +
                      بداية
                        -
                      • Information
                        • +
                      • معلومات
                      -
                      End
                      +
                      نهاية
                      @@ -274,60 +274,60 @@ Let's modify one of the examples above: replace `childNodes` with `children`. No ``` -## More links: tables [#dom-navigation-tables] +## المزيد من الروابط: الجداول [#dom-navigation-tables] -Till now we described the basic navigation properties. +حتى الآن قمنا بوصف خصائص التنقل الأساسية. -Certain types of DOM elements may provide additional properties, specific to their type, for convenience. +قد توفر أنواع معينة من عناصر DOM خصائص إضافية، محددة لنوعها، للراحة. -Tables are a great example of that, and represent a particularly important case: +الجداول هي مثال رائع على ذلك، وتمثل حالة مهمة بشكل خاص: -**The `
          `** element supports (in addition to the given above) these properties: -- `table.rows` -- the collection of `` elements of the table. -- `table.caption/tHead/tFoot` -- references to elements ``, ``. -- `table.tBodies` -- the collection of `` elements (can be many according to the standard, but there will always be at least one -- even if it is not in the source HTML, the browser will put it in the DOM). +**عنصر `
          `, `
          `** يدعم (بالإضافة إلى المعطى أعلاه) هذه الخصائص: +- `table.rows` -- مجموعة عناصر `` في الجدول. +- `table.caption/tHead/tFoot` -- مراجع لعناصر ``، ``. +- `table.tBodies` -- مجموعة عناصر `` (يمكن أن يكون هناك العديد وفقًا للمعيار، ولكن سيكون هناك دائمًا واحد على الأقل - حتى لو لم يكن في HTML المصدر، سيضعه المتصفح في DOM). -**``, ``, ``** elements provide the `rows` property: -- `tbody.rows` -- the collection of `` inside. +**عناصر `` و `` و ``** توفر خاصية `rows`: +- `tbody.rows` -- مجموعة `` بداخلها. **``:** -- `tr.cells` -- the collection of ``. -- `tr.sectionRowIndex` -- the position (index) of the given `` inside the enclosing `//`. -- `tr.rowIndex` -- the number of the `` in the table as a whole (including all table rows). +- `tr.cells` -- مجموعة الخلايا `` المعطى. +- `tr.sectionRowIndex` -- الموضع (الفهرس) لـ `` المعطى داخل `//` المحيط. +- `tr.rowIndex` -- رقم `` في الجدول ككل (بما في ذلك جميع صفوف الجدول). -**``. +**``. -An example of usage: +مثال على الاستخدام: ```html run height=100
          `، `
          ` and `` cells inside the given `
          ` و `` داخل `
          ` and ``:** -- `td.cellIndex` -- the number of the cell inside the enclosing `
          ` و ``:** +- `td.cellIndex` -- عدد الخلايا داخل التغليف`
          - + - +
          onetwoواحداثنان
          threefourثلاثةأربعة
          ``` -The specification: [tabular data](https://html.spec.whatwg.org/multipage/tables.html). +المواصفات: [بيانات جدولية](https://html.spec.whatwg.org/multipage/tables.html). -There are also additional navigation properties for HTML forms. We'll look at them later when we start working with forms. +هناك أيضًا خصائص تنقل إضافية لنماذج HTML. سننظر إليهم لاحقًا عندما نبدأ في العمل مع النماذج. -## Summary +## ملخص -Given a DOM node, we can go to its immediate neighbors using navigation properties. +بالنظر إلى عقدة DOM، يمكننا الذهاب إلى جيرانها المباشرين باستخدام خصائص التنقل. -There are two main sets of them: +هناك مجموعتان رئيسيتان منهم: -- For all nodes: `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`. -- For element nodes only: `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`. +- لجميع العقد: `parentNode`، `childNodes`، `firstChild`، `lastChild`، `previousSibling`، `nextSibling`. +- لعقد العنصر فقط: `parentElement`، `children`، `firstElementChild`، `lastElementChild`، `previousElementSibling`، `nextElementSibling`. -Some types of DOM elements, e.g. tables, provide additional properties and collections to access their content. +توفر بعض أنواع عناصر DOM، مثل الجداول، خصائص ومجموعات إضافية للوصول إلى محتوياتها.