خانه / مقالات اموزشی / اموزش جاوا اسكريپت / ﺍﺭﺗﺒﺎﻁ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﺑﺎ ﺍﭺ ﺗﯽ ﺍﻡ ﺍﻝ

ﺍﺭﺗﺒﺎﻁ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﺑﺎ ﺍﭺ ﺗﯽ ﺍﻡ ﺍﻝ

ﺩﺭﺱ ﺩﻭﺍﺯﺩﻫﻢ- ﺍﺭﺗﺒﺎﻁ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﺑﺎ ﺍﭺ ﺗﯽ ﺍﻡ ﺍﻝ

ﺁﻣﻮﺯﺵ ﺍﻳﻦ ﺩﻭﺭﻩ ﺗﺎ ﺑﻪ ﺍﻳﻨﺠﺎ ﻣﺮﺑﻮﻁ ﺑﻪ ﻣﻔﺎﻫﻴﻢ ﭘﺎﻳﻪ‌ﺍﯼ ﻭ ﺷﻴﻮﻩ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﯽ ﺩﺭ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﺑﻮﺩﻩ ﺍﺳﺖ. ﺩﺭ ﺍﻳﻦ ﺩﺭﺱ ﻣﯽ‌ﺧﻮﺍﻫﻴﻢ ﺑﻪ ﻳﮏ ﻗﺎﺑﻠﻴﺖ ﺩﻳﮕﺮ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﻳﻌﻨﯽ ﺍﺭﺗﺒﺎﻁ ﺁﻥ ﺑﺎ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ‌ ﺍﻡ ﺍﻝ ﺑﭙﺮﺩﺍﺯﻳﻢ.

ﺍﭺ ﺗﯽ‌ ﺍﻡ ﺍﻝ ﻭ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ (HTML DOM) Document Object Model
DOM ﺩﺭ ﺍﺻﻞ ﻳﮏ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺑﺮﺍﯼ ﺩﺳﺘﺮﺳﯽ ﺑﻪ ﺳﻨﺪﻫﺎﯼ ﺍﭺ ﺗﯽ ﺍﻡ ﺍﻝ ﺗﻌﺮﻳﻒ ﻣﯽ‌ﮐﻨﺪ ﻭ ﺁﻧﻬﺎ (ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ) ﺭﺍ ﺑﻪ ﻋﻨﻮﺍﻥ ﺁﺑﺠﮑﺖ ﺩﺭ ﻧﻈﺮ ﻣﯽ‌ﮔﻴﺮﺩ. ﻭﻗﺘﯽ ﻳﮏ ﺑﺮﮔﻪ ﺩﺭ ﻭﺏ ﺑﺎﻻ ﻣﯽ‌ﺁﻳﺪ ﻣﺮﻭﺭﮔﺮ ﻳﮏ ﺩﺭﺧﺖ ﺍﺯ ﺁﺑﺠﮑﺖﻫﺎﯼ ﻭﺍﻗﻊ ﺩﺭ ﺁﻥ (ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ‌ ﺍﻡ ﺍﻝ ﮐﻪ ﺑﻪ ﻋﻨﻮﺍﻥ ﺁﺑﺠﮑﺖ ﺩﺭ ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺷﺪﻩ‌ﺍﻧﺪ) ﺑﺎ ﻧﺎﻡ «ﺳﻨﺪ ﻣﺪﻝ ﺁﺑﺠﮑﺖ»‌ـﯼ ﻳﺎ DOM ﻣﯽ‌ﺳﺎﺯﺩ. ﺍﻳﻦ ﻣﺪﻝ ﺷﺒﻴﻪ ﺩﺭﺧﺘﯽ ﺍﺳﺖ ﮐﻪ ﺩﺭ ﺑﺎﻻﯼ ﺁﻥ ﺁﺑﺠﮑﺖﻫﺎﯼ ﺍﺻﻠﯽ ﺑﺮﮔﻪ ﻗﺮﺍﺭ ﺩﺍﺭﻧﺪ ﻭ ﺩﺭ ﺯﻳﺮ ﺁﻥ ﺩﻳﮕﺮ ﺁﺑﺠﮑﺖﻫﺎﻳﯽ ﮐﻪ ﺑﺮﮔﻪ ﺭﺍ ﻣﯽ‌ﺳﺎﺯﻧﺪ. DOM ﺩﺭ ﺍﭺ ﺗﯽ‌ ﺍﻡ ﺍﻝ ﻗﺎﺑﻞ ﺩﺳﺘﺮﺳﯽ ﺑﺎ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﻳﺎ ﺩﻳﮕﺮ ﺯﺑﺎﻥ‌ﻫﺎﯼ ﺑﺮﻧﺎﻣﻪ ﻧﻮﻳﺴﯽ ﺍﺳﺖ. ﺑﻮﺳﻴﻠﻪ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ DOM ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﻣﯽ‌ﺗﻮﺍﻧﺪ ﺑﻪ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺩﺳﺘﺮﺳﯽ ﭘﻴﺪﺍ ﮐﺮﺩﻩ ﻭ ﺣﺘﯽ ﺁﻧﻬﺎ ﺭﺍ ﺗﻐﻴﻴﺮ ﺩﻫﺪ.

