جسٹاگرافک ایچ تی ایم ڈی او ایم عناصر

اس فصلی میں آپ کو بتایا جائے گا کہ کیسے آپ HTML پیج میں HTML عناصر کو تلاش اور دستیاب کرسکتے ہیں。

HTML عناصر تلاش کرنا

معمولاً، جاوا اسکریپٹ کے ذریعے آپ کو HTML عناصر پر عمل کرنا ہوگا。

اس مقصد کے لئے آپ کو ابتدا میں ان عناصر کو تلاش کرنا ہوگا۔ چندین طریقے آپ کے سامنے ہیں تاکہ آپ اس کارروائی کو انجام دینے کا کام کریں:

  • id کے ذریعے HTML عنصر تلاش کرنا
  • تگ کے نام کے ذریعے HTML عناصر تلاش کرنا
  • CSS انتخاب کے ذریعے HTML عناصر تلاش کرنا
  • CSS انتخاب کے ذریعے HTML عناصر تلاش کرنا
  • HTML آوبجیکٹ کی فہرست کے ذریعے HTML عنصر تلاش کرنا

id کے ذریعے HTML عنصر تلاش کرنا

DOM میں HTML عنصر تلاش کرنے کا سب سے آسان طریقہ یہ ہے، یعنی عناصر کا id استعمال کرنا

اس مثال میں id="intro" کا عنصر تلاش کیا گیا ہے:

مثال

var myElement = document.getElementById("intro");

آپ خودکے طور پر کوشش کریں

اگر عنصر ملا تو اس طریقے سے عناصر کا اوبجیکٹ واپس کیا جائے گا (myElement میں)

اگر عنصر نہیں ملا تو myElement میں null.

تگ کے نام کے ذریعے HTML عناصر تلاش کرنا

اس مثال میں تمام <p> عنصر:

مثال

var x = document.getElementsByTagName("p");

آپ خودکے طور پر کوشش کریں

اس مثال میں id="main" کا عنصر تلاش کیا گیا ہے، بعد میں "main" میں تمام <p> عنصر:

مثال

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

آپ خودکے طور پر کوشش کریں

CSS انتخاب کے ذریعے HTML عناصر تلاش کرنا

اگر آپ نکلی کسی کی کلاس کا تمام HTML عناصر تلاش کرنا چاہتے ہیں تو استعمال کریں getElementsByClassName().

اس مثال میں class="intro" کا تمام عناصر کی فہرست واپس کی گئی ہے:

مثال

var x = document.getElementsByClassName("intro");

آپ خودکے طور پر کوشش کریں

یہ انٹرنیٹ ایکسپلورر 8 اور اس سے پچھلے ورژنوں کے لئے قابل استعمال نہیں ہے。

CSS انتخاب کے ذریعے HTML عناصر تلاش کرنا

اگر آپ نکلی CSS انتخاب کے مطابق تمام HTML عناصر تلاش کرنا چاہتے ہیں تو استعمال کریں querySelectorAll() مетод

اس مثال میں class="intro" کا تمام عناصر واپس کیا گیا ہے <p> عناصر کی فہرست:

مثال

var x = document.querySelectorAll("p.intro");

آپ خودکے طور پر کوشش کریں

querySelectorAll() یہ انٹرنیٹ ایکسپلورر 8 اور اس سے پچھلے ورژنوں کے لئے قابل استعمال نہیں ہے。

اس طریقے سے HTML آئی پی جلد کو انتخاب کریں

اس مثال میں، id="frm1" کا فرم عنصر، فرم مجموعے میں، اور تمام عنصر کی قیمتیں دکھائی جاتی ہیں:

مثال

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

آپ خودکے طور پر کوشش کریں

آئی پی جلد، (اور آئی پی مجموعے) بھی دستیاب ہیں: