Skip to content

Commit 1832b14

Browse files
authored
Merge pull request #23 from Salah856/master
Node properties: type, tag and contents
2 parents 42d5909 + e29f635 commit 1832b14

File tree

10 files changed

+230
-233
lines changed

10 files changed

+230
-233
lines changed

2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
There's a catch here.
1+
هناك صيد هنا.
22

3-
At the time of `<script>` execution the last DOM node is exactly `<script>`, because the browser did not process the rest of the page yet.
3+
في وقت تنفيذ `<script>` ، كانت العقدة DOM الأخيرة هي `<script>` بالضبط ، لأن المستعرض لم يقم بمعالجة باقي الصفحة بعد.
44

5-
So the result is `1` (element node).
5+
لذلك تكون النتيجة `1` (عقدة العنصر).
66

77
```html run height=60
88
<html>

2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
importance: 5
1+
درجة الأهمية: 5
22

33
---
44

5-
# What's in the nodeType?
5+
# ماذا يوجد في العقدة؟
66

7-
What does the script show?
7+
ماذا يظهر النص؟
88

99
```html
1010
<html>
Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1-
Let's make a loop over `<li>`:
1+
لنقم بعمل iteration علي `<li>`:
22

33
```js
44
for (let li of document.querySelectorAll('li')) {
55
...
66
}
77
```
88

9-
In the loop we need to get the text inside every `li`.
10-
11-
We can read the text from the first child node of `li`, that is the text node:
9+
في الحلقة ، نحتاج إلى إدخال النص داخل كل "li".
1210

11+
يمكننا قراءة النص من العقدة الفرعية الأولى لـ `li` ، وهي العقدة النصية:
1312
```js
1413
for (let li of document.querySelectorAll('li')) {
1514
let title = li.firstChild.data;
@@ -18,4 +17,5 @@ for (let li of document.querySelectorAll('li')) {
1817
}
1918
```
2019

21-
Then we can get the number of descendants as `li.getElementsByTagName('li').length`.
20+
ثم يمكننا الحصول على عدد الchildren items
21+
`li.getElementsByTagName('li').length`.
Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
importance: 5
1+
الأهمية: 5
22

33
---
44

5-
# Count descendants
5+
# عد الأحفاد
66

7-
There's a tree structured as nested `ul/li`.
7+
هناك شجرة منظمة على أنها متداخلة `ul / li`.
88

9-
Write the code that for each `<li>` shows:
10-
11-
1. What's the text inside it (without the subtree)
12-
2. The number of nested `<li>` -- all descendants, including the deeply nested ones.
9+
اكتب الرمز الذي يظهر لكل `<li>` ما يلي:
1310

11+
1. ما هو النص الموجود بداخله (بدون الشجرة الفرعية)
12+
2. عدد "<li>" المتداخلة - جميع الأحفاد ، بما في ذلك المتداخلون بعمق.
1413
[demo src="solution"]
Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
The answer: **`BODY`**.
1+
الإجابة: **`BODY`**.
22

33
```html run
44
<script>
@@ -10,8 +10,8 @@ The answer: **`BODY`**.
1010
</script>
1111
```
1212

13-
What's going on step by step:
13+
ما يحدث خطوة بخطوة:
1414

15-
1. The content of `<body>` is replaced with the comment. The comment is `<!--BODY-->`, because `body.tagName == "BODY"`. As we remember, `tagName` is always uppercase in HTML.
16-
2. The comment is now the only child node, so we get it in `body.firstChild`.
17-
3. The `data` property of the comment is its contents (inside `<!--...-->`): `"BODY"`.
15+
1. يتم استبدال محتوى "<body>" بالتعليق. التعليق هو `<! - BODY ->` ، لأن `body.tagName ==" BODY "`. كما نتذكر ، فإن `tagName` دائمًا ما تكون أحرفًا كبيرة بتنسيق HTML.
16+
2. التعليق هو الآن العقدة الفرعية الوحيدة ، لذلك نحصل عليه في `body.firstChild`.
17+
3. خاصية "البيانات" للتعليق هي محتوياته (داخل `<! --...-->`): "" BODY "`.

2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
importance: 3
1+
درجة الأهمية: 3
22

33
---
44

5-
# Tag in comment
5+
# تاج في تعليق
66

7-
What does this code show?
7+
ماذا يبين هذا الكود؟
88

99
```html
1010
<script>
Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
11

2-
We can see which class it belongs by outputting it, like:
2+
Wيمكننا معرفة أي فئة ينتمي إليها بإخراجها ، مثل:
33

4-
```js run
5-
alert(document); // [object HTMLDocument]
6-
```
4+
تشغيل شبيبة
5+
تنبيه (وثيقة) ؛ // [كائن HTMLDocument]
6+
``
77

8-
Or:
8+
أو:
99

10-
```js run
11-
alert(document.constructor.name); // HTMLDocument
12-
```
10+
تشغيل شبيبة
11+
تنبيه (document.constructor.name) ؛ // HTMLDocument
12+
``
1313

14-
So, `document` is an instance of `HTMLDocument` class.
14+
لذا ، `المستند` هو مثيل لفئة` HTMLDocument`.
1515

16-
What's its place in the hierarchy?
16+
ما مكانها في التسلسل الهرمي؟
1717

18-
Yeah, we could browse the specification, but it would be faster to figure out manually.
18+
نعم ، يمكننا تصفح المواصفات ، ولكن سيكون من الأسرع معرفة ذلك يدويًا.
1919

20-
Let's traverse the prototype chain via `__proto__`.
20+
دعنا نجتاز سلسلة النموذج عبر "__proto__".
2121

22-
As we know, methods of a class are in the `prototype` of the constructor. For instance, `HTMLDocument.prototype` has methods for documents.
22+
كما نعلم ، فإن طرق الصف موجودة في "النموذج الأولي" للمنشئ. على سبيل المثال ، يحتوي "HTMLDocument.prototype" على طرق للمستندات.
2323

24-
Also, there's a reference to the constructor function inside the `prototype`:
24+
أيضًا ، هناك إشارة إلى وظيفة المُنشئ داخل `النموذج الأولي`:
2525

26-
```js run
27-
alert(HTMLDocument.prototype.constructor === HTMLDocument); // true
28-
```
26+
تشغيل شبيبة
27+
تنبيه (HTMLDocument.prototype.constructor === HTMLDocument) ؛ // صحيح
28+
``
2929

30-
To get a name of the class as a string, we can use `constructor.name`. Let's do it for the whole `document` prototype chain, till class `Node`:
30+
للحصول على اسم الفئة كسلسلة ، يمكننا استخدام `buildor.name`. لنفعل ذلك من أجل سلسلة النموذج "المستند" بالكامل ، حتى الفئة "العقدة":
3131

32-
```js run
33-
alert(HTMLDocument.prototype.constructor.name); // HTMLDocument
34-
alert(HTMLDocument.prototype.__proto__.constructor.name); // Document
35-
alert(HTMLDocument.prototype.__proto__.__proto__.constructor.name); // Node
36-
```
32+
تشغيل شبيبة
33+
تنبيه (HTMLDocument.prototype.constructor.name) ؛ // HTMLDocument
34+
تنبيه (HTMLDocument.prototype .__ proto__.constructor.name) ؛ // المستند
35+
تنبيه (HTMLDocument.prototype .__ proto__.__proto__.constructor.name) ؛ // العقدة
36+
``
3737

38-
That's the hierarchy.
38+
هذا هو التسلسل الهرمي.
3939

40-
We also could examine the object using `console.dir(document)` and see these names by opening `__proto__`. The console takes them from `constructor` internally.
40+
يمكننا أيضًا فحص الكائن باستخدام `console.dir (مستند)` ورؤية هذه الأسماء من خلال فتح "__proto__". تأخذهم وحدة التحكم من `المنشئ` داخليًا.
Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
importance: 4
1+
الأهمية: 4
22

33
---
44

5-
# Where's the "document" in the hierarchy?
5+
# أين "الوثيقة" في التسلسل الهرمي؟
66

7-
Which class does the `document` belong to?
7+
إلى أي فئة ينتمي "المستند"؟
88

9-
What's its place in the DOM hierarchy?
9+
ما مكانها في التسلسل الهرمي لـ DOM؟
1010

11-
Does it inherit from `Node` or `Element`, or maybe `HTMLElement`?
11+
هل ترث من "العقدة" أو "العنصر" ، أو ربما "HTMLElement

0 commit comments

Comments
 (0)