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

تغییر HTML از JavaScript

روی برگهٔ اسکله، پیش از هر دستکاری، اسم قایق Gull است، ساعت ۰۹:۱۰، و یادداشت می‌گوید Boarding. تغییر HTML یعنی محتوای همان عنصر را عوض کنی، نه اینکه دوباره دنبالش بگردی. با boat.textContent = "Heron" فقط واژه‌های Heron می‌نشیند. اگر یادداشت را با textContent برابر رشتهٔ <em>Late</em> بگذاری، همان نویسه‌ها دیده می‌شوند و querySelector("em") مقدار null می‌دهد. innerHTML همان رشته را به یک عنصر em تبدیل می‌کند که متنش Late است. از آن به بعد textContent فقط Late را برمی‌گرداند، ولی innerHTML هنوز برچسب را داخل رشته دارد. نوشتن دوبارهٔ innerHTML با مقدار Dock 2 آن em را برمی‌دارد. insertAdjacentHTML("beforeend", " <span>gate B</span>") عبارت Dock 2 را نگه می‌دارد و gate B را به ته یادداشت اضافه می‌کند. به ساعت هیچ مقداری داده نمی‌شود، پس ۰۹:۱۰ سر جایش می‌ماند.

نوشتن، نه یک جست‌وجوی تازه

صفحهٔ قبل راه‌های پیدا کردن گره را کنار هم گذاشت. اینجا نه طول یک فهرست را می‌خوانی، نه خانهٔ یک لیست را، نه parentElement را. getElementById فقط برگه را به دستت می‌دهد. اصل درس مقداری است که داخل عنصر می‌نویسی.

هر نوشتن چه چیزی روی یادداشت می‌گذارد

یادداشت از Boarding شروع می‌شود. ردیف‌ها را به ترتیب بخوان. هر مقدار یا جای قبلی را می‌گیرد یا به تهش اضافه می‌شود.

📊 هر نوشتن چه چیزی روی یادداشت می‌گذارد

نوشتن چه می‌بینی چه می‌ماند لغزش رایج
textContent = "Heron" روی قایق Heron یک گرهٔ متن عنصری که اسمش Heron باشد
textContent = "<em>Late</em>" نویسه‌های <em>Late</em> هیچ عنصر em یک em واقعی
innerHTML = "<em>Late</em>" Late یک em انتظار برچسب داخل textContent
innerHTML = "Dock 2" Dock 2 em رفته ماندن em کنار Dock 2
insertAdjacentHTML("beforeend", " <span>gate B</span>") Dock 2 gate B Dock 2 به‌علاوه یک span innerHTML که Dock 2 را پاک می‌کند

textContent رشته را ذخیره می‌کند و برچسب را تفسیر نمی‌کند. innerHTML برچسب را می‌سازد و هر فرزندی که عنصر از قبل داشت دور می‌ریزد. insertAdjacentHTML هم برچسب را می‌سازد، ولی beforeend گره‌های تازه را بعد از محتوای فعلی می‌گذارد. اسم قایقی که پشت پنجره تایپ می‌شود جایش در textContent است. همان رشته اگر به innerHTML برود، علامت کوچک‌تر از را برچسب حساب می‌کند.

اول برگه را بخوان

فایل با سه مقدار باز می‌شود. هنوز هیچ مقداری نسبت داده نشده.

خواندن برگه

javascript 
console.log(document.getElementById("boat").textContent);
console.log(document.getElementById("when").textContent);
console.log(document.getElementById("note").textContent);

خروجی‌ها Gull و 09:10 و Boarding است. ساعت پاراگراف جداست. نوشتن‌های بعدی به when دست نمی‌زنند.

واژه، واژه می‌ماند

textContent همهٔ فرزندها را با یک گرهٔ متن عوض می‌کند. نویسه‌هایی که شکل برچسب دارند همان نویسنده می‌مانند.

واژهٔ ساده

javascript 
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.textContent = "<em>Late</em>";
console.log(boat.textContent);
console.log(note.textContent);
console.log(note.querySelector("em"));

خط اول Heron است. خط دوم خود نویسه‌های <em>Late</em> است. خط سوم null است. یادداشت برچسب را مثل متن نشان می‌دهد و عنصری نساخته.

innerHTML عنصر را می‌سازد

همان نویسه‌ها را به innerHTML بده. تجزیه‌گر رشته را به گره تبدیل می‌کند و هر چه داخل یادداشت بود جایش را می‌گیرد.

برچسب تجزیه‌شده

javascript 
let note = document.getElementById("note");
note.innerHTML = "<em>Late</em>";
console.log(note.textContent);
console.log(note.innerHTML);
console.log(note.querySelector("em") === null);

خط اول Late است. خط دوم <em>Late</em> است، چون innerHTML خود نشانه‌گذاری را برمی‌گرداند، با برچسب. خط سوم false است: em وجود دارد و null نیست. واژهٔ دیده‌شده و رشتهٔ برچسب دو خواندن از یک عنصرند.

innerHTML بعدی همان em را برمی‌دارد

مقدار تازهٔ innerHTML کل یادداشت را عوض می‌کند. em کنار متن جدید نمی‌ماند.

جایگزینی دوباره

javascript 
let note = document.getElementById("note");
note.innerHTML = "Dock 2";
console.log(note.textContent);
console.log(note.querySelector("em"));

خط اول Dock 2 است. خط دوم null است. Boarding از نوشتن قبلی رفته بود. این نوشتن em را هم می‌برد.

gate B را اضافه کن و Dock 2 بماند

insertAdjacentHTML("beforeend", ...) یک قطعه را تجزیه می‌کند و ته عنصر می‌گذارد. این رشته با یک فاصله شروع می‌شود تا دو عبارت به هم نچسبند. جایگاه‌های دیگر هم هست. این صفحه فقط beforeend را به کار می‌برد.

افزودن به ته

javascript 
let note = document.getElementById("note");
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
console.log(note.textContent);
console.log(note.querySelector("span").textContent);

خط اول Dock 2 gate B است. خط دوم gate B است. Dock 2 هنوز داخل یادداشت است. اگر همان رشتهٔ span را با innerHTML بگذاری، Dock 2 پاک می‌شود.

یک خط زیر برگه

اسکریپت ته body است، بعد از اینکه برگه در صفحه هست. واژهٔ Late را پیش از جایگزینی با Dock 2 نگه می‌دارد، بعد یک خط می‌سازد از اسم قایق، همان واژهٔ ذخیره‌شده، و یادداشت بعد از اضافه شدن gate B.

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

html 
<!DOCTYPE html>
<html>
<head>
<title>changing html — page</title>
</head>
<body>
<article id="slip">
<h2 id="boat">Gull</h2>
<p id="when">09:10</p>
<p id="note">Boarding</p>
<p id="line">…</p>
</article>
<script>
let boat = document.getElementById("boat");
let note = document.getElementById("note");
boat.textContent = "Heron";
note.innerHTML = "<em>Late</em>";
let late = note.textContent;
note.innerHTML = "Dock 2";
note.insertAdjacentHTML("beforeend", " <span>gate B</span>");
document.getElementById("line").textContent = boat.textContent + " / " + late + " / " + note.textContent;
</script>
</body>
</html>

خط صفحه می‌شود Heron / Late / Dock 2 gate B. ساعت هنوز 09:10 است. Late روی این خط همان واژه‌ای است که پیش از پاک شدن ذخیره شد. خود یادداشت دیگر Late نمی‌گوید. صفحهٔ بعد استایل CSS همین جور عنصرها را عوض می‌کند و راه تازه‌ای برای پیدا کردنشان نمی‌آورد.

برگه را چک کن

  1. سه متن شروع را بنویس و Gull و 09:10 و Boarding را انتظار داشته باش
  2. قایق را Heron کن و یادداشت را برابر نویسه‌های em بگذار؛ همان رشته و یک em برابر null را انتظار داشته باش
  3. innerHTML را برابر رشتهٔ em بگذار؛ textContent برابر Late، خود innerHTML هنوز با برچسب، و em که null نیست
  4. innerHTML را Dock 2 بگذار و انتظار null برای em
  5. span را با beforeend اضافه کن؛ Dock 2 gate B و بعد متن span یعنی gate B
  6. خط را بخوان: Heron / Late / Dock 2 gate B؛ ساعت را بخوان: 09:10

لغزش‌های همین برگه

صفحه باز می‌شود. نوع مقداری که نوشتی غلط بوده.

  • اسم تایپ‌شده پشت پنجره را ریختن در innerHTML، جایی که < برچسب می‌شود
  • انتظار ساختن em از textContent = "<em>Late</em>"
  • خواندن textContent بعد از ساخت em و انتظار دیدن برچسب در آن رشته
  • innerHTML دوباره و انتظار ماندن em
  • اضافه کردن gate B با innerHTML و از دست رفتن Dock 2
  • حذف فاصلهٔ اول رشته، طوری که یادداشت بشود Dock 2gate B
  • گذاشتن style در این صفحه؛ صفحهٔ بعد CSS را عوض می‌کند
  • صدازدن createElement اینجا؛ صفحهٔ دیگری گرهٔ تازه می‌سازد

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

  • textContent متن ساده می‌نویسد و برچسب را تجزیه نمی‌کند
  • innerHTML برچسب را می‌سازد و همهٔ فرزندها را عوض می‌کند
  • بعد از نوشتن em، textContent برابر Late است و innerHTML هنوز برچسب دارد
  • innerHTML دوم، em را حذف می‌کند
  • insertAdjacentHTML("beforeend", ...) نشانه‌گذاری اضافه می‌کند و Dock 2 می‌ماند
  • ساعت ۰۹:۱۰ می‌ماند چون هیچ مقداری به آن داده نمی‌شود
  • خط صفحه می‌شود Heron / Late / Dock 2 gate B

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

آماده شروع

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

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

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

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

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