بررسی موقعیت عناصر در یک سند HTML

بررسی موقعیت عناصر نسبت به یکدیگر در یک سند HTML


امیر سروری ۱۴ دیدگاه CSS , HTML , اصول طراحی وب سایت سه شنبه, ۴ام مرداد , ۱۳۹۰ 18191 بازدید

نحوه چینش عناصر تمامی سندهای HTML به صورت درختی قابل تحلیل است . هر درجه و رتبه از این درخت معنایی مشابه با روابط انسانی دارد و می توان روابط بین این عناصر را با روابط انسانی مقایسه نمود . معانی مانند جد ، نسل ، والدین ، فرزند و خواهر و برادر – ancestors, descendants, parents, children and siblings – درک مفهوم موقعیت عناصر نسبت به یکدیگر در یک سند HTML می تواند کمک بزرگی برای درک بهتر مفاهیمی مانند گزینشگرها در CSS باشد .

برای توضیح و درک این روابط در یک سند HTML یک سند ساده را به عنوان مثال در نظر خواهیم گرفت .

<body>
<div class="content">
<h1>Heading here</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
<hr>
</div>
<div class="nav">
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
</div>
</body>

برای درک بهتر مطالب نمودار درختی این سند HTML به شکل زیر ترسیم خواهد شد .

document tree

جد -Ancestor

جد – Ancestor – اشاره دارد به عنصری که در بالاترین سطح و در نوک درخت قرار می گیرد . مهم نیست که چقدر و چند سطح بالاتر است . در نمودار زیر عنصر body جد تمامی عناصر موجود در این سند HTML است به این معنی که در بالاترین سطح قرار دارد .

به این نکته توجه کنید که هر عنصری که زیر مجموعه دارد می تواند جد زیر مجموعه خودش باشد . به این معنی که در نمودار زیر هر کدام از div ها جد زیر مجموعه خودشان هستند .

document tree

نسل – Descendant

نسل – Descendant – اشاره دارد به تمامی عناصری که در درخت یک سند HTML با یکدیگر متصلند و در زیر مجموعه یک عنصر قرار می گیرند . مهم نیست در چند سطح پائینتر قرار گرفته اند .

در نمودار بالا تمامی عناصر متصل به div مشخص شده نسل این div هستند .

document tree

والدین – Parent

والدین – Parent دقیقا اشاره دارد به عنصر بالا دستی و متصل در درخت یک سند HTML . در نمودار زیر div مشخص شده والدین ul است .

document tree

فرزند – Child

فرزند – Child دقیقا اشاره دارد به عنصر پائین دستی و متصل در درخت یک سند HTML . در نمودار زیر ul فرزند div مشخص شده است .

document tree

خواهر و برادر – Sibling

خواهر و برادر ها – Sibling – عناصری هستند که دارای یک والدین مشترک هستند . توجه داشته باشید که خواهر و برادرها در یک سطح قرار خواهند گرفت .

در نمودار زیر کلیه عناصر li با یکدیگر خواهر و برادر هستند و در یک سطح قرار دارند .

document tree

بررسی موقعیت یک عنصر در یک درخت سند HTML

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

با توجه به نمودار زیر وضعیت و نقش های یکی از عناصر که با رنگ تیره مشخص شده است را بررسی می کنیم .

  • فرزند body
  • والدین عنصر ul
  • جد عناصر ul و li
  • برادر و یا خواهر دیگر عنصر div موجود در درخت .

document tree



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۱۴ دیدگاه برای این نوشته ثبت شده است


  1. محسن هاشمی
    ۴ مرداد ۱۳۹۰

    سلام.

    در مورد ارث بری در CSS و ارتباطش با نحوه گزینش عناصر، مطلب بذارید.

    سپاس . . .




    • امیر سروری
      ۴ مرداد ۱۳۹۰

      محسن هاشمی @ سلام و درود بر استاد هاشمی . حتما ، اینها مقدماتی هستند برای نوشتن مطالب بیشتر در مورد css
      راستی یک gravatar خوب برای خودت انتخاب کن ;)




  2. محسن هاشمی
    ۵ مرداد ۱۳۹۰

    تست گراواتار !




  3. روژ
    ۲ بهمن ۱۳۹۰

    ممنون به خاطراینکه هستید ومینویسید




    • امیر سروری
      ۱۳ بهمن ۱۳۹۰

      روژ @ ممنون از اینکه دوستانی مانند شما هستند که من افتخار نوشتن و تهیه مطالب رو براشون داشته باشم . به امید اینکه همه حس انتقال تجربیات رو پیدا کنند و… ;-)




  4. احمد
    ۲۵ اردیبهشت ۱۳۹۱

    خیلی خوشحالم که سایتی به این خوبی پیدا کردم.
    و امیدوارم بتونم از مطالب بسیار بسیار مفیدتون استفاده کنم.
    و قدرشون رو بدونم
    براتون بهترین ها رو آرزو می کنم




  5. میلی
    ۲۶ فروردین ۱۳۹۲

    نامردی بود اگه ازتون تشکر نمیکردم !!! تشکر . . .




  6. امیر
    ۱۶ تیر ۱۳۹۲

    با سلام. بنده به تازگی با سایت شما آشنا شدم. خواهشی از اساتید گرامی دارم. یکی اینکه همانند بخش سی شارپ در پایان هر پست امکان دانلود نسخه پی دی اف رو هم قرار بدین. دوم اینکه بنده خیلی علاقمند به یادگیری صحیح سی اس اس و اچ تی ام ال هستم مطالبی هم در طول ۲ سال مطالعه کردم اما احساس میکنم برآورد مناسبی نداشته. خواهش میکنم در صورت امکان سلسله آموزشهایی اصولی و از اول تا یک حد معقول در سایت قرار بدین از آموزش های پایه ای تا آموزشهای کاربردی. ممنون میشم خبرش رو هم بدین. لطف میکنید.




    • مهدخت یافتیان
      ۱۷ تیر ۱۳۹۲

      سلام

      مرسی از اینکه مطالب وب تارگت را دنبال می کنید. برای html و css از پایه تا پیشرفته فعلا برنامه ای برای آموزش سریالی نداریم. اما ممکنه در آینده فیلم های آموزشی یا مطالب آموزشی در وب تارگت منتشر کنیم. اما در زمینه ی اینکه بتونید دانسته هاتون را منسجم کنید پیشنهاد می کنم در کلاسهای آموزشی کارآزموده شرکت کنید هم دوره های طراحی وب مقدماتی داره هم پیشرفته و با توجه به توضیحاتی که دادید فکر کنم دوره پیشرفته برای شما مناسب باشه.
      http://karazmoodeh.com/courses/
      خودآموزی همیشه بهترین روش یادگیری بوده اما گاهی اوقات کمک گرفتن از کسانی که در این زمینه فعالیت می کنند باعث میشه چیز هایی را که یاد گرفتید به تونید به صورت کاربردی پیاده سازی کنید یا حتی دانسته های خودتون را به روز کنید.




  7. reza
    ۲۲ شهریور ۱۳۹۲

    واقعا عالی بود .
    ممنون




  8. اشکان
    ۲۲ مهر ۱۳۹۲

    پستتون خیلی خلاصه و مفید بود. ممنون بابت زحمتایی که میکشین. :-)




  9. مسلم
    ۱۰ بهمن ۱۳۹۲

    سلام
    ممنون




  10. alug
    ۹ مرداد ۱۳۹۳

    عالی خیلی استفاده بردیم به امید بهتر شدن vasighidesign.ir



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.