آموزش HTML DOM در JavaScript

آموزش HTML DOM در JavaScript

 

DOM یا همان document object model است که وقتی صفحه html شما قرار است لود شود چنین درختی تشکیل میشود.

آموزش HTML DOM در javascript
 

اول بیاید با تعریف آرایه شروع کنیم و در یک for تک تک مقادیر را چاپ کنید. a یک ارایه است که مقادیری در آن قرار دارد. a.length یعنی به اندازه طول ارایه که در اینجا طول ارایه ۵ است این حلقه for را ادامه بده.

 

var a=[55,48,91,32,70];
for (i = 0; i < a.length; i++) {
  console.log(i+ " : "+ a[i]);
}
html dom در javascript
 

حال مثال زیر را ببینید که تعدادی div داریم. میتوانید به واسط کلاس تعریف شده برای آنها تغییراتی را اعمال کنیم. این کلاس ها همچون ارایه در نظر بگیرید به این صورت که با عدد نام برده در [i] میتوانید nامین کلاس را انتخاب کنید. در مثال زیر میبینید که با انتخاب [۰] اولین کلاس انتخاب میشود. برای این کار از دستور getElementsByClassName() استفاده کنید.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="lesson.css">
</head>
<body>
  <div>
<div>
  <p class="test">آموزش رایگان جاوا اسکریپت</p>
</div>
<div>
  <p class="test">آموزش رایگان جاوا اسکریپت</p>
</div>
<div>
  <p class="test">آموزش رایگان جاوا اسکریپت</p>
</div>
<div>
  <p class="test">آموزش رایگان جاوا اسکریپت</p>
</div>
</div>
</body>
<script type="text/javascript" src="test.js"></script>
</html>

 

document.getElementsByClassName("test")[0].innerHTML = "fatemeh saberi";
html dom در javascript چیست
 

همچنین میتوانید کد را در یک حلقه استفاده کرده تا تمام کلاس ها تغییر کند.

 

for (var i = 0; document.getElementsByClassName("test").length > i; i++) {
  document.getElementsByClassName("test")[i].innerHTML = "fatemeh saberi";
}
html dom چیست
 

به جز کار با کلاس ها میتوانید از تگ ها استفاده کنید.

به مثال زیر دقت کنید.

 

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="lesson.css">
</head>
<body>
<ul>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
  <li>test4</li>
</ul>
</body>
<script type="text/javascript" src="test.js"></script>
</html>

HTML DOM
 
document.getElementsByTagName("LI")[1].innerHTML = "fatemeh saberi";

HTML DOM در طراحی وبسایت
 

و همچنین در یک حلقه for قرار دهیم که تمام تگ های li مقدار را به خود بگیرند.

 

for (var i = 0;document.getElementsByTagName("LI").length > i; i++) {
  document.getElementsByTagName("LI")[i].innerHTML = "fatemeh saberi";
}
استفاده از HTML DOM در طراحی وبسایت
 

برای دیدن آموزش های بیشتر جزوات JavaScript را دنبال کنید.

قسمت قبل آموزش (آموزش if، else و for در JavaScript)

قسمت بعد آموزش (آموزش Style DOM در JavaScript)

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *