آموزش HTML DOM در JavaScript
DOM یا همان document object model است که وقتی صفحه html شما قرار است لود شود چنین درختی تشکیل میشود.
![آموزش HTML DOM در javascript](https://farkiantech.com//wp-content/uploads/2021/10/js_4_1.jpg)
اول بیاید با تعریف آرایه شروع کنیم و در یک 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](https://farkiantech.com//wp-content/uploads/2021/10/js_4_2-768x383-1.png)
حال مثال زیر را ببینید که تعدادی 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 چیست](https://farkiantech.com//wp-content/uploads/2021/10/js_4_3-768x391-1.png)
همچنین میتوانید کد را در یک حلقه استفاده کرده تا تمام کلاس ها تغییر کند.
for (var i = 0; document.getElementsByClassName("test").length > i; i++) { document.getElementsByClassName("test")[i].innerHTML = "fatemeh saberi"; }
![html dom چیست](https://farkiantech.com//wp-content/uploads/2021/10/js_4_4-768x406-1.png)
به جز کار با کلاس ها میتوانید از تگ ها استفاده کنید.
به مثال زیر دقت کنید.
<!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](https://farkiantech.com//wp-content/uploads/2021/10/js_4_5-768x210-1.png)
document.getElementsByTagName("LI")[1].innerHTML = "fatemeh saberi";
![HTML DOM در طراحی وبسایت](https://farkiantech.com//wp-content/uploads/2021/10/js_4_6-768x228-1.png)
و همچنین در یک حلقه for قرار دهیم که تمام تگ های li مقدار را به خود بگیرند.
for (var i = 0;document.getElementsByTagName("LI").length > i; i++) { document.getElementsByTagName("LI")[i].innerHTML = "fatemeh saberi"; }
![استفاده از HTML DOM در طراحی وبسایت](https://farkiantech.com//wp-content/uploads/2021/10/js_4_7-768x237-1.png)
برای دیدن آموزش های بیشتر جزوات JavaScript را دنبال کنید.