ﺗﺼﻮﻳﺮ ﺑﺎﻻ ﻧﻤﺎﻳﺶ ﺩﻫﻨﺪﻩ ﺳﻨﺪ ﺁﺑﺠﮑﺘﯽ ﺳﺎﺧﺘﻪ ﺷﺪﻩ ﺑﺮﺍﯼ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ‌ ﺍﻡ ﺍﻝ ﺍﺳﺖ ﮐﻪ ﺍﺯ ﺗﺎﺭﻧﻤﺎﯼ w3schools ﻗﺮﺽ ﮔﺮﻓﺘﻪ ﺷﺪﻩ ﺍﺳﺖ.

ﻗﺎﺑﻠﻴﺖ‌ﻫﺎﯼ DOM ﺷﺎﻣﻞ ﻣﻮﺍﺭﺩ ﺯﻳﺮ ﻣﯽ‌ﺷﻮﻧﺪ:

۱- ﺗﻐﻴﻴﺮ ﻫﻤﻪ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﻭﺍﻗﻊ ﺩﺭ ﻳﮏ ﺻﻔﺤﻪ

۲- ﺗﻐﻴﻴﺮ ﻫﻤﻪ ﻭﻳﮋﮔﯽ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ

۳- ﺗﻐﻴﻴﺮ ﻫﻤﻪ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺷﻴﻮﻩ ﺩﻫﯽ (ﺳﯽ ﺍﺱ ﺍﺱ)

۴- ﭘﺎﮎ ﮐﺮﺩﻥ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﻭ ﻭﻳﮋﮔﯽ‌ﻫﺎﻳﺸﺎﻥ

۵- ﺍﺿﺎﻓﻪ ﮐﺮﺩﻥ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺗﺎﺯﻩ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ

۶- ﻭﺍﮐﻨﺶ ﻧﺸﺎﻥ ﺩﺍﺩﻥ ﺑﻪ ﺭﻭﻳﺪﺍﺩﻫﺎﯼ ﻣﺮﺑﻮﻁ ﺑﻪ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ

۷- ﺑﻮﺟﻮﺩ ﺁﻭﺭﺩﻥ ﺭﻭﻳﺪﺍﺩﻫﺎﯼ ﺗﺎﺯﻩ ﺑﺮﺍﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ‌ﻫﺎﯼ ﻭﺍﻗﻊ ﺩﺭ ﺻﻔﺤﻪ

«ﺳﻨﺪ ﺁﺑﺠﮑﺘﯽ» ﺷﺎﻣﻞ ﺩﻭ ﻓﺎﮐﺘﻮﺭ «ﻣﺘﺪ‌ﻫﺎ» ﻭ «ﻭﻳﮋﮔﯽ‌ﻫﺎ»ﯼ ﻣﺮﺑﻮﻁ ﺑﻪ ﻫﺮ ﺁﺑﺠﮑﺖ ﺍﺳﺖ. ﻣﺘﺪ‌ﻫﺎ ﻋﻤﻞ‌ﻫﺎﻳﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ﻣﺎ ﻣﯽ‌ﺗﻮﺍﻧﻴﻢ ﺑﺮ ﺭﻭﯼ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺍﻧﺠﺎﻡ ﺩﻫﻴﻢ ﻭ ﻭﻳﮋﮔﯽ، ﻣﻘﺪﺍﺭﻫﺎﻳﯽ ﺍﺯ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﻫﺴﺘﻨﺪ ﮐﻪ ﻣﺎ ﻣﯽ‌ﺗﻮﺍﻧﻴﻢ ﺍﺳﺘﻔﺎﺩﻩ ﮐﻨﻴﻢ ﻳﺎ ﺗﻐﻴﻴﺮ ﺩﻫﻴﻢ.

