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



  • ۲۴
  • آبان

جلسه ۸۳ : گره ها در HTML DOM

  • دسته‌بندی‌ها :
جلسه ۸۳ : گره ها در HTML DOM
    • جزئیات
    • نوع محتواآموزش تصویری

      با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
      در این جلسه قصد داریم تا با گره ها در HTML DOM ، خاصیت nodeType ، رابطه گره ها و حذف گره های HTML در جاوا اسکریپت آشنا شویم.

      طبق گفته W3C، هرچیزی در HTML یک گره (node) است :

      • تمام سند یک گره سند است.
      • هر عنصر HTML یک گره عنصر است.
      • متن داخل عناصر HTML گره هلی متن هستند.
      • تمام کامنت ها گره های کامنت هستند.

       

      گره ها در HTML DOM

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

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

      رابطه گره ها

      در درخت گره، بالاترین گره، گره اصلی root نام دارد.
      هر گره ای والدی دارد. به جز گره اصلی
      هر گره می تواند تعدادی فرزند داشته باشد.

      به کد زیر دقت کنید:

      مثال : 

      از کد بالا می توان فهمید که:

      • <html> گره اصلی می باشد
      • <html> والدی ندارد
      • <html> والد گره های <head> و <body> است
      • <head> اولین فرزند گره <html> است
      • <body> آخرین فرزند گره <html> است

      همچنین:

      • <head> یک فرزند دارد : <title>
      • <title> یک گره فرزند دارد (گره متنی) : “DOM Tutorial”
      • <body> دو فرزند دارد: <h1> و <p>
      • <h1> یک فرزند دارد: “DOM Lesson one”
      • <p> یک فرزند دارد: “Hello world”

      در مثال زیر ما مقدار عنصر <p> با “id=”id02 را برابر مقدار فرزند گره <h1> قرار می دهیم:

      مثال : 

      مثال زیر نیز مانند کد بالا عمل می کند:

      مثال : 

      خاصیت nodeType

      این خاصیت Property نوع گره را بر می گرداند:

      مثال : 

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

      مثالنوعگره
      <h1 class=”heading”>PVLearn</h1>۱ELEMENT_NODE
      PVLearn۳TEXT_NODE
      <!– This is a comment –>۸COMMENT_NODE
      سند html۹DOCUMENT_NODE
      <!Doctype html>۱۰DOCUMENT_TYPE_NODE

      ایجاد گره های HTML در جاوا اسکریپت

      برای ایجاد گره های HTML در جاوا اسکریپت ابتدا باید عنصر element را ایجاد کنیم و سپس گره را به عنصر موجود اضافه کنیم:

      مثال : ایجاد گره های html در جاوا اسکریپت
      خودتان امتحان کنید »

      حذف گره های HTML در جاوا اسکریپت

      برای حذف گره های HTML در جاوا اسکریپت باید والد عنصر را بدانیم:

      مثال : حذف گره های موجود html
      خودتان امتحان کنید »

      نکته : متد () node.remove در هیچیک از نسخه های مروگر Internet Explorer کار نمی کند.

      تشریح مثال فوق :

      این سند html شامل یک عنصر <div> با دو عنصر html فرزند (دو عنصر <p> ) می شود.

      مثال : 

      عنصری با  “id=”div1 پیدا می شود :

      مثال : 

      پیدا کردن عنصر <p> :

      مثال : 

      حذف عناصر فرزند یک عنصر والد:

      مثال : 

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

      در اینجا یک راه حل معمول وجود دارد: برای پیدا کردن فرزندی که می خواهید حذف کنید، از ویژگی parentNode خود برای پیدا کردن والدین آن استفاده کنید:

      مثال : 

      جایگزینی عناصر HTML

      برای جایگزینی یک عنصر در HTML DOM از متد ()replaceChild استفاده کنید :

      مثال : جایگزینی عناصر HTML با متد ()replaceChild
      خودتان امتحان کنید »

      جلسه گره ها در HTML DOM نیز به پایان رسید.

      QR:  جلسه ۸۳ : گره ها در HTML DOM
      به اشتراک بگذارید


      دیدگاه کاربران
      1. تصویر کاربر