پیدا کردن عناصر HTML از طریق DOM

19 فروردین 1398
Advanced-Javascript-Access-to-html

با سلامی گرم خدمت شما همراهان گرامی روکسو، در این جلسه از سری آموزشی جاوا اسکریپت پیشرفته می خواهیم در مورد کاربردی ترین مبحث تمام این دوره صحبت کنیم؛ دسترسی به DOM و تغییر دادن عناصر HTML و CSS با استفاده از جاوا اسکریپت. در واقع استفاده ی اصلی زبان جاوا اسکریپت (حداقل در زمینه ی وب) تغییر دادن عناصر HTML و استایل های آنان است و به خودی خود (در frontend) کار زیادی انجام نمی دهد؛ یعنی ما سعی می کنیم تا دستورات مختلف جاوا اسکریپت را یاد بگیریم تا بتوانیم بعدا از آن ها در تغییر شکل عناصر HTML استفاده کنیم.

البته زبان جاوا اسکریپت محدود به Frontend نیست و در موارد بسیار زیادی مانند backend نیز کاربرد دارد اما بحث این دوره ی ما از جنبه ی frontend آن است. (منظور از Frontend ظاهر و Backend پس زمینه یا مغز پردازنده سایت می باشد)

دسترسی به عناصر HTML

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

  • دسترسی به عناصر HTML از طریق id (مانند "id="first)
  • دسترسی به عناصر HTML از طریق خود تگ (مانند <p>)
  • دسترسی به عناصر HTML از طریق نام کلاس (مانند "class="first)
  • دسترسی به عناصر HTML از طریق سلکتور های CSS (مانند first.)
  • دسترسی به عناصر HTML از طریق مجموعه اشیاء HTML (مانند فرم ها)

بیایید تک تک این موارد را بررسی کنیم.

دسترسی از طریق id

آسان ترین راه دسترسی به تگ های HTML از طریق id است؛ برای این کار باید از دستور ()getElementById استفاده کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Id</h2>

<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>

<p id="demo"></p>

<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML = 
"The text from the intro paragraph is " + myElement.innerHTML;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر تگ HTML با دستورِ جاوا اسکریپت ما پیدا شود، به صورت یک شیء برگردانده خواهد شد اما اگر چیزی پیدا نکند مقدار null را برمیگرداند.

دسترسی از طریق خود تگ

یکی از راه های دیگر دسترسی به عناصر HTML از طریق نام خود تگ می باشد؛ برای این کار باید از دستور ()getElementsByTagName استفاده کنید. در مثال زیر میخواهیم تمام عناصر <p> را پیدا کنیم:

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Tag Name</h2>

<p>Hello World!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

<p id="demo"></p>

<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'The text in first paragraph (index 0) is: ' + x[0].innerHTML;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر دقت کنید در این مثال تمام تگ های p مانند یک آرایه / شیء به ما برگردانده شده اند و ما به همان صورت با آن ها برخورد می کنیم (استفاده از ایندکس 0).

می توان این مثال ها را پیشرفته تر کرد؛ کد زیر ابتدا عناصری را پیدا می کند که "id="main باشند و سپس از بین آنها، عناصری را که تگ های <p>  داشته و داخل main باشند، پیدا می کند:

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Tag Name</h2>

<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
</div>

<p id="demo"></p>

<script>
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

دسترسی از طریق کلاس

اگر می خواهید تمام عناصر HTML ای را پیدا کنید که در یک کلاس باشند باید از دستور ()getElementsByClassName استفاده کنید. به طور مثال، کد زیر تمام عناصری را پیدا می کند که "class="intro باشد:

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Class Name</h2>

<p>Hello World!</p>

<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>

<p id="demo"></p>

<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: این دستور در Internet Explorer 8 و نسخه های قبل تر از آن کار نمی کند.

دسترسی از طریق سلکتور های CSS

اگر می خواهید تمام عناصر HTML ای را پیدا کنید که با سلکتور CSS خاصی منطبق هستند می توانید از دستور ()querySelectorAll استفاده کنید. اگر به دوره ی صفر تا صد و رایگان CSS سر زده باشید می دانید که سلکتور های CSS مواردی مانند id و class و attribute ها و مقدار attribute ها و ... هستند.

در مثال زیر می خواهیم تمام <p> هایی را پیدا کنیم که در آن ها "class="intro باشد:

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Query Selector</h2>

<p>Hello World!</p>

<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>

<p id="demo"></p>

<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: این دستور نیز در Internet Explorer 8 و نسخه های قبل تر کار نمی کند.

دسترسی از طریق مجموعه اشیاء HTML

بهترین روش یادگیری این نوع از دسترسی از طریق مثال است. در مثال زیر می خواهیم از بین فرم های HTML، فرمی را پیدا کنیم که "id="frm1 باشد و مقادیر مختلف آن را نشان دهیم:

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.forms</h2>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>Click "Try it" to display the value of each element in the form.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  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;
}
</script>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر به خروجی کد بالا بروید و سپس روی دکمه ی try it کلیک کنید، می بینید که مقادیر مختلف فرم (First name و Last name و submit) برایتان به نمایش در می آید. حالا شما نام و نام خانوادگی خود را در فرم وارد کنید و دوباره روی دکمه ی try it کلیک کنید. این بار نام و نام خانوادگی شما به نمایش در می آید!

امیدوارم از این قسمت لذت برده باشید. تمرین کردن قسمت های مختلف این مقاله را از فراموش نکنید چرا که بحث اساسی این دوره محسوب می شوند.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری جاوا اسکریپت پیشرفته توصیه می‌کند:
نویسنده شوید

دیدگاه‌های شما (2 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر
05 اسفند 1398
عالی بود...

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

حسن فرجی
08 شهریور 1398
سلام توی مثال آخر کدِ خط 25 متوجه نمیشم ممنون میشم توضیح بدین

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
12 شهریور 1398
سلام دوست عزیز از خط 24 یک حلقه ی For تشکیل دادیم که به اندازه ی مقادیر موجود در فرم ما (frm1) گردش میکنه. خط 25 اپراتور =+ رو داره که یعنی با هر بار گردش درون فرم frm1 مقادیر رو میگیریم و درون متغیر text قرار میدیم. حرف i همون ایندکس حلقه هست که با هر دور گردش یک عدد بهش اضافه میشه بنابراین شروع میکنه از عنصر 0 و بعدش عنصر 1 و بعدش عنصر دو و ..... مقادیر رو میگیره (Value) و درون متغیر Text میزاره. اگر به جای =+ از = استفاده کنیم، هر مقدار، مقدار قبلی رو حذف میکنه و در نهایت آخرین مقدار توی متغیر باقی میمونه ولی ما میخوایم همه ی مقادیر داخلش بمونن بنابراین از =+ استفاده کردیم. اون هم برای اینه که هر بار یک مقدار رو گرفتیم بریم خط بعد و مقدار بعدی رو در یک خط جدید ایجاد کنیم.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

حسن فرجی
15 شهریور 1398
نقش elements اینجا چیه؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

امیر زوارمی
17 شهریور 1398
elements به ما اجازه ی دسترسی به المان ها (فیلد های) اون فرم رو میده... مثلا اگه بخوایم ببینیم توی یک فرم چند تا فیلد داریم میگیم: var x = document.getElementById("myForm").elements.length; حالا توی مثال آخر اومدیم و ایندکس i برای اون element خاص رو در نظر گرفتیم تا کدمون روی تک تک فیلد ها اجرا بشه.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.