From 1fcad5e9cb3b2f56d5aaf45f7c37a0a0a4d2c19d Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Thu, 13 Jul 2023 18:53:19 +0330 Subject: [PATCH 01/35] Update article.md --- .../04-searching-elements-dom/article.md | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 405129694..68e04bedb 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -1,14 +1,15 @@ -# Searching: getElement*, querySelector* +# جستجو: *getElement و *querySelector -DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the page? +وقتی elementها به یکدیگر نزدیک هستند، استفاده از ویژگی‌های DOM navigation عالی است. اما اگر elementها نزدیک هم نباشند چه؟ چگونه باید به یک element دلخواه دسترسی داشته باشیم؟ -There are additional searching methods for that. -## document.getElementById or just id +روش‌های جستجوی دیگری برای آن وجود دارد. -If an element has the `id` attribute, we can get the element using the method `document.getElementById(id)`, no matter where it is. +## document.getElementById یا تنها id -For instance: +اگر یک element،دارای attribute (ویژگی) id باشد، می‌توانیم با استفاده از methodای به نام `document.getElementById(id)` به آن دسترسی داشته باشیم. اهمیتی ندارد که آن element کجا است. + +برای مثال: ```html run
@@ -16,17 +17,17 @@ For instance:
``` -Also, there's a global variable named by `id` that references the element: +همچنین، متغیری global وجود دارد که با `id` نام‌گذازی شده‌ است و به element ارجاع می‌دهد: ```html run
@@ -34,7 +35,7 @@ Also, there's a global variable named by `id` that references the element:
``` -همچنین، متغیری global وجود دارد که با `id` نام‌گذازی شده‌ است و به element ارجاع می‌دهد: +همچنین، متغیری global وجود دارد که با `id` نام‌گذاری شده‌ است و به element ارجاع می‌دهد: ```html run
From 61e4dcf456062c7961a166aed218aa010c879521 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Thu, 13 Jul 2023 21:16:43 +0330 Subject: [PATCH 05/35] Update article.md --- 2-ui/1-document/04-searching-elements-dom/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 8e7981874..73ce2a449 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -17,7 +17,7 @@
``` From f9b0d5973006b8a43c92e926df4bbe8ab278091e Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Thu, 13 Jul 2023 21:21:49 +0330 Subject: [PATCH 08/35] Update article.md --- 2-ui/1-document/04-searching-elements-dom/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 3c62f244e..f20fcfa22 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -39,7 +39,7 @@ elem.style.background = 'red'; // id="elem-content" has a hyphen inside, so it can't be a variable name - // elem-content درون خود یک خط تیره (-) دارد، پس نمی‌تواند نام یک متغیر باشد. + // درون خود یک خط تیره (-) دارد، پس نمی‌تواند نام یک متغیر باشد elem-content. // ...but we can access it using square brackets: window['elem-content'] ``` From 36c9cb05fe62b61ae4b189dfb9bbbb01aaa24f44 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Thu, 13 Jul 2023 21:23:29 +0330 Subject: [PATCH 09/35] Update article.md --- 2-ui/1-document/04-searching-elements-dom/article.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index f20fcfa22..a784b12a3 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -38,9 +38,8 @@ // است elem به نام id با DOM-element ارجاعی به elem elem.style.background = 'red'; - // id="elem-content" has a hyphen inside, so it can't be a variable name - // درون خود یک خط تیره (-) دارد، پس نمی‌تواند نام یک متغیر باشد elem-content. - // ...but we can access it using square brackets: window['elem-content'] + // درون خود یک خط تیره (-) دارد، پس نمی‌تواند نام یک متغیر باشد elem-content + // اما می‌توانیم با استفاده از براکت ([]) به آن دسترسی داشته باشیم: window['elem-content'] ``` From cf8bd65c1af595fb79b855616720213f5a66e718 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Thu, 13 Jul 2023 21:25:32 +0330 Subject: [PATCH 10/35] Update article.md --- 2-ui/1-document/04-searching-elements-dom/article.md | 1 + 1 file changed, 1 insertion(+) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index a784b12a3..138b1ab35 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -44,6 +44,7 @@ ``` ...That's unless we declare a JavaScript variable with the same name, then it takes precedence: +....مگر اینکه یک متغیر جاوا اسکریپت را با همین نام تعریف کنیم. در این صورت آن اولویت دارد:‌ ```html run untrusted height=0
From bc7a515bfb9c235e649528e13690ee9e0f11050f Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Thu, 13 Jul 2023 21:26:53 +0330 Subject: [PATCH 11/35] Update article.md --- 2-ui/1-document/04-searching-elements-dom/article.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 138b1ab35..7bed6b365 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -43,14 +43,13 @@ ``` -...That's unless we declare a JavaScript variable with the same name, then it takes precedence: ....مگر اینکه یک متغیر جاوا اسکریپت را با همین نام تعریف کنیم. در این صورت آن اولویت دارد:‌ ```html run untrusted height=0
From b00e6d2bf60f18482baa896eb6427720cc7c4e06 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Thu, 13 Jul 2023 21:28:16 +0330 Subject: [PATCH 12/35] Update article.md --- 2-ui/1-document/04-searching-elements-dom/article.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 7bed6b365..70ad3364c 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -49,7 +49,8 @@
From cc577c5b53721dcbf0b15ec30c112615d2aeb481 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Thu, 13 Jul 2023 22:35:02 +0330 Subject: [PATCH 13/35] Update article.md --- .../1-document/04-searching-elements-dom/article.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 70ad3364c..ad1042c42 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -49,21 +49,20 @@
``` ```warn header="Please don't use id-named global variables to access elements" -This behavior is described [in the specification](https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object), but it is supported mainly for compatibility. +این رفتار در [in the specification](https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object) توضیح داده شده است اما به طور معمول برای سازگاری پشتیبانی می‌شود. -The browser tries to help us by mixing namespaces of JS and DOM. That's fine for simple scripts, inlined into HTML, but generally isn't a good thing. There may be naming conflicts. Also, when one reads JS code and doesn't have HTML in view, it's not obvious where the variable comes from. +مرورگر تلاش می‌کند که با ترکیب namespaceهای JS و DOM به ما کمک کند. این کار برای scriptهای ساده‌ای که به صورت inline در HTML نوشته شده اند مناسب است،‌اما به طور کلی ایده‌ی خوبی نیست. ممکن است تعارض‌‌هایی در نام‌گذاری به وجود آورد. همچنین، وقتی کسی کد JS را می‌خواند و به HTML دسترسی ندارد، مشخص نیست که متغیر از کجا می‌آید. -Here in the tutorial we use `id` to directly reference an element for brevity, when it's obvious where the element comes from. +اینحا در این آموزش وقتی مشخص است که element از کجا آمده است، ما برای کوتاهی و اختصار از `id` استفاده می‌کنیم تا به طور مستقیم به یک element ارجاع دهیم. -In real life `document.getElementById` is the preferred method. +ترجیح داده می‌شودdocument.getElementById` در زندگی واقعی ``` ```smart header="The `id` must be unique" From 1860ba1c6dd336e685570cd8ebc7fab8cc63e446 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Fri, 14 Jul 2023 09:39:37 +0330 Subject: [PATCH 14/35] Update article.md --- .../04-searching-elements-dom/article.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index ad1042c42..2cd3c87bf 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -56,23 +56,25 @@ ``` ```warn header="Please don't use id-named global variables to access elements" -این رفتار در [in the specification](https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object) توضیح داده شده است اما به طور معمول برای سازگاری پشتیبانی می‌شود. +.توضیح داده شده است اما به طور معمول برای سازگاری پشتیبانی می‌شود [in the specification](https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object) این رفتار در -مرورگر تلاش می‌کند که با ترکیب namespaceهای JS و DOM به ما کمک کند. این کار برای scriptهای ساده‌ای که به صورت inline در HTML نوشته شده اند مناسب است،‌اما به طور کلی ایده‌ی خوبی نیست. ممکن است تعارض‌‌هایی در نام‌گذاری به وجود آورد. همچنین، وقتی کسی کد JS را می‌خواند و به HTML دسترسی ندارد، مشخص نیست که متغیر از کجا می‌آید. +.دسترسی ندارد، مشخص نیست که متغیر از کجا می‌آید HTML را می‌خواند و به JS نوشته شده‌اند مناسب است اما به طور کلی ایده‌ی خوبی نیست و ممکن است تعارض‌هایی در نام‌گذاری به وجود آورد و همچنین وقتی کسی کد HTML در inline های ساده‌ای که به صورتscript به ما کمک کند. این کار برای DOM و JS هایnamespace مرورگر تلاش می‌کند که با ترکیب -اینحا در این آموزش وقتی مشخص است که element از کجا آمده است، ما برای کوتاهی و اختصار از `id` استفاده می‌کنیم تا به طور مستقیم به یک element ارجاع دهیم. +.ارجاع دهیم element استفاده می‌کنیم تا به طور مستقیم به یک `id` از کجا آمده است ما برای کوتاهی و اختصار از elemnt اینجا در این آموزش وقتی مشخص است که ترجیح داده می‌شودdocument.getElementById` در زندگی واقعی ``` -```smart header="The `id` must be unique" -The `id` must be unique. There can be only one element in the document with the given `id`. +``` smart header=" باید منحصر به فرد باشد `id`" -If there are multiple elements with the same `id`, then the behavior of methods that use it is unpredictable, e.g. `document.getElementById` may return any of such elements at random. So please stick to the rule and keep `id` unique. +فقط یک element با `id` داده شده می‌تواند در document وجود داشته باشد. + + +اگر چند element با یک `id` مشخص داشته باشیم، رفتار methodای که از آن استفاده می‌کند می‌تواند غیرقابل پیش‌بینی باشد. برای مثال `document.getElementById` ممکن است هر یک از آن elementها را به صورت تصادفی برگرداند. پس لطفا به این قانون توجه داشته باشید و `id` را منحصر به فرد نگه دارید. ``` -```warn header="Only `document.getElementById`, not `anyElem.getElementById`" -The method `getElementById` can be called only on `document` object. It looks for the given `id` in the whole document. +```warn header=" فقط `document.getElementById`, نه `anyElem.getElementById`" +.داده شده می‌گردد `id` به دنبال document صدا بزنیم. آن در تمام document را روی اشیای `getElementById‍‍` ما تنها می‌توانیم ``` ## querySelectorAll [#querySelectorAll] From 3808ba994ab22d8dae3a977d61f4f9219604015e Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Fri, 14 Jul 2023 10:02:03 +0330 Subject: [PATCH 15/35] bugs with the last change --- 2-ui/1-document/04-searching-elements-dom/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 2cd3c87bf..8ff1b07cd 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -79,9 +79,9 @@ ## querySelectorAll [#querySelectorAll] -By far, the most versatile method, `elem.querySelectorAll(css)` returns all elements inside `elem` matching the given CSS selector. +تا اینجا، همه‌کاره‌ترین روش `elem.querySelectorAll(css)` بود که تمام elementهای درون `elem` که با css selector داده شده تطابق دارند را انتخاب می‌کند. -Here we look for all `
  • ` elements that are last children: +اینحا به دنبال تمام `
  • `هایی هستیم که آخرین فرزند هستند: ```html run
      @@ -103,10 +103,10 @@ Here we look for all `
    • ` elements that are last children: ``` -This method is indeed powerful, because any CSS selector can be used. +این method واقعا قدرتمند است، چون هر css selectorای می‌تواند استفاده شود. -```smart header="Can use pseudo-classes as well" -Pseudo-classes in the CSS selector like `:hover` and `:active` are also supported. For instance, `document.querySelectorAll(':hover')` will return the collection with elements that the pointer is over now (in nesting order: from the outermost `` to the most nested one). +```smart header="pseudo-classها نیز می‌توانند استفاده شوند" +pseudo-classها در css selector مثل `:hover` و `:active` `document.querySelectorAll(':hover')` مجموعه‌ای از elementهایی که نشانگر الان روی آن‌ها است را برمی‌گرداند. (به ترتیب تو در تو: از بیرونی ترین `` تا درونی‌ترین( هم پشتیبانی شده‌اند. برای مثال ``` ## querySelector [#querySelector] From 2a4ca9ee5e223e47f4420ac2b8c3518a8271ccee Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Fri, 14 Jul 2023 21:44:28 +0330 Subject: [PATCH 16/35] bis closet --- .../04-searching-elements-dom/article.md | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 8ff1b07cd..15bf1b806 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -111,17 +111,19 @@ pseudo-classها در css selector مثل `:hover` و `:active` `document.query ## querySelector [#querySelector] -The call to `elem.querySelector(css)` returns the first element for the given CSS selector. +فراخوانی `elem.querySelector(css)` اولین element را برای css selector داده شده برمی‌گرداند. + + +به عبارت دیگر، نتیجه با `elem.querySelectorAll(css)[0]` یکسان است اما دومی به دنبال *تمام* elementها است و یکی را انتخاب می‌کند در حالی که `elem.querySelector` فقط به دنبال یکی است. پس هم سریع‌تر است و هم برای نوشتن کوتاه‌تر است. -In other words, the result is the same as `elem.querySelectorAll(css)[0]`, but the latter is looking for *all* elements and picking one, while `elem.querySelector` just looks for one. So it's faster and also shorter to write. ## matches -Previous methods were searching the DOM. +روش‌های قبلی در DOM جستجو می‌کردند. -The [elem.matches(css)](https://dom.spec.whatwg.org/#dom-element-matches) does not look for anything, it merely checks if `elem` matches the given CSS-selector. It returns `true` or `false`. +عبارت [elem.matches(css)](https://dom.spec.whatwg.org/#dom-element-matches) در جستجوی چیزی نیست، فقط چک می‌کند که element با CSS-selector داده شده مطابقت دارد یا نه و `true` یا `false` برمی‌گرداند. -The method comes in handy when we are iterating over elements (like in an array or something) and trying to filter out those that interest us. +این روش زمانی به کار می‌آید که می‌خواهیم روی elementهایی (مثل آرایه یا همچین چیزی) iterate کنیم و آن‌هایی که مطلوب هستند را فیلتر کنیم. For instance: @@ -130,12 +132,14 @@ For instance: ... From bee0ef70230df3dea6b1c9f9f3a046154224ff97 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Fri, 14 Jul 2023 21:58:37 +0330 Subject: [PATCH 17/35] end closet --- .../04-searching-elements-dom/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 15bf1b806..d0440f405 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -147,21 +147,21 @@ For instance: ## closest -*Ancestors* of an element are: parent, the parent of parent, its parent and so on. The ancestors together form the chain of parents from the element to the top. +*والدهای* یک element عبارت‌اند از: پدر، پدر پدر، پدر آن و ... . این والدها با یکدیگر زنجیره‌ای از والدها را از یک عنصر به سمت بالا تشکیل می‌دهند. -The method `elem.closest(css)` looks for the nearest ancestor that matches the CSS-selector. The `elem` itself is also included in the search. +متد `elem.closest(css)` به دنبال نزدیک‌ترین والدی است که با CSS-selector تطابق دارد. خود `elem` هم شامل این جستجو می‌شود. -In other words, the method `closest` goes up from the element and checks each of parents. If it matches the selector, then the search stops, and the ancestor is returned. +به عبارت دیگر متد `closest` از element به سمت بالا می‌رود و هر یک از والدها را چک می‌کند. اگر با selector مطابقت داشته باشد، جستجو متوقف می‌شود و آن والد برگردانده می‌شود. -For instance: +برای مثال: ```html run

      Contents

        -
      • Chapter 1
      • -
      • Chapter 2
      • +
      • بخش 1
      • +
      • بخش 2
      @@ -171,7 +171,7 @@ For instance: alert(chapter.closest('.book')); // UL alert(chapter.closest('.contents')); // DIV - alert(chapter.closest('h1')); // null (because h1 is not an ancestor) + alert(chapter.closest('h1')); // null (یک والد نیست h1 چون) ``` From 490817e39050349465260a6a6ac0a94429d0dbf8 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Fri, 14 Jul 2023 22:25:05 +0330 Subject: [PATCH 18/35] Update article.md --- .../04-searching-elements-dom/article.md | 31 ++++++++++--------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index d0440f405..7fba37a88 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -147,7 +147,7 @@ For instance: ## closest -*والدهای* یک element عبارت‌اند از: پدر، پدر پدر، پدر آن و ... . این والدها با یکدیگر زنجیره‌ای از والدها را از یک عنصر به سمت بالا تشکیل می‌دهند. +*والدهای* یک element عبارت‌اند از: پدر، پدر پدر، پدر آن و ... . این والدها با یکدیگر زنجیره‌ای از والدها را از یک element به سمت بالا تشکیل می‌دهند. متد `elem.closest(css)` به دنبال نزدیک‌ترین والدی است که با CSS-selector تطابق دارد. خود `elem` هم شامل این جستجو می‌شود. @@ -177,38 +177,41 @@ For instance: ## getElementsBy* -There are also other methods to look for nodes by a tag, class, etc. +همچنین روش‌های دیگری برای جستجو برای یک node با tag، class و ... وجود دارد. -Today, they are mostly history, as `querySelector` is more powerful and shorter to write. +امروزه آن‌ها بیشتر تاریخچه هستند چون `querySelector` قدرتمندتر است و برای نوشتن سریع‌تر است. -So here we cover them mainly for completeness, while you can still find them in the old scripts. +پس اینجا ما بیشتر آن‌ها را برای کامل بودن پوشش می‌دهیم اما هنوز می‌توانید آن‌ها را در scriptهای قدیمی پیدا کنید. -- `elem.getElementsByTagName(tag)` looks for elements with the given tag and returns the collection of them. The `tag` parameter can also be a star `"*"` for "any tags". -- `elem.getElementsByClassName(className)` returns elements that have the given CSS class. -- `document.getElementsByName(name)` returns elements with the given `name` attribute, document-wide. Very rarely used. +- عبارت `elem.getElementsByTagName(tag)` به دنبال elementهایی با tag داده شده است و مجموعه‌ی آن‌ها را برمی‌گرداند. پارامتر `tag` همچنین می‌تواند یک ستاره باشد `"*"` به معنای تمام tag ها. -For instance: +- عبارت `elem.getElementsByClassName(className)` تمام elementهایی که کلاس CSS داده شده را دارند برمی‌گرداند. + +- عبارت `document.getElementsByName(name)`تمام elementهایی که `name` به عنوان attribute به آن‌ها داده شده است را برمی‌گرداند و بسیار کم استفاده می‌شود. + +برای مثال:‌ ```js -// get all divs in the document + +//تمام div های درون document را می‌گیرد. let divs = document.getElementsByTagName('div'); ``` -Let's find all `input` tags inside the table: +بیایید تمام tagهای `input` درون این table را پیدا کنیم:‌ ```html run height=50 - + From 2a1378662506c1836d3f448976685b39f12f3d20 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Sun, 16 Jul 2023 09:04:33 +0330 Subject: [PATCH 19/35] Update article.md --- 2-ui/1-document/04-searching-elements-dom/article.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 7fba37a88..e8c822f15 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -228,10 +228,12 @@ let divs = document.getElementsByTagName('div'); ``` -```warn header="Don't forget the `\"s\"` letter!" -Novice developers sometimes forget the letter `"s"`. That is, they try to call `getElementByTagName` instead of getElementsByTagName. +```warn header="را فراموش نکنید. `\"s\"` عبارت" -The `"s"` letter is absent in `getElementById`, because it returns a single element. But `getElementsByTagName` returns a collection of elements, so there's `"s"` inside. +برنامه‌نویس‌های تازه‌‌کار گاهی اوقات حرف ‍‍`"s"` را فراموش می‌کنند. یعنی، آن‌ها سعی می‌کنند به جای getElementsByTagName عبارت `getElementByTagName` را فراخوانی کنند. + + +حرف `"s"` در `getElementById` وجود ندارد زیرا یک element تک را برمی‌گرداند. اما `getElementsByTagName` مجموعه‌ای از عناصر را برمی‌گرداند،‌ پس یک `"s"` در آن هست. ``` ````warn header="It returns a collection, not an element!" From 0616e890f71c49be0833f2fa38940cbddd503824 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Sun, 16 Jul 2023 10:08:19 +0330 Subject: [PATCH 20/35] until live collections --- .../04-searching-elements-dom/article.md | 25 ++++++++++--------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index e8c822f15..3e427e119 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -236,39 +236,40 @@ let divs = document.getElementsByTagName('div'); حرف `"s"` در `getElementById` وجود ندارد زیرا یک element تک را برمی‌گرداند. اما `getElementsByTagName` مجموعه‌ای از عناصر را برمی‌گرداند،‌ پس یک `"s"` در آن هست. ``` -````warn header="It returns a collection, not an element!" -Another widespread novice mistake is to write: +````warn header="element یک مجموعه را برمی‌گرداند، نه یک" +یک اشتباه رایج دیگر تازه‌کارانه این است که بنویسیم: ```js -// doesn't work +// کار نمی‌کند document.getElementsByTagName('input').value = 5; ``` -That won't work, because it takes a *collection* of inputs and assigns the value to it rather than to elements inside it. +این کار نمی‌کند،‌چون یک *مجموعه* از ورودی‌ها را می‌گیرد و مقدار را به جای element درون آن، به آن انتساب می‌دهد. -We should either iterate over the collection or get an element by its index, and then assign, like this: +ما باید یا روی آن مجموعه iterate کنیم یا یک element را با عنصر آن بگیریم و بعد به آن انتساب دهیم. مثل این:‌ ```js -// should work (if there's an input) +// باید کار کند (اگر یک ورودی وجود داشته باشد) document.getElementsByTagName('input')[0].value = 5; ``` ```` -Looking for `.article` elements: +`.article` هایelement جستجو برای ```html run height=50
      -
      Article
      -
      Long article
      +
      مقاله
      +
      مقاله طولانی
      ``` From 1b3679bede834c2d623e396ddf0311c4b14a41b2 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Sun, 16 Jul 2023 15:56:27 +0330 Subject: [PATCH 21/35] Update article.md --- .../04-searching-elements-dom/article.md | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 3e427e119..00118ea05 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -273,14 +273,17 @@ document.getElementsByTagName('input')[0].value = 5; ``` -## Live collections +## مجموعه‌های زنده -All methods `"getElementsBy*"` return a *live* collection. Such collections always reflect the current state of the document and "auto-update" when it changes. +.می‌شوند update را منعکس می‌کنند و وقتی تغییر می‌کند، به صورت خودکار document یک مجموعه‌ی زنده برمی‌گردانند. چنین مجموعه‌هایی همیشه وضعیت فعلی `"getElementsBy*"` تمام متدهای -In the example below, there are two scripts. +.داریم script در مثال زیر دو + + +.ایجاد می‌کند در حال حاضر طول آن `1` است `
      ` اولی ارجاعی به مجموعه‌ی + +دیگر را ببیند پس طول آن `2` است `
      ` زمانی اجرا می‌شود که مرورگر یک script دومین -1. The first one creates a reference to the collection of `
      `. As of now, its length is `1`. -2. The second scripts runs after the browser meets one more `
      `, so its length is `2`. ```html run
      First div
      @@ -299,9 +302,9 @@ In the example below, there are two scripts. ``` -In contrast, `querySelectorAll` returns a *static* collection. It's like a fixed array of elements. +.ها استelement را برمی‌گرداند که شبیه یک آرایه‌ی ثابت static یک مجموعه‌ی `querySelectorAll` ،متقابلا -If we use it instead, then both scripts output `1`: +.خروجی `1` را می‌دهند script اگر به جایش از آن استفاده کنیم، هر دو ```html run From 4263b2d1fb139b8dea106b3549edbf4a0ec4cb97 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Sun, 16 Jul 2023 16:17:10 +0330 Subject: [PATCH 22/35] Update article.md --- .../04-searching-elements-dom/article.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 00118ea05..069f2aeac 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -286,14 +286,14 @@ document.getElementsByTagName('input')[0].value = 5; ```html run -
      First div
      +
      div اول
      -
      Second div
      +
      div دوم
      ``` -Now we can easily see the difference. The static collection did not increase after the appearance of a new `div` in the document. +.افزایش نیافته است static مجموعه‌ی ،document جدید در div حالا می‌توانیم تفاوت را به راحتی ببینیم. بعد از ایجاد شدن یک -## Summary +## خلاصه -There are 6 main methods to search for nodes in DOM: +.وجود دارد DOM ها در node شش روش اصلی برای جستجو در
      Your age:سن شما:
      - - - - + + + + From 8667ecfd4b5c903e33c7a41642e6d5cbef94b0e4 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Sun, 16 Jul 2023 16:29:50 +0330 Subject: [PATCH 23/35] Update article.md --- 2-ui/1-document/04-searching-elements-dom/article.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 069f2aeac..7a7903e90 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -379,7 +379,8 @@ document.getElementsByTagName('input')[0].value = 5;
      MethodSearches by...Can call on an element?Live?روشجستجو بر اساس ...فراخوانی شود؟ element می‌تواند رویزنده؟
      -By far the most used are `querySelector` and `querySelectorAll`, but `getElement(s)By*` can be sporadically helpful or found in the old scripts. +.های قدیمی یافت شود script هم گاهی به صورت پراکنده می‌تواند مفید باشد یا در `getElement(s)By` شده است، اما `querySelectorAll` و `querySelector` تا اینجا بیشترین استفاده از + Besides that: From 6aa2680e95b11eedc9760d1c9b51bd75406988ed Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Sun, 16 Jul 2023 20:57:49 +0330 Subject: [PATCH 24/35] Update article.md --- 2-ui/1-document/04-searching-elements-dom/article.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 7a7903e90..15dc67f21 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -382,10 +382,12 @@ document.getElementsByTagName('input')[0].value = 5; .های قدیمی یافت شود script هم گاهی به صورت پراکنده می‌تواند مفید باشد یا در `getElement(s)By` شده است، اما `querySelectorAll` و `querySelector` تا اینجا بیشترین استفاده از -Besides that: +علاوه بر آن: -- There is `elem.matches(css)` to check if `elem` matches the given CSS selector. -- There is `elem.closest(css)` to look for the nearest ancestor that matches the given CSS-selector. The `elem` itself is also checked. +.تطابق دارد یا نه CSS-selector با elem برای این استفاده می‌شود که چک کنیم `elem.matches(css)` از عبارت - -And let's mention one more method here to check for the child-parent relationship, as it's sometimes useful: -- `elemA.contains(elemB)` returns true if `elemB` is inside `elemA` (a descendant of `elemA`) or when `elemA==elemB`. +.هم چک می‌شود `elem` داده شده تطابق دارند. خود CSS-selector برای جستجوی نزدیک‌ترین والدهایی است که با `elem.closest(css)` عبارت - + + +و بیایید اینجا یک روش دیگر برای بررسی رابطه والد و فرزند را چک کنیم،‌چون بعضی وقت‌ها مفید است: +.را برمی‌گرداند true مثدار `elemA.contains(elemB)` باشد، عبارت `elemA==elemB` یا وقتی که (`elemA` از فرزندان) باشد `elemA` داخل `elemB` اگر - From e39a42626d51876266c2dd2ef4b3fc9ba26562af Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Sun, 16 Jul 2023 21:07:26 +0330 Subject: [PATCH 25/35] final changes --- 2-ui/1-document/04-searching-elements-dom/article.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index 15dc67f21..f1455b0c6 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -106,7 +106,8 @@ این method واقعا قدرتمند است، چون هر css selectorای می‌تواند استفاده شود. ```smart header="pseudo-classها نیز می‌توانند استفاده شوند" -pseudo-classها در css selector مثل `:hover` و `:active` `document.querySelectorAll(':hover')` مجموعه‌ای از elementهایی که نشانگر الان روی آن‌ها است را برمی‌گرداند. (به ترتیب تو در تو: از بیرونی ترین `` تا درونی‌ترین( هم پشتیبانی شده‌اند. برای مثال +(تا درونی‌ترین آن‌ها `` به ترتیب تو در تو: از بیرونی‌ترین) مجموعه‌ای از عناصری که نشانگر الان روی آن‌ها است را برمی‌گرداند. `document.querySelectorAll(':hover')`نیز پشتیبانی می‌شود. برای مثال `:active` و `:hover` هایی مثل Pseudo-class از + ``` ## querySelector [#querySelector] From 3ae5753b7dbecd10f3c82e2b282a2e8c77fd5852 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Mon, 17 Jul 2023 19:23:57 +0330 Subject: [PATCH 26/35] /done --- .../04-searching-elements-dom/article.md | 24 +++---------------- 1 file changed, 3 insertions(+), 21 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/article.md b/2-ui/1-document/04-searching-elements-dom/article.md index f1455b0c6..917b7a642 100644 --- a/2-ui/1-document/04-searching-elements-dom/article.md +++ b/2-ui/1-document/04-searching-elements-dom/article.md @@ -2,7 +2,6 @@ وقتی elementها به یکدیگر نزدیک هستند، استفاده از ویژگی‌های DOM navigation عالی است. اما اگر elementها نزدیک هم نباشند چه؟ چگونه باید به یک element دلخواه دسترسی داشته باشیم؟ - روش‌های جستجوی دیگری برای آن وجود دارد. ## id یا تنها document.getElementById @@ -55,7 +54,7 @@ ``` -```warn header="Please don't use id-named global variables to access elements" +```warn header=".ها استفاده نکنیدelement برای دسترسی به global لفطا از متغیرهای" .توضیح داده شده است اما به طور معمول برای سازگاری پشتیبانی می‌شود [in the specification](https://html.spec.whatwg.org/multipage/window-object.html#named-access-on-the-window-object) این رفتار در .دسترسی ندارد، مشخص نیست که متغیر از کجا می‌آید HTML را می‌خواند و به JS نوشته شده‌اند مناسب است اما به طور کلی ایده‌ی خوبی نیست و ممکن است تعارض‌هایی در نام‌گذاری به وجود آورد و همچنین وقتی کسی کد HTML در inline های ساده‌ای که به صورتscript به ما کمک کند. این کار برای DOM و JS هایnamespace مرورگر تلاش می‌کند که با ترکیب @@ -66,10 +65,8 @@ ``` ``` smart header=" باید منحصر به فرد باشد `id`" - فقط یک element با `id` داده شده می‌تواند در document وجود داشته باشد. - اگر چند element با یک `id` مشخص داشته باشیم، رفتار methodای که از آن استفاده می‌کند می‌تواند غیرقابل پیش‌بینی باشد. برای مثال `document.getElementById` ممکن است هر یک از آن elementها را به صورت تصادفی برگرداند. پس لطفا به این قانون توجه داشته باشید و `id` را منحصر به فرد نگه دارید. ``` @@ -107,17 +104,14 @@ ```smart header="pseudo-classها نیز می‌توانند استفاده شوند" (تا درونی‌ترین آن‌ها `` به ترتیب تو در تو: از بیرونی‌ترین) مجموعه‌ای از عناصری که نشانگر الان روی آن‌ها است را برمی‌گرداند. `document.querySelectorAll(':hover')`نیز پشتیبانی می‌شود. برای مثال `:active` و `:hover` هایی مثل Pseudo-class از - ``` ## querySelector [#querySelector] فراخوانی `elem.querySelector(css)` اولین element را برای css selector داده شده برمی‌گرداند. - به عبارت دیگر، نتیجه با `elem.querySelectorAll(css)[0]` یکسان است اما دومی به دنبال *تمام* elementها است و یکی را انتخاب می‌کند در حالی که `elem.querySelector` فقط به دنبال یکی است. پس هم سریع‌تر است و هم برای نوشتن کوتاه‌تر است. - ## matches روش‌های قبلی در DOM جستجو می‌کردند. @@ -138,9 +132,7 @@ For instance: *!* if (elem.matches('a[href$="zip"]')) { */!* - alert("The archive reference: " + elem.href ); alert("این آرشیو ارجاع می‌دهد به : " + elem.href ); - } } @@ -192,7 +184,6 @@ For instance: برای مثال:‌ ```js - //تمام div های درون document را می‌گیرد. let divs = document.getElementsByTagName('div'); ``` @@ -230,10 +221,8 @@ let divs = document.getElementsByTagName('div'); ``` ```warn header="را فراموش نکنید. `\"s\"` عبارت" - برنامه‌نویس‌های تازه‌‌کار گاهی اوقات حرف ‍‍`"s"` را فراموش می‌کنند. یعنی، آن‌ها سعی می‌کنند به جای getElementsByTagName عبارت `getElementByTagName` را فراخوانی کنند. - حرف `"s"` در `getElementById` وجود ندارد زیرا یک element تک را برمی‌گرداند. اما `getElementsByTagName` مجموعه‌ای از عناصر را برمی‌گرداند،‌ پس یک `"s"` در آن هست. ``` @@ -264,11 +253,10 @@ document.getElementsByTagName('input')[0].value = 5; @@ -280,12 +268,9 @@ document.getElementsByTagName('input')[0].value = 5; .داریم script در مثال زیر دو - .ایجاد می‌کند در حال حاضر طول آن `1` است `
      ` اولی ارجاعی به مجموعه‌ی - دیگر را ببیند پس طول آن `2` است `
      ` زمانی اجرا می‌شود که مرورگر یک script دومین - ```html run
      div اول
      @@ -382,13 +367,10 @@ document.getElementsByTagName('input')[0].value = 5; .های قدیمی یافت شود script هم گاهی به صورت پراکنده می‌تواند مفید باشد یا در `getElement(s)By` شده است، اما `querySelectorAll` و `querySelector` تا اینجا بیشترین استفاده از - علاوه بر آن: .تطابق دارد یا نه CSS-selector با elem برای این استفاده می‌شود که چک کنیم `elem.matches(css)` از عبارت - - .هم چک می‌شود `elem` داده شده تطابق دارند. خود CSS-selector برای جستجوی نزدیک‌ترین والدهایی است که با `elem.closest(css)` عبارت - - و بیایید اینجا یک روش دیگر برای بررسی رابطه والد و فرزند را چک کنیم،‌چون بعضی وقت‌ها مفید است: .را برمی‌گرداند true مثدار `elemA.contains(elemB)` باشد، عبارت `elemA==elemB` یا وقتی که (`elemA` از فرزندان) باشد `elemA` داخل `elemB` اگر - From 715ed60d8ad7986c6db66ced66287906813b6a64 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Tue, 18 Jul 2023 22:58:03 +0330 Subject: [PATCH 27/35] Update solution.md --- .../1-find-elements/solution.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md index c73aecd99..e633c0a33 100644 --- a/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md +++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md @@ -1,17 +1,17 @@ -There are many ways to do it. +راه‌های زیادی برای آن وجود دارد. -Here are some of them: +اینجا برخی از آن‌ها را می‌بینیم: ```js -// 1. The table with `id="age-table"`. +// 1. جدول یا `id="age-table"` let table = document.getElementById('age-table') -// 2. All label elements inside that table +// 2. تمام عناصر label داخل آن جدول table.getElementsByTagName('label') // or document.querySelectorAll('#age-table label') -// 3. The first td in that table (with the word "Age") +// 3. اولین td داخل آن جدول (با کلمه‌ی "Age") table.rows[0].cells[0] // or table.getElementsByTagName('td')[0] From ed979d3eef6de58fb780f3618cf4f80fde407d83 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Wed, 19 Jul 2023 08:22:02 +0330 Subject: [PATCH 28/35] solution done --- .../1-find-elements/solution.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md index e633c0a33..83d3ad471 100644 --- a/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md +++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/solution.md @@ -8,28 +8,28 @@ let table = document.getElementById('age-table') // 2. تمام عناصر label داخل آن جدول table.getElementsByTagName('label') -// or +// یا document.querySelectorAll('#age-table label') // 3. اولین td داخل آن جدول (با کلمه‌ی "Age") table.rows[0].cells[0] -// or +// یا table.getElementsByTagName('td')[0] -// or +// یا table.querySelector('td') -// 4. The form with the name "search" -// assuming there's only one element with name="search" in the document +// 4. form با نام "search" +// با فرض اینکه فقط یک element با نام "search" در document است. let form = document.getElementsByName('search')[0] -// or, form specifically +// یا به طور خاص،‌form document.querySelector('form[name="search"]') -// 5. The first input in that form. +// 5. اولین input درون form form.getElementsByTagName('input')[0] -// or +// یا form.querySelector('input') -// 6. The last input in that form -let inputs = form.querySelectorAll('input') // find all inputs -inputs[inputs.length-1] // take the last one +// 6. آخرین input در آن فرم +let inputs = form.querySelectorAll('input') // تمام inputها را پیدا می‌کند. +inputs[inputs.length-1] // آخری را می‌گیرد ``` From 289cc588788b42e88fc5c34e35aea749ba50fc93 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Wed, 19 Jul 2023 08:30:41 +0330 Subject: [PATCH 29/35] /done --- .../1-find-elements/task.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md index f0b54beac..a9d4dedf9 100644 --- a/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md +++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/task.md @@ -1,18 +1,18 @@ -importance: 4 +اهمیت: 4 --- -# Search for elements +# جستجوی elementها -Here's the document with the table and form. +اینجا document مربوط به table و form را می‌بینیم. -How to find?... +چگونه پیدا کنیم؟ -1. The table with `id="age-table"`. -2. All `label` elements inside that table (there should be 3 of them). -3. The first `td` in that table (with the word "Age"). -4. The `form` with `name="search"`. -5. The first `input` in that form. -6. The last `input` in that form. +1. جدول با شناسه‌ی `id="age-table"`. +2. تمام `label` های درون آن table (باید سه تا باشند) +3. اولین `td` درون آن table (با کلمه‌ی "Age") +4. `form` با `name="search"` +5. اولین `input` در آن فرم +6. آخرین `input` در آن فرم -Open the page [table.html](table.html) in a separate window and make use of browser tools for that. +صفحه‌ی [table.html](table.html) را در یک پنجره‌ی جدا باز کنید و از ابزارهای مرورگر برای آن استفاده کنید. From 66f94838ad3854a24670e4612108bd4321b948d2 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Wed, 19 Jul 2023 08:32:21 +0330 Subject: [PATCH 30/35] /done --- .../1-find-elements/table.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html b/2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html index 5b92c34b9..bb00f9b24 100644 --- a/2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html +++ b/2-ui/1-document/04-searching-elements-dom/1-find-elements/table.html @@ -2,7 +2,7 @@
      -