ﺑﻪ ﻧﻤﻮﻧﻪ ﺯﻳﺮ ﺗﻮﺟﻪ ﻓﺮﻣﺎﻳﻴﺪ:

<html>

<body>

<p id=”intro”> ﺩﺭﻭﺩ ﺟﻬﺎﻥ </p>

<script>

var txt=document.getElementById(“intro”).innerHTML;

document.write(txt);

</script>

</body>

</html>

ﺩﺭ ﮐﺪﻫﺎﯼ ﺑﺎﻻ ﺍﺑﺘﺪﺍ ﻳﮏ ﺑﺮﭼﺴﺐ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ (<p>) ﮐﻪ ﺩﺍﺭﺍﯼ ﻣﻘﺪﺍﺭ (ﺩﻭﺭﺩ ﺟﻬﺎﻥ) ﺍﺳﺖ ﺗﻌﺮﻳﻒ ﮐﺮﺩﻩ ﻭ ﺳﭙﺲ ﺗﻮﺳﻂ ﺟﺎﻭﺍ ﺍﺳﮑﺮﻳﭙﺖ ﻭ ﻗﺎﺑﻠﻴﺖ DOM ﺁﻥ ﻣﻘﺪﺍﺭ ﺭﺍ ﺩﺭﻭﻥ ﻣﺘﻐﻴﺮﯼ ﺭﻳﺨﺘﻪ‌ﺍﻳﻢ ﺩﺭ ﺁﺧﺮ ﻣﻘﺪﺍﺭ ﺭﺍ ﭼﺎﭖ ﻧﻤﻮﺩﻩ‌ﺍﻳﻢ.

document.getElementById(“intro”).innerHTML

ﺩﺭ ﺩﺳﺘﻮﺭ ﺑﺎﻻ getElementById ﻳﮏ ﻣﺘﺪ ﻭ innerHTML ﻭﻳﮋﮔﯽ ﺗﻌﺮﻳﻒ ﺷﺪﻩ ﺩﺭ DOM ﺍﺳﺖ. ﺍﻳﻦ ﺩﺳﺘﻮﺭ ﻣﻘﺪﺍﺭ ﺩﺭﻭﻥ ﺑﺮﭼﺴﺒﯽ ﺩﺍﺭﺍﯼ ﺷﻨﺎﺳﻪ (id) ﻭ ﻭﻳﮋﮔﯽ intro ﺭﺍ ﺑﺮ ﻣﯽ‌ﮔﺮﺩﺍﻧﺪ.

ﻣﺘﺪ getElementById ﻭ ﻭﻳﮋﮔﯽ innerHTML
ﺑﻬﺮﻩ ﺑﺮﺩﻥ ﺍﺯ ﻣﺘﺪ getElementById ﻭ ﻭﻳﮋﮔﯽ innerHTML ﻋﻤﻮﻣﯽ‌ﺗﺮﻳﻦ ﺭﺍﻩ ﺑﺮﺍﯼ ﺩﺳﺘﺮﺳﯽ ﻭ ﺩﺭﻳﺎﻓﺖ ﻣﻘﺪﺍﺭ ﻳﮏ ﺑﺮﭼﺴﺐ ﺍﺯ ﻃﺮﻳﻖ ﺷﻨﺎﺳﻪ (id) ﺁﻥ ﺑﺮﭼﺴﺐ ﺍﺳﺖ. ﺑﻪ ﺍﻳﻦ ﺗﺮﺗﻴﺐ ﺍﻳﻦ ﻣﺘﺪ ﻭ ﻭﻳﮋﮔﯽ ﺍﺯ ﺷﻨﺎﺳﻪ ﺑﺮﭼﺴﺐ ﺍﺳﺘﻔﺎﺩﻩ ﻣﯽ‌ﮐﻨﻨﺪ ﺗﺎ ﻣﻘﺪﺍﺭ ﺁﻥ ﺭﺍ ﺩﺭﻳﺎﻓﺖ ﮐﻨﻨﺪ، ﻫﻤﺎﻧﻄﻮﺭ ﮐﻪ ﺩﺭ ﻧﻤﻮﻧﻪ ﺑﺎﻻ ﺍﻳﻦ ﺍﺗﻔﺎﻕ ﺍﻓﺘﺎﺩﻩ ﺍﺳﺖ.

