در حال بارگذاری...

انتخاب عنصرها

روی پیشخوان نانوایی یک عنوان است و سه برگه. عنوان می‌گوید Rye. برگه‌ها شیفت را می‌نویسند: Morning، Noon، Evening. برگهٔ آخر کلاس sold هم دارد. خود پیشخوان یک main است با id برابر shelf. داخلش یک h2 با id برابر loaf نشسته، بعد سه عنصر p با کلاس tag. انتخاب یعنی از سند زنده همان گره‌ها را با اسمی که خودت می‌گذاری بگیری. document.getElementById("loaf") عنوان را برمی‌گرداند و متنش Rye است. document.getElementsByClassName("tag") فهرست زنده می‌دهد و طولش ۳ است. document.querySelector(".tag") اولین برگه را می‌دهد، یعنی Morning. document.querySelectorAll(".tag") فهرست ثابت است و خانهٔ ۱ می‌شود Noon. اسمی که روی پیشخوان نیست، از querySelector مقدار null می‌آید و از querySelectorAll فهرستی به طول ۰.

پنج صدا، نه پایین رفتن از درخت

صفحهٔ مدل DOM پدر عنوان را نام می‌برد و فرزند عنصری را با همهٔ گره‌ها می‌شمرد. اینجا parentElement و nextElementSibling و children خوانده نمی‌شود و صدای Math هم نیست. درخت از قبل سر جایش است. کار این صفحه این است که ببینی کدام صدا یک گره می‌دهد، کدام صدا فهرست می‌دهد، و کدام جواب یعنی هیچ چیز جور نشده.

هر صدا چه چیزی دستت می‌دهد

عددها را روی پیشخوانی بگیر که فقط عنوان و سه برگه دارد. فایل پایانی یک پاراگراف اضافه دارد، برای همین شمارش عنصر p آنجا یکی نیست.

📊 هر صدا چه چیزی دستت می‌دهد

صدا چه چیزی برمی‌گردد روی این پیشخوان لغزش رایج
getElementById("loaf") یک عنصر، یا null متن عنوان Rye فهرستی که باید از خانه‌اش بخوانی
getElementsByClassName("tag") HTMLCollection زنده طول ۳ گذاشتن نقطه، مثل .tag
getElementsByTagName("p") HTMLCollection زنده طول ۳ خود عنوان، که h2 است
querySelector(".tag") اولین تطابق، یا null برگهٔ Morning همهٔ برگه‌ها
querySelectorAll(".tag") NodeList ثابت طول ۳؛ خانهٔ ۱ یعنی Noon یک فهرست زنده
querySelectorAll(".oven") NodeList خالی طول ۰ null

متد کلاس و انتخابگر CSS نقطه را یکی نمی‌نویسند. getElementsByClassName("tag") اسم خالی tag را می‌خواهد. getElementsByClassName(".tag") دنبال کلاسی است که اسمش دقیقاً .tag باشد و طول ۰ برمی‌گرداند. querySelector شکل CSS را می‌خواهد، پس نقطه روی .tag می‌ماند. querySelector("tag") دنبال عنصری می‌گردد که نام برچسبش tag باشد؛ چیزی پیدا نمی‌کند و null می‌دهد. خانهٔ ۰ اولین برگه است. خانهٔ ۱ یعنی Noon. فهرست getElementsByClassName زنده است: اگر صفحهٔ بعد برگهٔ تازه‌ای با همین کلاس اضافه کند، طولش زیاد می‌شود. querySelectorAll همان طول لحظهٔ صدا زدن را نگه می‌دارد. Evening دو کلاس دارد، tag و sold. هم داخل فهرست سه‌تایی است و هم تنها مورد sold.

یک id، یک عنصر

id روی صفحه باید یکتا باشد. getElementById همان یک عنصر را برمی‌گرداند. اگر آن id نباشد، جواب null است. فهرست نمی‌دهد. این متد فقط روی document هست، نه روی خود عنصر.

یک id

javascript 
let loaf = document.getElementById("loaf");
console.log(loaf.textContent);
console.log(loaf === null);

خط اول Rye است. خط دوم false است، چون عنوان واقعاً روی پیشخوان هست. اگر دو عنصر id یکسان loaf داشته باشند، باز هم فقط اولین عنصر سند برمی‌گردد.

اسم کلاس و اسم برچسب

هر دو صدا یک HTMLCollection زنده می‌دهند. اول length را بخوان، بعد سراغ یک برگه برو. شمارش مال پیشخوان چهارعنصری است، نه فایل پایانی.

کلاس و برچسب

javascript 
console.log(document.getElementsByClassName("tag").length);
console.log(document.getElementsByTagName("p").length);
console.log(document.getElementsByClassName("sold").length);

خروجی 3 و 3 و 1 است. سه برگه کلاس tag دارند. هر سه عنصر p هستند و عنوان h2 است، برای همین روی این پیشخوان شمارش برچسب با شمارش کلاس یکی است. فقط Evening کلاس sold دارد. getElementsByClassName(".tag") صدای دیگری است: نقطه جزو اسم کلاس نیست، پس آن طول 0 است.

اولین تطابق CSS

querySelector یک عنصر برمی‌گرداند، اولین مورد به ترتیب سند، و اگر هیچ نباشد null.

اولین تطابق

javascript 
console.log(document.querySelector(".tag").textContent);
console.log(document.querySelector("#shelf .sold").textContent);

