`. But, as we can see in line `(**)`, the value of the old `div` variable hasn't changed! +في السطر `(*)` استبدلنا `div` بـ`

عنصر جديد `. في المستند الخارجي (DOM) ، يمكننا رؤية المحتوى الجديد بدلاً من `

`. ولكن ، كما نرى في السطر `(**)` ، لم تتغير قيمة متغير `div` القديم! -The `outerHTML` assignment does not modify the DOM element (the object referenced by, in this case, the variable 'div'), but removes it from the DOM and inserts the new HTML in its place. +لا يقوم تعديل "outerHTML" بتعديل عنصر DOM (الكائن المشار إليه ، في هذه الحالة ، المتغير 'div') ، ولكنه يزيله من DOM ويدرج HTML الجديد في مكانه. -So what happened in `div.outerHTML=...` is: -- `div` was removed from the document. -- Another piece of HTML `

A new element

` was inserted in its place. -- `div` still has its old value. The new HTML wasn't saved to any variable. +ما حدث في `div.outerHTML = ...` هو: +- تمت إزالة `div` من المستند. +- تم إدراج جزء آخر من HTML "

عنصر جديد " في مكانه. +- `div` لا تزال لها قيمتها القديمة. لم يتم حفظ HTML الجديد في أي متغير. -It's so easy to make an error here: modify `div.outerHTML` and then continue to work with `div` as if it had the new content in it. But it doesn't. Such thing is correct for `innerHTML`, but not for `outerHTML`. +من السهل جدًا ارتكاب خطأ هنا: قم بتعديل `div.outerHTML` ثم تابع العمل مع` div` كما لو كان به محتوى جديد فيه. لكنها لا تفعل ذلك. هذا الشيء صحيح بالنسبة لـ "innerHTML" ، ولكن ليس لـ "outerHTML". -We can write to `elem.outerHTML`, but should keep in mind that it doesn't change the element we're writing to ('elem'). It puts the new HTML in its place instead. We can get references to the new elements by querying the DOM. +يمكننا الكتابة إلى "elem.outerHTML" ، ولكن يجب أن نضع في اعتبارنا أنه لا يغير العنصر الذي نكتب إليه ("elem"). بدلاً من ذلك ، تضع HTML الجديد في مكانه. يمكننا الحصول على مراجع للعناصر الجديدة عن طريق الاستعلام عن DOM. -## nodeValue/data: text node content +## nodeValue / data: محتوى عقدة النص -The `innerHTML` property is only valid for element nodes. +خاصية `innerHTML` صالحة لعقد العناصر فقط. -Other node types, such as text nodes, have their counterpart: `nodeValue` and `data` properties. These two are almost the same for practical use, there are only minor specification differences. So we'll use `data`, because it's shorter. +أنواع العقد الأخرى ، مثل العقد النصية ، لها نظيرها: خصائص `nodeValue` و` data`. هذان النوعان متشابهان تقريبًا للاستخدام العملي ، ولا توجد سوى اختلافات طفيفة في المواصفات. لذا سنستخدم "البيانات" لأنها أقصر. -An example of reading the content of a text node and a comment: +مثال على قراءة محتوى العقدة النصية والتعليق: ```html run height="50" @@ -349,9 +348,9 @@ An example of reading the content of a text node and a comment: ``` -For text nodes we can imagine a reason to read or modify them, but why comments? +بالنسبة للعقد النصية ، يمكننا تخيل سبب لقراءتها أو تعديلها ، ولكن لماذا التعليقات؟ -Sometimes developers embed information or template instructions into HTML in them, like this: +في بعض الأحيان يقوم المطورون بتضمين معلومات أو تعليمات قالب في HTML ، مثل هذا: ```html @@ -359,13 +358,13 @@ Sometimes developers embed information or template instructions into HTML in the ``` -...Then JavaScript can read it from `data` property and process embedded instructions. +... ثم يمكن لجافا سكريبت قراءته من خاصية `البيانات` ومعالجة التعليمات المضمنة. -## textContent: pure text +## textContent: نص خالص -The `textContent` provides access to the *text* inside the element: only text, minus all ``. +يوفر `textContent` الوصول إلى * text * داخل العنصر: النص فقط ، ناقص جميع` `. -For instance: +على سبيل المثال: ```html run