ﻣﺘﺪ getElementById ﻋﻤﻞ ﺷﻨﺎﺳﺎﻳﯽ ﺑﺮﭼﺴﺐ ﺭﺍ ﺍﺯ ﻃﺮﻳﻖ ﺷﻨﺎﺳﻪ ﺁﻥ ﺍﻧﺠﺎﻡ ﺩﺍﺩﻩ ﻭ ﻭﻳﮋﮔﯽ innerHTMLﻣﺤﺘﻮﺍﯼ ﺁﻥ ﺑﺮﭼﺴﺐ ﺭﺍ ﺩﺭﻳﺎﻓﺖ ﻣﯽ‌ﮐﻨﺪ.

ﻧﮑﺘﻪ: ﻭﻳﮋﮔﯽ innerHTML ﺳﺎﺩﻩ‌ﺗﺮﻳﻦ ﺭﺍﻩ ﺑﺮﺍﯼ ﺩﺭﻳﺎﻓﺖ ﻭ ﺟﺎﺑﺠﺎﻳﯽ ﻣﺤﺘﻮﺍﯼ ﻳﮏ ﺑﺮﭼﺴﺐ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺍﺳﺖ. ﺍﻳﻦ ﺑﺮﭼﺴﺐ‌ﻫﺎ ﺣﺘﯽ ﻣﯽ‌ﺗﻮﺍﻧﻨﺪ ﺑﺮﭼﺴﺐ‌ﻫﺎﻳﯽ ﻣﺎﻧﻨﺪ html ﻳﺎ body ﮐﻪ ﺍﺯ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﺻﻠﯽ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﻫﺴﺘﻨﺪ، ﺑﺎﺷﻨﺪ.

ﻣﻌﺮﻓﯽ ﺻﻔﺤﻪ ﻭﺏ ﺗﻮﺳﻂ HTML DOM ﻭ ﺁﺑﺠﮑﺖ document
ﺩﺭ ﺑﺨﺶ ﭘﻴﺸﻴﻦ ﮔﻔﺘﻴﻢ ﮐﻪ ﺑﺎ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ HTML DOM ﺻﻔﺤﻪ ﻭﺏ ﺷﻤﺎ ﺗﺒﺪﻳﻞ ﺑﻪ ﻳﮏ ﻣﺪﻝ ﺳﻨﺪ ﺁﺑﺠﮑﺖ ﻣﯽ‌ﺷﻮﺩ. ﻳﻌﻨﯽ، ﺍﻳﻦ ﻣﺪﻝ ﺳﻨﺪ ﺁﺑﺠﮑﺘﯽ ﺍﺳﺖ ﮐﻪ ﺻﻔﺤﻪ ﻭﺏ ﺷﻤﺎ ﺭﺍ ﻣﻌﺮﻓﯽ ﻣﯽ‌ﮐﻨﺪ ﻭ ﺗﻤﺎﻡ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺍﺯ ﻃﺮﻳﻖ ﺍﻳﻦ ﺍﺳﺘﺎﻧﺪﺍﺭﺩ ﺑﻪ ﺻﻮﺭﺕ ﻳﮏ ﺁﺑﺠﮑﺖ ﺩﺍﺧﻞ ﺳﻨﺪ ﭘﻨﺪﺍﺷﺘﻪ ﻣﯽ‌ﺷﻮﻧﺪ. ﺍﻳﻦ ﭘﻨﺪﺍﺷﺖ ﺑﺎﻋﺚ ﻣﯽ‌ﺷﻮﺩ ﮐﻪ ﺷﻨﺎﺳﺎﻳﯽ، ﺩﺳﺘﺮﺳﯽ، ﺗﻐﻴﻴﺮ ﻭ ﺟﺎﺑﺠﺎﻳﯽ ﺑﺮﭼﺴﺐ‌ﻫﺎ ﺍﻣﮑﺎﻥ ﭘﺬﻳﺮ ﮔﺮﺩﺩ. ﺑﻪ ﺗﻌﺮﻳﻒ ﺩﻳﮕﺮ ﺗﻤﺎﻡ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺩﺭ ﺍﺧﺘﻴﺎﺭ ﺳﻨﺪ ﺁﺑﺠﮑﺘﯽ ﻗﺮﺍﺭ ﻣﯽ‌ﮔﻴﺮﻧﺪ. ﺣﺎﻝ ﺑﺮﺍﯼ ﺩﺳﺘﺮﺳﯽ ﺑﻪ ﻫﻤﻪٔ ﺁﺑﺠﮑﺖﻫﺎﯼ ﺍﻳﻦ ﺳﻨﺪ ﺍﺯ ﺁﺑﺠﮑﺖ document ﺍﺳﺘﻔﺎﺩﻩ ﻣﯽ‌ﺷﻮﺩ، ﺑﻪ ﺍﻳﻦ ﺗﺮﺗﻴﺐ ﮐﻪ ﺑﺮﺍﯼ ﺩﺳﺘﺮﺳﯽ ﺑﻪ ﻫﺮ ﺁﺑﺠﮑﺖ ﺍﺑﺘﺪﺍ ﺑﺎ ﺑﮑﺎﺭ ﺑﺮﺩﻥ ﮐﻠﻤﻪ «document» ﺑﻪ ﺁﻥ ﺩﺳﺘﺮﺳﯽ ﭘﻴﺪﺍ ﮐﺮﺩﻩ ﻭ ﺑﻌﺪ ﻋﻤﻠﻴﺎﺕ ﻻﺯﻡ ﺭﺍ ﺩﺭ ﺭﻭﯼ ﺁﻥ ﺍﻧﺠﺎﻡ ﻣﯽ‌ﺩﻫﻴﻢ. ﺩﺭ ﺯﻳﺮ ﻓﻬﺮﺳﺘﯽ ﺍﺯ ﻣﺘﺪ‌ﻫﺎ ﻭ ﻭﻳﮋﮔﯽ‌ﻫﺎﻳﯽ ﮐﻪ ﺗﻮﺳﻂ ﺁﻧﻬﺎ ﺑﻪ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺩﺳﺘﺮﺳﯽ ﭘﻴﺪﺍ ﻣﯽ‌ﮐﻨﻴﻢ ﺁﻣﺪﻩ ﺍﺳﺖ.

