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

نحوه چینش عناصر تمامی سندهای 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 به شکل زیر ترسیم خواهد شد .

جد -Ancestor

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

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

نسل – Descendant

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

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

والدین – Parent

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

فرزند – Child

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

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

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

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

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

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

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

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