رفتن به نوشته‌ها
دسترسی به HTML از طریق DOM

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

با سلامی گرم خدمت شما همراهان گرامی روکسو، در این جلسه از سری آموزشی جاوا اسکریپت پیشرفته می خواهیم در مورد کاربردی ترین مبحث تمام این دوره صحبت کنیم؛ دسترسی به 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 کلیک کنید. این بار نام و نام خانوادگی شما به نمایش در می آید!

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

منتشر شده در برنامه نویسیJavaScript (جاوا اسکریپت)