ﭘﻴﺪﺍ ﮐﺮﺩﻥ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ

document.getElementById()

document.getElementsByTagName()

document.getElementsByClassName()

document.forms[]

ﺟﺎﺑﺠﺎﻳﯽ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ

document.write(text)

document.getElementById(id).innerHTML=

document.getElementById(id).attribute=

document.getElementById(id).style.attribute=

ﺍﺿﺎﻓﻪ ﮐﺮﺩﻥ ﻭ ﭘﺎﮎ ﮐﺮﺩﻥ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ

document.createElement()

document.removeChild()

document.appendChild()

document.replaceChild()

ﺍﻓﺰﻭﺩﻥ ﻫﺪﺍﻳﺖ ﮐﻨﻨﺪﻩ ﺭﻭﻳﺪﺍﺩ‌ﻫﺎ

document.getElementById(id).onclick=function(){code}

ﻫﻤﺎﻧﻄﻮﺭ ﮐﻪ ﻣﯽ‌ﺑﻴﻨﻴﺪ ﺩﺭ ﺍﺑﺘﺪﺍﯼ ﻫﺮ ﺩﺳﺘﻮﺭ ﺍﺯ document ﺍﺳﺘﻔﺎﺩﻩ ﺷﺪﻩ ﺍﺳﺖ. ﺩﺭ ﺍﺩﺍﻣﻪ ﺑﻪ ﺷﺮﺡ ﻣﺘﺪ‌ﻫﺎ ﻭ ﻭﻳﮋﮔﯽ‌ﻫﺎﯼ ﻳﺎﺩ ﺷﺪﻩ ﻣﯽ‌ﭘﺮﺩﺍﺯﻳﻢ.

ﻳﺎﻓﺘﻦ ﻭ ﺗﻐﻴﻴﺮ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ
ﺑﺮﺍﯼ ﺍﻳﺠﺎﺩ ﺗﻐﻴﻴﺮ ﺩﺭ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺍﺑﺘﺪﺍ ﺑﺎﻳﺪ ﺁﻥ ﺑﺮﭼﺴﺐ ﺭﺍ ﭘﻴﺪﺍ ﮐﻨﻴﻢ. ﺑﺮﺍﯼ ﺍﻳﻦ ﻣﻨﻈﻮﺭ ﻣﯽ‌ﺗﻮﺍﻧﻴﻢ ﺍﺯ ﺭﺍﻩ‌ﻫﺎﯼ ﻣﺘﻔﺎﻭﺕ ﺯﻳﺮ ﻋﻤﻞ ﮐﻨﻴﻢ:

۱- ﻳﺎﻓﺘﻦ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺗﻮﺳﻂ ﺷﻨﺎﺳﻪ ﺑﺮﭼﺴﺐ (id)

۲- ﻳﺎﻓﺘﻦ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺗﻮﺳﻂ ﻧﺎﻡ ﺑﺮﭼﺴﺐ

۳- ﻳﺎﻓﺘﻦ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺗﻮﺳﻂ ﻧﺎﻡ ﮐﻼﺱ

