مجتمع دیجیتال آرتا رسانه فعال در حوزه های برنامه نویسی بلاکچین - دیجیتال مارکتینگ و سئو - طراحی سایت و اپلیکیشن های موبایل - طراحی گرافیکی و موشن گرافیک و تولید محتوای دیجیتال جهت رونق کسب و کارها در فضای مجازی
JavaScript HTML DOM Navigation
کل صفحه وب از بالا تا پایین برای خود فرزندانی دارد . کل سند html با document شناخته می شود. بعد از آن html است که خود از دوبخش head و body تشکیل شده هر کدام از این دو بخش نیز برای خود زیر مجموعه هایی دارند که فرزندان آن عنصر محسوب می شوند. به html که والد همه تگ هاست parentNode می گوییم، به head که بچه اول است firstchild می گوییم و به bodyهم lastchild می گوییم یعنی فرزند آخر.
برای دسترسی به childها از node propertie های زیر در جاوااسکریپت استفاده می کنیم :
برای دسترسی به مقدار یک المان از nodevalue استفاده میکنیم. nodename اسم تک را برمی گرداند. Nodetype به نوع یک تگ اشاره دارد مثلا برای تگ h هر h ای باشد 1 را برمی گرداند برای attribute ها 2 را برمی گرداند.
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);
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);