@@ -379,18 +378,18 @@ For instance: ``` -As we can see, only text is returned, as if all `` were cut out, but the text in them remained. +كما نرى ، يتم إرجاع النص فقط ، كما لو تم قطع جميع `` ، لكن النص فيها بقي. -In practice, reading such text is rarely needed. +من الناحية العملية ، نادرًا ما تكون هناك حاجة لقراءة مثل هذا النص. -**Writing to `textContent` is much more useful, because it allows to write text the "safe way".** +** تعد الكتابة إلى "textContent" أكثر فائدة لأنها تتيح لك كتابة النص "بطريقة آمنة". ** -Let's say we have an arbitrary string, for instance entered by a user, and want to show it. +لنفترض أن لدينا سلسلة عشوائية ، على سبيل المثال تم إدخالها من قبل مستخدم ، ونريد إظهارها. -- With `innerHTML` we'll have it inserted "as HTML", with all HTML tags. -- With `textContent` we'll have it inserted "as text", all symbols are treated literally. +- باستخدام "innerHTML" ، سنقوم بإدراج "كـ HTML" ، مع كافة علامات HTML. +- مع "textContent" سنقوم بإدراج "كنص" ، يتم التعامل مع جميع الرموز حرفياً. -Compare the two: +قارن بين الاثنين: ```html run

@@ -404,16 +403,16 @@ Compare the two: ``` -1. The first `

` gets the name "as HTML": all tags become tags, so we see the bold name. -2. The second `

` gets the name "as text", so we literally see `Winnie-the-pooh!`. +1. يحصل الاسم الأول "

" على الاسم "بتنسيق HTML": تصبح جميع العلامات علامات ، لذلك نرى الاسم الغامق. +2. الثانية `

` تحصل على الاسم "كنص" ، لذلك نرى حرفياً " Winnie-the-pooh! `. -In most cases, we expect the text from a user, and want to treat it as text. We don't want unexpected HTML in our site. An assignment to `textContent` does exactly that. +في معظم الحالات ، نتوقع النص من مستخدم ونريد معاملته كنص. لا نريد HTML غير متوقع في موقعنا. يؤدي التعيين إلى `textContent` ذلك بالضبط. -## The "hidden" property +## خاصية "مخفية" -The "hidden" attribute and the DOM property specifies whether the element is visible or not. +تحدد السمة "مخفي" وخاصية DOM ما إذا كان العنصر مرئيًا أم لا. -We can use it in HTML or assign using JavaScript, like this: +يمكننا استخدامه في HTML أو تخصيصه باستخدام JavaScript ، مثل هذا: ```html run height="80"

Both divs below are hidden

@@ -427,10 +426,9 @@ We can use it in HTML or assign using JavaScript, like this: ``` -Technically, `hidden` works the same as `style="display:none"`. But it's shorter to write. - -Here's a blinking element: +من الناحية الفنية ، يعمل `المخفي` تمامًا مثل` style = "display: none" `. لكنها أقصر في الكتابة. +إليك عنصر وامض: ```html run height=50

A blinking element

@@ -440,16 +438,16 @@ Here's a blinking element: ``` -## More properties +## المزيد من الخصائص -DOM elements also have additional properties, in particular those that depend on the class: +تحتوي عناصر DOM أيضًا على خصائص إضافية ، لا سيما تلك التي تعتمد على الفئة: -- `value` -- the value for ``, `

` (`HTMLInputElement`, `HTMLSelectElement`...).
-- `href` -- the "href" for `<a href="...">` (`HTMLAnchorElement`).
-- `id` -- the value of "id" attribute, for all elements (`HTMLElement`).
-- ...and much more...
+- `القيمة` - قيمة` <input> `و` <select> `و` <textarea>` (`HTMLInputElement`،` HTMLSelectElement` ...).
+- `href` -" href "لـ` <a href="..."> `(` HTMLAnchorElement`).
+- `id` - قيمة السمة" id "، لجميع العناصر (` HTMLElement`).
+- ...وأكثر بكثير...
 
-For instance:
+على سبيل المثال:
 
 ```html run height="80"
 <input type="text" id="elem" value="value">