۴- ﻳﺎﻓﺘﻦ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺗﻮﺳﻂ ﻣﺠﻤﻮﻋﻪ ﺁﺑﺠﮑﺖﻫﺎ

ﻳﺎﻓﺘﻦ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺗﻮﺳﻂ ﺷﻨﺎﺳﻪ ﺑﺮﭼﺴﺐ (id)
ﭘﻴﺶ ﺍﺯ ﺍﻳﻦ ﮔﻔﺘﻴﻢ ﮐﻪ ﺳﺎﺩﻩ‌ﺗﺮﻳﻦ ﺭﺍﻩ ﻳﺎﻓﺘﻦ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺍﺳﺘﻔﺎﺩﻩ ﺍﺯ ﺷﻨﺎﺳﻪ ﺑﺮﭼﺴﺐ ﺍﺳﺖ. ﻣﺎﻧﻨﺪ:

<p id=”intro”> ﺩﺭﻭﺩ ﺟﻬﺎﻥ </p>

var x=document.getElementById(“intro”);

ﺍﻳﻦ ﻧﻤﻮﻧﻪ ﮐﺪ ﻣﺤﺘﻮﺍﯼ ﺩﺍﺧﻞ ﺑﺮﭼﺴﺐ «p» ﺭﺍ ﺑﺎ ﺷﻨﺎﺳﻪ «id» ﻭ ﻭﻳﮋﮔﯽ «intro» (id=intro) ﺑﺎﺯ ﻣﯽ‌ﮔﺮﺩﺍﻧﺪ. ﺩﺭ ﺍﻳﻦ ﺣﺎﻟﺖ ﺍﮔﺮ ﺑﺮﭼﺴﺐ ﭘﻴﺪﺍ ﺷﻮﺩ ﻣﺘﺪ ﻣﻮﺭﺩ ﺍﺳﺘﻔﺎﺩﻩ ﺑﺮﭼﺴﺐ ﺭﺍ ﺑﻪ ﺷﮑﻞ ﻳﮏ ﺁﺑﺠﮑﺖ ﺩﺭ x ﺑﺎﺯ ﻣﯽ‌ﮔﺮﺩﺍﻧﺪ ﻭ ﺍﮔﺮ ﺑﺮﭼﺴﺐ ﻳﺎﻓﺖ ﻧﺸﻮﺩ ﻣﻘﺪﺍﺭ x ﻫﻴﭻ (null) ﻣﯽ‌ﺷﻮﺩ. ﻧﻤﻮﻧﻪ ﮐﺪﻫﺎﯼ ﺯﻳﺮ ﺍﻳﻦ ﻋﻤﻞ ﺭﺍ ﺑﻪ ﻭﺿﻮﺡ ﻧﺸﺎﻥ ﻣﯽ‌ﺩﻫﻨﺪ.

<!DOCTYPE html>

<html> <body>

<p id=”intro”> ﺩﺭﻭﺩ ﺟﻬﺎﻥ </p>

<script>

x=document.getElementById(“intro”);

document.write( x.innerHTML);

</script> </body> </html>

ﻧﮑﺘﻪ: ﺣﺘﻤﺎ ﻣﺘﻮﺟﻪ ﺷﺪﻩ‌ﺍﻳﺪ ﮐﻪ ﺩﺭ ﺍﻳﻦ ﻧﻤﻮﻧﻪ ﻭﻳﮋﮔﯽ inerHTML ﺁﺑﺠﮑﺖ document ﺭﺍ ﺟﺪﺍ ﻭ ﺩﺭ ﺧﻂ ﺩﺳﺘﻮﺭ ﺩﻳﮕﺮﯼ ﻧﻮﺷﺘﻪ‌ﺍﻳﻢ ﺩﺭ ﺻﻮﺭﺗﯽ ﮐﻪ ﺩﺭ ﻧﻤﻮﻧﻪ ﭘﻴﺸﻴﻦ ﻭﻳﮋﮔﯽ ﺭﺍ ﺑﻌﺪ ﺍﺯ ﻣﺘﺪ ﻭ ﭼﺴﺒﺎﻧﺪﻩ ﺑﻪ ﺁﻥ ﺁﻭﺭﺩﻳﻢ. ﺍﻳﻦ ﺷﻴﻮﻩ، ﺭﺍﻩ ﺩﻳﮕﺮﯼ ﺑﺮﺍﯼ ﺩﺳﺘﺮﺳﯽ ﺑﻪ ﻣﺤﺘﻮﺍﯼ ﻳﮏ ﻭﻳﮋﮔﯽ ﺍﺳﺖ.

