نودها در جاوا اسکریپت

به نام خدا با عرض سلام و وقت بخیر خدمت دوستان گرامی در راستای آموزش جاوا اسکریپت این جلسه به بحث نودها در جاوا اسکریپت خواهیم پرداخت با ما همراه باشید.

Document Object Model یا به اختصار DOM یک مدل مستقل از پلتفرم و زبان برای نمایش اسناد HTML یا XML است. ساختار منطقی اسناد و نحوه دسترسی و دستکاری آنها توسط یک برنامه کاربردی را بیان می کند.

در DOM، تمام بخش‌های سند، مانند عناصر، ویژگی‌ها، متن و غیره در یک ساختار درخت‌مانند سلسله مراتبی سازمان‌دهی می‌شوند. شبیه به یک شجره نامه در زندگی واقعی که متشکل از والدین و فرزندان است. در اصطلاح DOM این بخش‌های جداگانه سند به عنوان گره شناخته می‌شوند.

مدل شیء سند که نمایانگر سند HTML است، HTML DOM نامیده می شود. به طور مشابه، DOM که سند XML را نشان می دهد، XML DOM نامیده می شود.

در این فصل ( شامل این جلسه و چند جلسه بعدی)ما HTML DOM را پوشش خواهیم داد که یک رابط استاندارد برای دسترسی و دستکاری اسناد HTML از طریق جاوا اسکریپت فراهم می کند.با HTML DOM، می توانید از جاوا اسکریپت برای ساخت اسناد HTML، پیمایش ساختار سلسله مراتبی آنها و افزودن، اصلاح یا حذف عناصر و ویژگی ها یا محتوای آنها و … استفاده کنید.تقریباً هر چیزی که در یک سند HTML یافت می شود را می توان با استفاده از جاوا اسکریپت با کمک HTML DOM به آن دسترسی پیدا کرد، و انها را میتوان تغییر، حذف یا اضافه کرد.

برای درک بهتر این موضوع، اجازه دهید سند HTML ساده زیر را در نظر بگیریم:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Mobile OS</h1>
    <ul>
        <li>Android</li>
        <li>iOS</li>
    </ul>
</body>
</html>

سند HTML فوق را می توان با درخت DOM زیر نشان داد

ساختارHTML DOM در جاوا اسکریپت

نمودار بالا روابط والد/فرزند بین گره ها را نشان می دهد.بالاترین گره، یعنی گره Document، گره ریشه درخت DOM است که دارای یک فرزند، عنصر <html> است.در حالی که عناصر <head> و <body> گره های فرزند گره والد <html> هستند.

عناصر <head> و <body> نیز خواهر و برادر هستند زیرا در یک سطح هستند.علاوه بر این، محتوای متن داخل یک عنصر، گره فرزند عنصر والد است.بنابراین، به عنوان مثال، “Mobile OS” به عنوان یک گره فرزند از <h1> در نظر گرفته می شود.

کامنت ها داخل سند HTML نیز گره هایی در درخت DOM هستند، حتی اگر به هیچ وجه بر نمایش بصری سند تأثیری نداشته باشد.کامنت ها برای مستندسازی کد مفید هستند، با این حال، به ندرت نیاز به بازیابی و دستکاری آنها خواهید داشت.

ویژگی‌های HTML مانند id, class, title, style و … نیز به عنوان گره در سلسله مراتب DOM در نظر گرفته می‌شوند اما مانند گره‌های دیگر در روابط والد/فرزند شرکت نمی‌کنند.آنها به عنوان ویژگی های گره عنصری که آنها را در بر می گیرد قابل دسترسی هستند.

هر عنصر در یک سند HTML مانند تصویر، لینک، فرم، دکمه، عنوان، پاراگراف و غیره با استفاده از یک ابجکت جاوا اسکریپت در سلسله مراتب DOM نشان داده می شود و هر ابجکت حاوی ویژگی ها و روش هایی برای توصیف و دستکاری این اشیا است.به عنوان مثال، از ویژگی style عناصر DOM می توان برای دریافت یا تنظیم استایل دهی به صورت inline برای یک عنصر استفاده کرد.

در بخش های بعدی، نحوه دسترسی به عناصر تکی در یک صفحه وب و دستکاری آنها، به عنوان مثال، تغییر استایل، محتوا و …با استفاده از جاوا اسکریپت را خواهیم آموخت.

دوستان عزیز به پایان جلسه نودها در جاوا اسکریپت رسیدیم امیداواریم مورد توجه شما واقع گردد.