@@ -461,39 +459,39 @@ For instance:
 </script>
 ```
 
-Most standard HTML attributes have the corresponding DOM property, and we can access it like that.
+معظم سمات HTML القياسية لها خاصية DOM المقابلة ، ويمكننا الوصول إليها بهذه الطريقة.
 
-If we want to know the full list of supported properties for a given class, we can find them in the specification. For instance, `HTMLInputElement` is documented at <https://html.spec.whatwg.org/#htmlinputelement>.
+إذا أردنا معرفة القائمة الكاملة للخصائص المدعومة لفئة معينة ، فيمكننا العثور عليها في المواصفات. على سبيل المثال ، يتم توثيق `HTMLInputElement` على <https://html.spec.whatwg.org/#htmlinputelement>.
 
-Or if we'd like to get them fast or are interested in a concrete browser specification -- we can always output the element using `console.dir(elem)` and read the properties. Or explore "DOM properties" in the Elements tab of the browser developer tools.
+أو إذا كنا نرغب في الحصول عليهم بسرعة أو مهتمون بمواصفات متصفح محددة - يمكننا دائمًا إخراج العنصر باستخدام `console.dir (elem)` وقراءة الخصائص. أو استكشف "خصائص DOM" في علامة التبويب "العناصر" في أدوات مطور المتصفح.
 
-## Summary
+## ملخص
 
-Each DOM node belongs to a certain class. The classes form a hierarchy. The full set of properties and methods come as the result of inheritance.
+تنتمي كل عقدة DOM إلى فئة معينة. تشكل الفصول هرمية. مجموعة كاملة من الخصائص والأساليب تأتي نتيجة الميراث.
 
-Main DOM node properties are:
+خصائص عقدة DOM الرئيسية هي:
 
 `nodeType`
-: We can use it to see if a node is a text or an element node. It has a numeric value: `1` for elements,`3` for text nodes, and a few others for other node types. Read-only.
+: يمكننا استخدامه لمعرفة ما إذا كانت العقدة عبارة عن نص أو عقدة عنصر. يحتوي على قيمة رقمية: `1` للعناصر ،` 3` للعقد النصية ، وبعض العناصر الأخرى لأنواع العقد الأخرى. يقرأ فقط.
 
-`nodeName/tagName`
-: For elements, tag name (uppercased unless XML-mode). For non-element nodes `nodeName` describes what it is. Read-only.
+`nodeName / tagName`
+: للعناصر ، اسم العلامة (أحرف كبيرة ما لم يكن وضع XML). بالنسبة إلى العقد غير العنصر ، يصف `nodeName` ما هو. يقرأ فقط.
 
 `innerHTML`
-: The HTML content of the element. Can be modified.
+: محتوى HTML للعنصر. يمكن تعديله.
 
 `outerHTML`
-: The full HTML of the element. A write operation into `elem.outerHTML` does not touch `elem` itself. Instead it gets replaced with the new HTML in the outer context.
+: HTML الكامل للعنصر. لا تلمس عملية الكتابة في `elem.outerHTML`` elem` نفسها. بدلاً من ذلك ، يتم استبداله بـ HTML الجديد في السياق الخارجي.
 
-`nodeValue/data`
-: The content of a non-element node (text, comment). These two are almost the same, usually we use `data`. Can be modified.
+`nodeValue / data`
+: محتوى عقدة غير عنصر (نص ، تعليق). هذان النوعان متشابهان تقريبًا ، وعادة ما نستخدم `البيانات '. يمكن تعديله.
 
 `textContent`
-: The text inside the element: HTML minus all `<tags>`. Writing into it puts the text inside the element, with all special characters and tags treated exactly as text. Can safely insert user-generated text and protect from unwanted HTML insertions.
+: النص الموجود داخل العنصر: HTML ناقص جميع `<tags>`. تؤدي الكتابة فيه إلى وضع النص داخل العنصر ، مع معاملة جميع الأحرف والعلامات الخاصة كنص. يمكن إدراج النص الذي ينشئه المستخدم بأمان والحماية من إدخالات HTML غير المرغوب فيها.
 
-`hidden`
-: When set to `true`, does the same as CSS `display:none`.
+"مخفي"
+: عند التعيين على "true" ، يتم عرض CSS `display: none`.
 
-DOM nodes also have other properties depending on their class. For instance, `<input>` elements (`HTMLInputElement`) support `value`, `type`, while `<a>` elements (`HTMLAnchorElement`) support `href` etc. Most standard HTML attributes have a corresponding DOM property.
+تحتوي عقد DOM أيضًا على خصائص أخرى بناءً على فئتها. على سبيل المثال ، عناصر `<input>` (`HTMLInputElement`) تدعم` القيمة` ، `النوع` ، في حين أن` <a> العناصر (`HTMLAnchorElement`) تدعم` href` إلخ. معظم سمات HTML القياسية لها خاصية DOM مقابلة .
 
-However, HTML attributes and DOM properties are not always the same, as we'll see in the next chapter.
+ومع ذلك ، فإن خصائص HTML وخصائص DOM ليست هي نفسها دائمًا ، كما سنرى في الفصل التالي.
diff --git a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md
index 6914bfbca..d8dce0512 100644
--- a/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md
+++ b/2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md
@@ -2,7 +2,7 @@
 
 ---
 
-# الخصول على الخاصية
+# الحصول على الخاصية
 
 اكتب الرمز لتحديد العنصر الذي يحتوي على السمة `data-widget-name` من المستند وقراءة قيمته.