ﻳﺎﻓﺘﻦ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺗﻮﺳﻂ ﻧﺎﻡ ﺑﺮﭼﺴﺐ
ﺍﻳﻦ ﺣﺎﻟﺖ ﻳﺎﻓﺘﻦ ﺑﺮﭼﺴﺐ ﺭﺍ ﺑﺎ ﺍﺷﺎﺭﻩ ﺑﻪ ﻧﺎﻡ ﺁﻥ ﺍﻧﺠﺎﻡ ﻣﯽ‌ﺩﻫﺪ:

var y=x.getElementsByTagName(“p”);

ﺩﺳﺘﻮﺭ ﺑﺎﻻ ﺑﺮﭼﺴﺐ ﺭﺍ ﺑﺮ ﺍﺳﺎﺱ ﻧﺎﻡ ﺁﻥ (p) ﭘﻴﺪﺍ ﻣﯽ‌ﮐﻨﺪ.

<!DOCTYPE html>

<html> <body>

<p> ﺩﺭﻭﺩ ﺟﻬﺎﻥ </p>

<div id=”main”>

<p> DOM ﮐﺎﺭ ﺑﺎ </p>

</div>

<script>

var x=document.getElementById(“main”);

var y=x.getElementsByTagName(“p”);

document.write( y[0].innerHTML);

</script>

</body>

</html>

ﺍﻳﻦ ﻧﻤﻮﻧﻪ ﺍﺑﺘﺪﺍ ﺑﺮﭼﺴﺐ ﺭﺍ ﺑﺮ ﺍﺳﺎﺱ ﺷﻨﺎﺳﻪ (main) ﭘﻴﺪﺍ ﮐﺮﺩﻩ ﻭ ﺳﭙﺲ ﺗﻤﺎﻡ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ «p» ﺩﺭﻭﻥ ﺁﻥ ﺭﺍ ﻣﯽ‌ﻳﺎﺑﺪ ﻭ ﺩﺭ ﺩﺍﺧﻞ ﺁﺭﺍﻳﻪ «y» ﻗﺮﺍﺭ ﻣﯽ‌ﺩﻫﺪ y[0] ﻧﺨﺴﺘﻴﻦ ﻣﻘﺪﺍﺭ ﺁﺭﺍﻳﻪ ﺭﺍ ﺍﺷﺎﺭﻩ ﻣﯽ‌ﮐﻨﺪ.

ﻳﺎﻓﺘﻦ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺗﻮﺳﻂ ﻧﺎﻡ ﮐﻼﺱ
ﻣﺘﺪ getElementsByClassName ﺗﻤﺎﻡ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺑﺎ ﮐﻼﺱ ﻳﮑﺴﺎﻥ ﺭﺍ ﭘﻴﺪﺍ ﻣﯽ‌ﮐﻨﺪ.

document.getElementsByClassName(“intro”);

ﻳﺎﻓﺘﻦ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺗﻮﺳﻂ ﻣﺠﻤﻮﻋﻪ ﺁﺑﺠﮑﺖ‌ﻫﺎ
ﻣﻨﻈﻮﺭ ﺍﺯ ﻣﺠﻤﻮﻋﻪ ﺁﺑﺠﮑﺖﻫﺎ، ﺁﺑﺠﮑﺖﻫﺎﻳﺴﺖ ﮐﻪ ﻣﺮﺑﻮﻁ ﺑﻪ ﻳﮏ ﺩﺳﺘﻪ ﻳﺎ ﮔﺮﻭﻩ ﻣﯽ‌ﺑﺎﺷﻨﺪ. ﺑﻄﻮﺭ ﻧﻤﻮﻧﻪ ﻣﺠﻤﻮﻋﻪ ﺁﺑﺠﮑﺖﻫﺎﯼ ﺳﺎﺯﻧﺪﻩ ﻓﺮﻡ (form) ﻫﻤﻪ ﺩﺭ ﺯﻳﺮ ﻣﺠﻤﻮﻋﻪ ﻣﺠﻤﻮﻋﻪ ﺁﺑﺠﮑﺖ «ﻓﺮﻡ» ﻗﺮﺍﺭ ﻣﯽ‌ﮔﻴﺮﻧﺪ.

<!DOCTYPE html>

<html> <body>

<form id=”frm1″ >

ﻧﺎﻡ: <input type=”text” name=”fname” value=”ﭘﻴﻤﺎﻥ”><br/ >

