دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۲۴
  • آبان

جلسه ۸۰ : Navigation در جاوا اسکریپت

  • دسته‌بندی‌ها :
جلسه ۸۰ : Navigation در جاوا اسکریپت
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، مبحث کار با Navigation در جاوا اسکریپت به چگونگی حرکت در درخت node (ارتباط بین  عناصر زیر مجموعه های یک عنصر HTML یا عناصر هم سطح و یا والد آن) اشاره دارد، این مبحث البته در زبان های دیگری همانند CSS نیز ارائه شده است. جاوا اسکریپت به شما این امکان را می دهد که با استفاده از یک عنصر HTML بتوانید به عناصر زیر مجموعه ، هم سطح و یا عناصر والد آن ، دسترسی پیدا کنید،که به این حرکت اصولا  Navigation در جاوا اسکریپت  اطلاق می شود. برای آشنایی با چگونگی کار با این قابلیت در ادامه ی این مبحث با ما همراه باشید.

      کار با Navigation در جاوا اسکریپت

      در ادامه ی این مبحث به چگونگی Navigation در جاوا اسکریپت برای دستیابی به عناصر مرتبط با یک عنصر HTML می پردازیم.

      گره های DOM

      با توجه به استاندارد  HTML DOM، همه چیز در یک سند HTML یک گره است:

      • کل سند یک گره سند است.
      • هر عنصر HTML یک گره عنصری است.
      • متن داخل عناصر HTML گره های متنی است.
      • هر خصیصه HTML یک گره attribute است. (غیرقابل قبول)
      • همه توضیحات گره هستند.

      گره های DOM 

      با HTML DOM، تمام گره ها در درخت گره می توانند توسط جاوا اسکریپت دسترسی پیدا کنند.

      گره های جدید می توانند ایجاد شوند و تمام گره ها را می توان تغییر داد یا حذف کرد.

      ارتباطات node

      گره ها در درخت node یک رابطه سلسله مراتبی با یکدیگر دارند.

      اصطلاحات پدر و مادر، فرزند و خواهر و برادر برای توصیف روابط بین عناصر HTML در صفحه وب استفاده می شود.

      • در یک درخت node ، گره بالا ریشه (یا گره ریشه).
      • هر گره دقیقا یک والد دارد، به جز ریشه (که هیچ پدر و مادری ندارد).
      • یک گره می تواند تعدادی عناصر فرزند داشته باشد.
      • خواهر و برادر (برادر یا خواهر) یک گره، یک والد یکسان دارند.

      ارتباطات node

      مثال : 

      سلسله مراتب درخت node در HTML فوق به این صورت است :

      • <html> گره ریشه است.
      • <html> هیچ والدی ندارد.
      • <html> عنصر والد <head> و <body> است.
      • <head> اولین فرزند <html> است.
      • <body> آخرین فرزند <html> است.
        و :
      • <head> یک فرزند دارد: <title>
      • <title> دارای یک فرزند (یک گره متنی) است: “DOM Tutorial”
      • <body> دو فرزند دارد: <h1> و <p>
      • <h1> یک فرزند دارد: “DOM Lesson One”
      • <p> یک فرزند دارد: “Hello world!”
      • <h1> و <p> خواهر و برادر هستند.

      حرکت بین node ها

      شما می توانید با استفاده از خصوصیات node بین node ها در جاوا اسکریپت حرکت کنید:

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

      نودهای فرزند و مقادیر نود

      نکته : یک خطای رایج در پردازش DOM این است که انتظار داشته باشید یک گره عنصر حاوی متن باشد.

      مثال-

      مثال : 

      گره عنصر <title> (در مثال بالا) شامل متن نیست.

      این شامل یک گره متنی با مقدار “DOM Tutorial” است.

      مقدار گره متنی می تواند توسط ویژگی innerHTML گره قابل دسترسی باشد:

      مثال : 

      دسترسی به خصوصیت innerHTML همانند دسترسی به nodeValue فرزند اول است :

      مثال : 

      دسترسی به اولین فرزند نیز می تواند به این صورت انجام شود:

      مثال : 

      تمام مثال های زیر (۳) متن یک عنصر <h1> را بازیابی می کند و آن را به عنصر <p> کپی می کند:

      مثال : کپی محتوای عناصر
      خودتان امتحان کنید »

      مثال-۲

      مثال : روش دوم کپی محتوای عناصر
      خودتان امتحان کنید »

      مثال-۳

      مثال : روش سوم کپی محتوای عناصر
      خودتان امتحان کنید »

      خصوصیت innerHTML

      در این آموزش از ویژگی innerHTML برای بازیابی محتوای یک عنصر HTML استفاده می کنیم.

      با این حال، یادگیری روش های دیگر در بالا برای درک ساختار درخت و ناوبری DOM مفید است.

      node های ریشه در DOM

      دو خصوصیت خاص که اجازه دسترسی به سند کامل را می دهند وجود دارد:

      document.body – قسمتی از سند
      document.documentElement – یک سند کامل

      مثال : نودهای ریشه
      خودتان امتحان کنید »

       

      مثال : نودهای ریشه -2
      خودتان امتحان کنید »

      خصوصیت nodeName

      خصوصیت nodeName نام گره را مشخص می کند.

      • nodeName فقط خواندنی است.
      • nodeName یک گره عنصر همان نام برچسب است.
      • nodeName یک گره attribute است که نام attribute است.
      • nodeName یک گره متن همیشه #text است.
      • nodeName گره سند همیشه # document است.

      مثال : خصوصیت nodeName
      خودتان امتحان کنید »

      نکته : nodeName همیشه حاوی نام تگ فوقانی عنصر HTML است.

      خصوصیت nodeValue

      مقدار nodeValue مقدار گره را مشخص می کند.

      • nodeValue برای گره های عنصر null است.
      • nodeValue برای گره های متنی متن خود است.
      • nodeValue برای ویژگی گره ها ارزش خصوصیت است.

      خصوصیت nodeType

      خصوصیت nodeType فقط خواندنی است، این نوع یک node را برمی گرداند.

      مثال : نوع یک نود
      خودتان امتحان کنید »

      مهمترین ویژگیهای nodeType عبارتند از:

      NodeTypeExample
      ELEMENT_NODE۱<h1 class=”heading”>Pvlearn</h1>
      ATTRIBUTE_NODE۲ class = “heading” (deprecated)
      TEXT_NODE۳Pvlearn
      COMMENT_NODE۸<!– This is a comment –>
      DOCUMENT_NODE۹The HTML document itself (the parent of <html>)
      DOCUMENT_TYPE_NODE۱۰<!Doctype html>

      نوع ۲ در HTML DOM خالی است (اما کار می کند). این در DOM XML متداول نیست.

      کلام آخر

      عناصر HTML هر صفحه وب یک با یک سلسله مراتبی خاصی نسبت به ساختاری که تعریف شده اند با یکدیگر مرتبط اند، که معمولا به آن درخت NODE اطلاق می شود. جاوا اسکریپت اجازه ی پیشمایش درخت node و دسترسی به عناصر html مرتبط با یک عنصر را می دهد،از این رو برای آشنایی شما با این قابلیت مباحث کار با Navigation در جاوا اسکریپت در این بخش ارائه کردیم.

      QR:  جلسه ۸۰ : Navigation در جاوا اسکریپت
      به اشتراک بگذارید


      دیدگاه کاربران