آموزش برنامه نویسی جاوا اسکریپت-جلسه سی و پنجم

JavaScript HTML DOM Navigation

کل صفحه وب از بالا تا پایین برای خود فرزندانی دارد . کل سند html با document شناخته می شود. بعد از آن html است که خود از دوبخش head و body تشکیل شده هر کدام از این دو بخش نیز برای خود زیر مجموعه هایی دارند که فرزندان آن عنصر محسوب می شوند. به html که والد همه تگ هاست parentNode می گوییم، به head که بچه اول است firstchild می گوییم و به bodyهم  lastchild می گوییم یعنی فرزند آخر.

برای دسترسی به childها از node propertie های زیر در جاوااسکریپت استفاده می کنیم :

• parentNode
• childNodes[nodenumber]
• firstChild
• lastChild
• nextSibling
• previousSibling

برای دسترسی به مقدار یک المان از nodevalue استفاده می‌کنیم. nodename اسم تک را برمی گرداند. Nodetype به نوع یک تگ اشاره دارد مثلا برای تگ h هر h ای باشد 1 را برمی گرداند برای attribute ها 2 را برمی گرداند.

پیشنهاد ویژه: آموزش رایگان جاوااسکریپت

برای اضافه کردن یک المان مثل تگ p می توانیم از createElement استفاده می کنیم.

Const eleman-p = document.creatElement(“p”);

اگر بخواهیم برای تگ p یک متنی هم قرار دهیم از کد زیر استفاده میکنیم :

Const node = document.createtextNode(“this is a new p”);

برای اینکه متن داخل تگ  p قراربگیرد باید آن را انتساب بدهیم.

Eleman-p.appendchild(node);

حالا باید تگ p ایجاد شده را داخل یک div یا هر بخشی که می خواهیم قرار دهیم برای اینکار ابتدا آن المان که قرار است p ایجاد شده داخل آن قرار بگیرد را شناسایی می کنیم و سپس تگ ایجاد شده را با appendchild انتساب می دهیم.

Const part= document.getElementById(“div”);
Part.appendchild(eleman-p);

متد ()appendchild المانی را که اضافه می کند به عنوان فرزندی آخر اضافه میکند ولی اگر بخواهیم جای المان اضافه شده را مشخص کنیم از متدinsertBefore() استفاده می کنیم.  برای اینکار تگی که میخواهیم قبل از آن تگ جدید اضاف شود را باید به عنوان یک متغیر شناسایی کنیم. مثلا اگر ما p1,p2 داریم و میخواهیم تگ جدید ما قبل از p1 باشد به این صورت عمل میکنیم :

Const child = document. getElementById(“p1”);
Part.insertBefore(eleman-p,child);

برای حذف یک المان نیز از متد remove() استفاده میکنیم .

const elmnt = document.getElementById(“p1”);
elmnt.remove();

برای حذف کردن به این صورت هم میتوانیم عمل کنیم:

parent.removeChild(child);

یعنی والد را که شناساندیم فرزندی که میخواهد حذف شود را مشخص میکنیم تا از والد حذف شود.

برای جا به جا کردن نیز از متد() replaceChildاستفاده می کنیم

parent.replaceChild(para, child);