ﻧﺎﻡ ﺧﺎﻧﻮﺍﺩﮔﯽ: <input type=”text” name=”lname” value=”ﺷﻬﺮﻭﺯ”><br/ >

<input type=”submit” value=”ﺑﻔﺮﺳﺖ”>

</form>

<p id=”demo”></p>

<button onclick=”myFunction()”> ﺍﻣﺘﺤﺎﻥ ﮐﻨﻴﺪ </button>

<script>

function myFunction() {

var x = document.getElementById(“frm1”);

var txt = “”;

for (var i = 0 ; i < x.length ; i++) {

txt = txt + x.elements[i].value + “<br/ >”;

}

document.getElementById(“demo”).innerHTML = txt ;

}

</script> </body> </html>

ﻧﻤﻮﻧﻪ ﺑﺎﻻ ﺍﺑﺘﺪﺍ ﻳﮏ ﻓﺮﻡ ﺭﺍ ﺗﻮﺳﻂ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﻣﯽ‌ﺳﺎﺯﺩ. ﺳﭙﺲ ﺗﻮﺳﻂ ﻳﮏ ﺗﺎﺑﻊ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﻓﺮﻡ ﺭﺍ ﺑﺎ ﺷﻨﺎﺳﻪ «frm1» ﺷﻨﺎﺳﺎﻳﯽ ﻭ ﺗﻤﺎﻡ ﻣﻘﺎﺩﻳﺮ -ﺣﺘﯽ ﻧﺎﻡ ﺑﺮﭼﺴﺐ ﺑﻔﺮﺳﺖ- ﺭﺍ ﭼﺎﭖ ﻣﯽ‌ﮐﻨﺪ. ﻫﺪﻑ ﺍﺯ ﺍﻳﻦ ﻧﻤﻮﻧﻪ ﭼﮕﻮﻧﮕﯽ ﺷﻨﺎﺳﺎﻳﯽ ﻭ ﭼﺎﭖ ﺗﻤﺎﻡ ﺑﺮﭼﺴﺐ‌ﻫﺎ ﺑﻮﺩﻩ ﺍﺳﺖ، ﺑﺪﻳﻬﯽ ﺳﺖ ﮐﻪ ﺩﺭ ﻳﮏ ﻓﺮﻡ ﻧﺒﺎﻳﺪ ﻧﺎﻡ ﺑﺮﭼﺴﺐ ﺍﺭﺳﺎﻝ (ﺑﻔﺮﺳﺖ) ﭼﺎﭖ ﺷﻮﺩ.

ﻣﻨﺒﻊ: ﻧﻤﻮﻧﻪ ﮐﺪﻫﺎ

ﻧﮑﺘﻪ: ﺑﺮﺍﯼ ﺩﺭﮎ ﺑﻴﺸﺘﺮ ﻋﻤﻠﮑﺮﺩ «ﻳﺎﻓﺘﻦ ﺑﺮﭼﺴﺐ‌ﻫﺎﯼ ﺍﭺ ﺗﯽ ‌ﺍﻡ ﺍﻝ ﺗﻮﺳﻂ ﻣﺠﻤﻮﻋﻪ ﺁﺑﺠﮑﺖﻫﺎ» ﻣﯽ‌ﺑﺎﻳﺪ ﺍﺯ ﻧﻤﻮﻧﻪ ﺑﺎﻻ ﺑﻬﺮﻩ ﺑﺮﺩﻩ ﻭ ﺧﻮﺩ ﺷﻤﺎ ﻓﺮﻡ ﺩﻟﺨﻮﺍﻩ ﺧﻮﺩ ﺭﺍ ﺳﺎﺧﺘﻪ ﻭ ﺧﺮﻭﺟﯽ ﺁﻥ ﺭﺍ ﻣﺸﺎﻫﺪﻩ ﻓﺮﻣﺎﻳﻴﺪ. ﻫﻤﻴﺸﻪ ﺑﻬﺘﺮﻳﻦ ﺭﺍﻩ ﻳﺎﺩﮔﻴﺮﯼ ﺗﻐﻴﻴﺮ ﻭ ﻭﻳﺮﺍﻳﺶ ﮐﺪ‌ﻫﺎ ﻭ ﺳﺎﺧﺖ ﮐﺪﻫﺎﯼ ﺗﺎﺯﻩ ﺍﺳﺖ.

منبع:درسنامه

اموزش طراحی سایت

آموزش طراحی سایت

اموزش طراحی وب سایت

آموزش طراحی سایت

درباره آموزشگاه نوین آی تی

همچنین ببینید

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net