مقدمه آموزش مدل DOM

مفهوم گره ( Node ) در مدل DOM :

بر طبق استاندارد مدل DOM هر عنصر ، تگ ، خاصيت و يا نوشته در يک صفحه HTML يک گره ( Node ) محسوب می شود . بر طبق اين اصل تعاريف زير را می توانيم داشته باشيم :

1. کل صفحه HTML ، يک گره صفحه ( documnet Node ) محسوب می شود .
2. هر تگ HTML ، يک گره عنصر ( element Node ) محسوب می شود .
3. متن ها و نوشته های بين تگ ها ( در مواردی مانند پاراگراف ها و لينک ها ) گره های متنی ( text Node ) محسوب می شوند .
4. هر خاصيت در تگ ها و کنترل های HTML ، يک گره صفت ( attribute Node ) محسوب می شوند .
5. توضيحات comments در صفحات HTML ، گره های توضيحی ( comment Node ) محسوب می شوند .

ارتباط و سلسله مراتب در گره ها :

همانطور که در بخش مقدمه مدل DOM گفتيم ، اين مدل دارای يک سيستم سلسله مراتبی برای رده بندی عناصر در يک صفحه HTML است . بر اين اساس ، گره ها نيز در مدل DOM دارای همان ترتيب سلسله مراتبی هستند . به عبارت ديگر ، گره ها در مدل DOM ، از گره صفحه يا document شروع شده و به ترتيب به گره های رده پايين تر ادامه می يابند تا به متن ها که در پايين ترين رده گره ها هستند ، برسند . برای درک بهتر به مثال زير و توضيحات آن دقت کنيد :

در قطعه کد بالا ، تمامی گره ها ( Nodes ) به هم مرتبط بوده و دارای رده سلسله مراتب نسبت به هم می باشند .

هر گره ای به جزء گره صفحه ( document Node ) دارای يک گره مادر ( parent Node ) می باشد . گره مادر گره ای است که در سيستم سلسه مراتبی يک رده بالاتر از گره ای که مادر آن است بوده و در واقع شامل آن می شود . برای مثال در قطعه کد فوق ، گره مادر گره های < head > و < body > گره < html > است و يا گره مادر عبارت متنی Matn Safhe ، گره < p > می باشد .

بيشتر گره ها نيز ممکن است دارای يک يا چندين فرزند ( child Node ) باشند . گره فرزند ، گره ای است که در سيستم سلسله مراتبی يک رده پايين تر از گره مادر بوده و در واقع زير مجموعه آن محسوب می شود . برای مثال در قطعه کد فوق گره < html > دارای 2 گره فرزند < head > و < body > بوده و يا عبارت متنی Titr Safhe گره فرزند تگ < h1 > محسوب می شود .

گره ها زمانی که دارای مادر مشترک هستند ، برادر خواهر محسوب می شوند . برای مثال در قطعه کد فوق دو گره < head > و < body > ، به دليل اينکه گره مادر هر دو آنها مشترک بوده و مادر آنها تگ < html > است ، خواهر برادر خوانده می شوند .

همچنين گره ها می توانند دارای نوه باشند . گره نوه ، گره ای است که بيش از يک رده از گره جد خود پايين تر بوده و در واقع فرزند فرزند يک گره باشد . برای مثال در قطعه کد فوق تمامی عبارت های متنی ، نوه گره < html > بوده و نيز گره متنی Page Title نوه گره < head > محسوب می شود .
نکته : يک گره زمانی نوه جد خود محسوب می شود که بر اساس استاندارد های کدنويسی به زبان HTML ، زير مجموعه آن تگ باشد . به عنوان مثال گره متنی Titr Safhe بيش از يک رده از گره < head > پايين تر است ، ولی به دليل اينکه در زير مجموعه تگ < head > قرار ندارد ، نوه آن محسوب نمی شود .

به علاوه گره ها می تواندد دارای جد نيز باشند . جد يک گره ، گره ای است که بيش از يک رده از گره نوه خود بالاتر بوده و در واقع مادر مادر آن گره محسوب می شود . برای مثال جد گره های < h1 > و < p > ، گره < html > است .