مقدمه آموزش مدل DOM
همانطور که در بخش قبل اشاره شد ، شما به وسيله مدل DOM می توانيد به هر عنصری در يک
صفحه HTML که می خواهيد آن را تغيير داده و يا اطلاعاتی درباره آن کسب نماييد ، دسترسی
داشته باشيد .
در ادامه 2 روش کلی زير را برای دسترسی به عناصر مختلف در يک صفحه HTML را مورد بررسی
قرار می دهيم :
- با استفاده از متدهای ( ) getElementById و (
) getElementByTagName .
- با استفاده از خواص
parentNode , firstNode و lastChild يک گره .
متد های ( ) getElementById و ( ) getElementByTagName :
متدهای ( ) getElementById و ( ) getElementByTagName می توانند به هر عنصری در يک
صفحه HTML دسترسی داشته باشند . اين متدها کاری به ساختار و چيدمان صفحه ندارند و مهم
نيست که عنصر مورد نظر در کجای صفحه قرار گرفته باشد . اين در متد آنها را پيدا خواهند
کرد :
1 ) متد ( ) getElementById :
نحوه دسترسی اين متد به عناصر بر اساس خاصيت id آن عصر در HTML می باشد . اين متد دقيقا
عنصری که id آن را در پرانتز مقابل اين متد تعيين کرده باشيد ، را بر می گرداند . بنابراين
خروجی اين متد يک عنصر منحصر به فرد با id تعيين شده خواهد بود .
توجه : اين متد يکی از متدهای شی document است .
نکته مهم : همانطو که در بخش آموزش HTML آموختيد ، هر عنصر ( تگ )
در يک صفحه ، می تواند دارای يک شناسه يا id منحصر به فرد و غير تکراری باشد . به عبارت
ديگر هيچ دو عنصری در يک صفحه HTML ، نمی توانند دارای id يکسان باشند . از اين id
برای شناسايي و دسترسی به عنصر مورد نظر در صفحه استفاده می شود .
|
Syntax |
documnet.getElementById ( " عنصر مورد نظر id "
) ;
|
مثال : برای مثال فرض کنيد که شما در يک صفحه 3 پاراگراف ( تگ p )
با id های P1 ، P2 و P3 داريد . حال می خواهيد که متن درون يکی از پاراگراف ها
که id آن برابر P1 است ، را در جای ديگری نمايش دهيد . برای اين منظور از متد
getElementById استفاده کرده و به وسيله id پاراگراف
مورد نظر ابتدا به آن عنصر دسترسی پيدا کرده و سپس متن درون آن را توسط خاصيت
InnerText ، آنگونه که در کد مثال زير نمايش داده شده است ،
بر روی صفحه نمايش دهيد :
توجه : در ادامه با خواص بيشتری از عناصر مختلف در مدل
DOM آشنا خواهيد شد .
<html>
<head>
<title>Title of the Page</title>
</head>
<body>
<p id="P1">
www.DevelopperStudio.ir
</p>
<p id="P2">
An Investigation for Developement
</p>
<p id="P3">
HTML , CSS , SQL , Java Script and more ... free tutorial
</p>
<script type="text/javascript">
document.write ( document.getElementById(
"P1").innerText )
</script>
</body>
</html>
|
|
www.DevelopperStudio.ir
An Investigation for Developement
HTML , CSS , SQL , Java Script and more ... free tutorial
|
نکته : همانطور که در قسمت قبل گفتيم ، عنصر ( گره ) مادر يک عنصر
ديگر ، عنصری است که در رده سلسلمه مراتبی يک رده بالاتر از عنصر مذکور بوده و در واقع
آن را در برگرفته است .در مدل DOM می توان به عنصر يک مادر ديگر دسترسی داشت و آن را
نمايش داد . برای اين منظور به مثال زير دقت کنيد :
مثال 2 :در مثال زير يک عنصر پاراگراف ( تگ p ) و يک ليست ترتيبی
ايجاد کرده ايم ، که در درون ليست چندين آيتم ( تگ li ) قرار گرفته است . در اين مثال
با استفاده از متد getElementById ابتدا به دو عنصر
Pex و li_1دسترسی پيدا کرده و سپس توسط خاصيت
parenElement عنصر مادر آنها را در خروجی نمايش داده ايم :
<html>
<head>
<title>Title of the Page</title>
</head>
<body id ="BODY">
<p id="Pex">
www.DevelopperStudio.ir
</p>
<ol id="List">
<li id="li_1">HTML</li>
<li id="li_2">CSS</li>
<li id="li_3">SQL</li>
</ol>
<script type="text/javascript">
document.write ( document.getElementById(
"Pex" ).parentElement.id
);
document.write ( document.getElementById(
"li_1" ).parentElement.id
);
</script>
</body>
</html>
|
|
www.DevelopperStudio.ir
- HTML
- CSS
- SQL
|