خط اول Morning است. خط دوم Evening. عبارت #shelf .sold یعنی عنصری با کلاس sold داخل پیشخوان، نه خود پیشخوان. document.getElementById("shelf").querySelector(".sold") جست‌وجو را از پیشخوان شروع می‌کند و به همان برگهٔ Evening می‌رسد.

همهٔ تطابق‌ها، بعد شمارهٔ خانه

querySelectorAll همهٔ موارد را در یک NodeList ثابت می‌ریزد. فهرست می‌تواند خالی باشد. خودش null نیست.

همهٔ تطابق‌ها

javascript 
let tags = document.querySelectorAll(".tag");
console.log(tags.length);
console.log(tags[1].textContent);

طول 3 است. خانهٔ ۱ می‌شود Noon. خانهٔ ۰ یعنی Morning و خانهٔ ۲ یعنی Evening. اگر اسکریپت بعدی برگه‌ای اضافه کند، این فهرست بزرگ نمی‌شود. HTMLCollection حاصل getElementsByClassName("tag") بزرگ می‌شود. یکی عکس همان لحظه است و دیگری زنده می‌ماند.

اسمی که پیشخوان ننوشته

id و کلاسی را صدا بزن که در فایل نیست.

هیچ چیز جور نشد

javascript 
console.log(document.getElementById("oven"));
console.log(document.querySelector(".oven"));
console.log(document.querySelectorAll(".oven").length);

خط اول null است. خط دوم null است. خط سوم 0 است. querySelectorAll حتی وقتی چیزی جور نشود باز فهرست برمی‌گرداند؛ طولش ۰ است و خود فهرست null نیست. getElementById فهرستی ندارد که پس بدهد، پس نبودن عنصر یعنی null، نه ۰.

یک خط روی صفحه

یک پاراگراف می‌گوید چند برگهٔ tag هست، برگهٔ اول چیست، و برگهٔ sold کدام است. اسکریپت ته body است، بعد از آنکه عنصرها ساخته شده‌اند. پاراگراف خط کلاس tag ندارد، پس جزو آن سه تا نیست.

نمونهٔ صفحه — سه برگه

html 
<!DOCTYPE html>
<html>
<head>
<title>selecting — page</title>
</head>
<body>
<main id="shelf">
<h2 id="loaf">Rye</h2>
<p class="tag">Morning</p>
<p class="tag">Noon</p>
<p class="tag sold">Evening</p>
<p id="line">…</p>
</main>
<script>
let tags = document.querySelectorAll(".tag");
let line = document.getElementById("line");
line.textContent = tags.length + " / " + tags[0].textContent + " / " + document.querySelector(".sold").textContent;
</script>
</body>
</html>

پاراگراف می‌نویسد 3 / Morning / Evening. روی همین فایل getElementsByTagName("p") عدد ۴ می‌دهد، چون خط خودش یک p دیگر است. querySelectorAll(".tag") هنوز ۳ است. صفحهٔ بعد HTML همان عنصرهایی را عوض می‌کند که این صداها از قبل پیدا کرده‌اند.

پیشخوان را چک کن

  1. متن عنوان را لاگ کن و Rye بخواه؛ بعد مقایسه با null و انتظار false
  2. طول کلاس، طول p، و طول sold را لاگ کن: ۳ و ۳ و ۱
  3. متن اولین .tag را لاگ کن و Morning بخواه؛ بعد #shelf .sold و انتظار Evening
  4. طول querySelectorAll را لاگ کن و ۳ بخواه؛ خانهٔ ۱ باید Noon باشد
  5. id غایب و querySelector غایب را لاگ کن؛ هر دو null
  6. querySelectorAll(".oven").length را لاگ کن و ۰ بخواه
  7. پاراگراف را بخوان و انتظار 3 / Morning / Evening

صدای اشتباه

صفحه باز می‌شود. صدایی که نوشتی چیز دیگری خواسته.

  • دادن .tag به getElementsByClassName؛ نقطه فقط مال انتخابگر CSS است
  • دادن tag بدون نقطه به querySelector و انتظار برگه‌ها
  • خواندن خانهٔ ۱ به‌جای برگهٔ اول
  • گرفتن نبودِ نتیجهٔ querySelectorAll به‌جای null، در حالی که طول ۰ است
  • گرفتن نبودِ getElementById به‌جای فهرستی به طول ۰
  • شمردن getElementsByTagName("p") روی فایل پایانی و انتظار ۳
  • صدا زدن .map روی HTMLCollection؛ این آرایه نیست
  • خواندن parentElement در این صفحه؛ آن کار صفحهٔ درخت بود

این‌ها را با خودت ببر

  • getElementById یک عنصر می‌دهد، یا null
  • getElementsByClassName و getElementsByTagName یک HTMLCollection زنده می‌دهند
  • متد کلاس tag می‌خواهد، نه .tag
  • querySelector اولین تطابق CSS را می‌دهد، یا null
  • querySelectorAll یک NodeList ثابت می‌دهد؛ اگر چیزی نباشد طول ۰ است
  • خانهٔ ۰ یعنی Morning و خانهٔ ۱ یعنی Noon
  • صفحهٔ بعد HTML عنصرهایی را عوض می‌کند که همین‌جا انتخاب شده‌اند

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
8
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 45 از 45
Javascript آموزش