ساخت عنصر در صفحه
روی تختهٔ چوب‌پنبهٔ آشپزخانه از قبل یک ردیف سنجاق شده. فقط milk. لیست همان #board است. خود ردیف یک li است با id برابر milk. نشانه‌گذاری یک خط است، پس بین تگ‌ها گرهٔ خالی از خطِ شکسته نداریم.
می‌خواهی tea و bread و eggs هم بیایند روی تخته. برچسب را با رشته نساز. document.createElement("li") یک li تازه به تو می‌دهد که هنوز هیچ‌جا ننشسته. parentElement آن null است. document.body.contains هم false است. children تخته هنوز ۱ است؛ فقط همان milk.
textContent = "tea" فقط واژه را روی همان شیء می‌نویسد. به صفحه وصلش نمی‌کند.
board.append(tea) می‌چسباندش ته لیست. خود این فراخوانی undefined است. گره را پس نمی‌دهد. appendChild همان گره را به دستت می‌دهد؛ این صفحه append را به کار می‌برد. prepend نان را می‌گذارد اول. insertBefore(eggs, milk) تخم‌مرغ را درست قبل از milk جا می‌دهد، چون milk از قبل بچهٔ تخته است. ترتیب می‌شود bread، eggs، milk، tea. طول children می‌شود ۴.
آزمایش کناری فقط روی تختهٔ دست‌نخورده است: createTextNode("salt"). این یکی li نیست. گرهٔ متنی است. اگر سنجاقش کنی، children همان ۱ می‌ماند. childNodes از ۱ می‌شود ۲. nodeType برابر ۳ است. آخرین عنصر هنوز milk است. نمایش صفحه نمک را اضافه نمی‌کند.
خط زیر تخته این است: bread / eggs / milk / 4. tea توی لیست هست، توی این خط نه. عدد ۴ تعداد عنصرهاست. متن milk همان milk می‌ماند. اینجا به استایل دست نمی‌زنی.
گرهٔ تازه، نه یک دست رنگ دیگر
صفحهٔ قبل روی تراشهٔ رنگ style و setProperty و classList و cssText نوشت. گره نساخت. صفحهٔ پیش از آن با textContent و innerHTML و insertAdjacentHTML واژه‌ها را عوض کرد. اینجا به style مقدار نمی‌دهی، رشتهٔ HTML را تجزیه نمی‌کنی، و واژهٔ milk را بازنویسی نمی‌کنی. getElementById فقط تخته و همان ردیف milk را به دستت می‌دهد. ردیف‌های تازه از createElement می‌آیند.
هر گره کجا می‌نشیند
تخته با یک li شروع می‌شود: milk. ردیف‌ها را به ترتیب بخوان. ردیف نمک آزمایش کناری است، روی همین تختهٔ اول، پیش از آن‌که tea و bread و eggs وجود داشته باشند. نمایش صفحه روی insertBefore می‌ایستد و نمک را سنجاق نمی‌کند.
📊 هر گره کجا می‌نشیند
| فراخوانی | جای گرهٔ تازه | بچه‌های عنصری | لغزش رایج |
|---|---|---|---|
createElement("li") |
هیچ‌جا؛ parentElement برابر null |
هنوز ۱، همان milk | خیال اینکه ردیف از قبل روی تخته است |
textContent = "tea" |
باز هم هیچ‌جا | هنوز ۱ | خیال اینکه خود واژه یک li می‌سازد |
append(tea) |
ته لیست؛ نتیجهٔ فراخوانی undefined |
۲ تا: milk بعد tea | انتظار اینکه append خود گره را بدهد |
prepend(bread) |
اول لیست | ۳ تا: bread، milk، tea | جابه‌جا گرفتن prepend با append |
insertBefore(eggs, milk) |
درست قبل از milk | ۴ تا: bread، eggs، milk، tea | مرجع که بچهٔ تخته نیست |
append(createTextNode("salt")) روی تختهٔ تازه |
گرهٔ متنی بعد از milk، نه li |
هنوز ۱ | بالا رفتن children.length به ۲ |
createElement گره را در حافظه می‌سازد. تا روشی آن را جا ندهد، تخته عوض نمی‌شود. children فقط عنصرها را می‌شمارد. گرهٔ متنی داخل childNodes هست و داخل children نیست. append و prepend مقدار undefined دارند. appendChild همان گره‌ای را می‌دهد که به آن دادی. append گره یا رشته می‌گیرد؛ رشته گرهٔ متنی می‌شود. appendChild فقط گره می‌گیرد و با رشته خطا می‌دهد. insertBefore مرجعی می‌خواهد که از قبل بچهٔ همان پدر باشد. اگر مرجع را null بدهی، گره می‌رود ته لیست، مثل append. این صفحه milk را می‌دهد، نه null. اگر گره‌ای را که خودش روی تخته است دوباره append کنی، جابه‌جا می‌شود. کپی نمی‌شود.
این li هنوز روی تخته نیست
فایل با همان لیست یک‌خطی باز می‌شود. هنوز چیزی نساخته‌ای. این چهار خروجی سراغ گرهٔ تازه و خود تخته می‌روند، قبل از متن و قبل از چسباندن.
let board = document.getElementById("board");
let tea = document.createElement("li");
console.log(tea.parentElement);
console.log(document.body.contains(tea));
console.log(board.children.length);
console.log(tea.textContent);
خروجی‌ها: null، false، 1، و رشتهٔ خالی. مرورگر یک شیء li واقعی دارد. پدر ندارد. تنها بچهٔ عنصری هنوز milk است. واژهٔ milk مال همان ردیف قدیمی است، نه مال این یکی.
واژهٔ tea هنوز آن را وارد لیست نمی‌کند
textContent متن داخل همان گره‌ای را عوض می‌کند که در دست توست. روش چسباندن نیست. فهرست بچه‌های تخته بزرگ نمی‌شود.
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
console.log(tea.textContent);
console.log(document.body.contains(tea));
console.log(board.children.length);
خروجی‌ها: tea، false، و 1. واژه را از روی شیء می‌خوانی. صفحه هنوز فقط milk را نشان می‌دهد. چون گره زیر سند ننشسته، contains برابر false است.
append، چای را می‌گذارد ته لیست
append گره را آخرین بچه می‌کند. متغیر fromAppend نتیجهٔ فراخوانی است: undefined، نه خود li. بعد از فراخوانی، پدر همان تخته است و متن آخرین عنصر tea است. ترتیب: milk، بعد tea.
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
let fromAppend = board.append(tea);
console.log(fromAppend);
console.log(tea.parentElement === board);
console.log(board.lastElementChild.textContent);
console.log(board.children.length);
خروجی‌ها: undefined، true، tea، و 2. اگر appendChild(tea) بود، همان گرهٔ tea را در کنسول می‌دیدی. این قطعه appendChild را صدا نمی‌زند. milk هنوز اولین بچهٔ عنصری است.
prepend و insertBefore ترتیب را می‌چینند
این قطعه دوباره از تختهٔ اصلی شروع می‌کند و سه جاگذاری دارد. prepend وقتی اجرا می‌شود که tea از قبل ته لیست است، برای همین bread می‌شود بچهٔ اول. insertBefore(eggs, milk) مرجعش milk است، پس eggs بین bread و milk می‌نشیند. چهار متن: bread، eggs، milk، tea.
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
console.log(board.children[0].textContent);
console.log(board.children[1].textContent);
console.log(board.children[2].textContent);
console.log(board.children[3].textContent);
خروجی‌ها: bread، eggs، milk، و tea. طول children برابر ۴ است. اندیس ۱ می‌شود eggs، نه milk. milk از اندیس ۰ رفته به اندیس ۲، چون دو ردیف قبل از آن نشسته‌اند. متن milk هنوز خود واژهٔ milk است.
گرهٔ متنی وارد children نمی‌شود
این بلوک را روی تختهٔ تازه بزن، همان لیست یک‌خطی اول، نه بعد از اسکریپت صفحه. createTextNode گرهٔ متنی می‌سازد. nodeType با مقدار ۳ یعنی متن. مقدار ۱ یعنی عنصر. children این گره را نادیده می‌گیرد، پس طول همان ۱ می‌ماند. childNodes آن را می‌شمارد، پس طول از ۱ به ۲ می‌رسد. آخرین عنصر هنوز ردیف milk است. ممکن است واژهٔ salt را توی لیست ببینی؛ با این حال li نیست.
let board = document.getElementById("board");
let salt = document.createTextNode("salt");
board.append(salt);
console.log(salt.nodeType);
console.log(board.children.length);
console.log(board.childNodes.length);
console.log(board.lastElementChild.id);
خروجی‌ها: 3، 1، 2، و milk. اگر رشته را به append بدهی، مثلاً board.append("salt")، باز هم گرهٔ متنی ساخته می‌شود، نه li. نمایش صفحه، پایین‌تر، این خط را ندارد.
یک خط زیر تخته
اسکریپت ته body است، بعد از لیست. tea را ته می‌چسباند، bread را اول می‌گذارد، و eggs را قبل از milk جا می‌دهد. نمک نمی‌سازد. اندیس ۰ و ۱ و ۲ را می‌نویسد، به‌اضافهٔ تعداد عنصرها. متن چهارم، یعنی tea، را در خط نمی‌آورد.
<!DOCTYPE html>
<html>
<head>
<title>create elements — page</title>
</head>
<body>
<ul id="board"><li id="milk">milk</li></ul>
<p id="line">…</p>
<script>
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
document.getElementById("line").textContent =
board.children[0].textContent + " / " +
board.children[1].textContent + " / " +
board.children[2].textContent + " / " +
board.children.length;
</script>
</body>
</html>
خط می‌شود bread / eggs / milk / 4. خود لیست bread، eggs، milk، tea است. خط روی آیتم سوم می‌ایستد و بعد طول را می‌گذارد، پس tea نشانهٔ آخر نیست و نشانهٔ آخر هم واژه نیست. salt اینجا نیست. متن ردیف milk هنوز milk است. صفحهٔ بعد رویدادهاست و راه تازه‌ای برای ساختن همین گره‌ها نمی‌آورد.
تخته را خودت چک کن
liرا بساز.parentElementوdocument.body.containsوchildren.lengthوtextContentرا در کنسول ببین. این‌هاست: null، false، ۱، و رشتهٔ خالی.- متن را tea بگذار. متن، contains، و طول را ببین. این‌هاست: tea، false، و ۱.
- tea را append کن. نتیجهٔ فراخوانی، یکی بودن پدر با تخته، متن آخرین عنصر، و طول را ببین. این‌هاست: undefined، true، tea، و ۲. بعد قطعهٔ ترتیب را اجرا کن و چهار متن را بخوان: bread، eggs، milk، tea.
- روی تختهٔ تازه، گرهٔ متنی نمک را append کن.
nodeType، طولchildren، طولchildNodes، و id آخرین عنصر را ببین. این‌هاست: ۳، ۱، ۲، و milk. خط صفحه این است: bread / eggs / milk / 4.
لغزش‌های همین تخته
لیست هنوز با milk باز می‌شود. فراخوانی از جنس اشتباه بوده.
- انتظار اینکه
createElement("li")همان لحظه tea را روی تخته نشان بدهد - انتظار اینکه
textContent = "tea"طولchildrenرا زیاد کند - انتظار اینکه
appendخودliرا بدهد؛ آن رفتار مالappendChildاست - دادن رشته به
appendChild؛ رشته مالappendاست و آنجا گرهٔ متنی می‌شود insertBeforeبا مرجعی که بچهٔ تخته نیست- شمردن گرهٔ متنی نمک داخل
children - ساختن ردیف تازه با
innerHTML؛ صفحهٔ تغییر HTML نشانه‌گذاری را تجزیه می‌کرد - نوشتن
style.colorاینجا؛ صفحهٔ قبل کارش CSS بود - خواندن خط به شکل bread / eggs / milk / tea
- صدازدن
removeیاcloneNodeاینجا؛ این صفحه فقط همان سه ردیف را اضافه می‌کند
این‌ها را با خودت ببر
createElement("li")ردیف جدا می‌سازد؛parentElementبرابر null است و طولchildrenهمان ۱ می‌ماندtextContent = "tea"واژه را می‌نویسد و گره را هنوز بیرون تخته می‌گذاردappend(tea)چای را ته لیست می‌گذارد و نتیجهٔ فراخوانیundefinedاستprepend(bread)وinsertBefore(eggs, milk)ترتیب bread، eggs، milk، tea را می‌سازندcreateTextNode("salt")روی تختهٔ تازه، طولchildrenرا روی ۱ نگه می‌دارد وnodeTypeرا ۳ نشان می‌دهد- خط می‌شود bread / eggs / milk / 4 و متن milk سر جایش می‌ماند
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود