سلام دوستان!
شاید اسم DOM رو شنیده باشید، به خصوص اگه کمی با طراحی وب آشنایی داشته باشید. DOM مخفف Document Object Model هست. اما DOM دقیقا چیه و چرا انقدر مهمه؟ فرض کنید یک صفحه وب مثل یک خونه بزرگ هست. DOM، نقشه این خونه هست که به شما اجازه میده هر چیزی رو داخلش پیدا کنید، تغییر بدید و حتی چیزهای جدید اضافه کنید. در واقع DOM یک مدل درختی از تمام عناصر یک صفحه وب هست.
به زبون ساده‌تر، وقتی مرورگر (مثل کروم یا فایرفاکس) یک صفحه وب رو میخونه، اون رو تبدیل به یک ساختار درختی میکنه که بهش DOM میگن. این ساختار به جاوااسکریپت (Javascript) اجازه میده که با عناصر صفحه وب تعامل داشته باشه. جاوااسکریپت میتونه متن ها رو تغییر بده، عکس ها رو جابجا کنه، استایل ها رو عوض کنه و خیلی کارهای دیگه انجام بده. بدون DOM، جاوااسکریپت نمیتونست صفحه وب رو کنترل کنه.
همونطور که گفتم، DOM مثل یک درخت میمونه. ریشه این درخت، سند HTML هست (همون کد اصلی صفحه وب). بعد، هر تگ HTML (مثل <body>, <p>, <h1>) تبدیل به یک "گره" (Node) در این درخت میشه. این گره ها با هم ارتباط دارند و یک ساختار سلسله مراتبی رو تشکیل میدن.
بیایید یک مثال ساده بزنیم:
<!DOCTYPE html> <html> <head> <title>مثال DOM</title> </head> <body> <h1>سلام دنیا!</h1> <p>این یک پاراگراف ساده است.</p> </body> </html>
در این مثال، درخت DOM این شکلی میشه (به صورت تقریبی):
همونطور که میبینید، <html> ریشه درخت هست و بقیه عناصر زیر مجموعه اون قرار دارند.
DOM برای توسعه دهندگان وب خیلی مهمه، چون:
فرض کنید میخوایم متن یک پاراگراف رو با استفاده از جاوااسکریپت تغییر بدیم:
<!DOCTYPE html>
<html>
<head>
<title>تغییر متن با DOM</title>
</head>
<body>
<p id="myParagraph">این متن اولیه پاراگراف است.</p>
<button onclick="changeText()">تغییر متن</button>
<script>
function changeText() {
document.getElementById("myParagraph").innerHTML = "متن جدید!";
}
</script>
</body>
</html>
در این مثال، ما یک دکمه داریم که وقتی روش کلیک میکنیم، تابع changeText() اجرا میشه. این تابع با استفاده از document.getElementById("myParagraph") پاراگراف با آی‌دی "myParagraph" رو پیدا میکنه و بعد با استفاده از innerHTML متنش رو به "متن جدید!" تغییر میده.
برای دسترسی به عناصر DOM، روش‌های مختلفی وجود داره. چند تا از مهم‌ترین‌هاش رو اینجا معرفی می‌کنم:
| روش | توضیحات | مثال |
|---|---|---|
getElementById() |
عنصری رو با استفاده از آی‌دی (ID) اون پیدا میکنه. | document.getElementById("myElement") |
getElementsByClassName() |
همه عناصری رو که یک کلاس خاص دارند، پیدا میکنه. | document.getElementsByClassName("myClass") |
getElementsByTagName() |
همه عناصری رو که یک تگ خاص دارند، پیدا میکنه. | document.getElementsByTagName("p") |
querySelector() |
اولین عنصری رو که با یک انتخابگر CSS خاص مطابقت داره، پیدا میکنه. | document.querySelector(".myClass") |
querySelectorAll() |
همه عناصری رو که با یک انتخابگر CSS خاص مطابقت دارند، پیدا میکنه. | document.querySelectorAll("p") |
هر کدوم از این روش ها توی شرایط مختلف میتونن کاربردی باشن. انتخاب روش مناسب بستگی به نیاز شما داره.
DOM یک مفهوم کلیدی در طراحی وب هست. با درک DOM، میتونید صفحات وب پویا و تعاملی ایجاد کنید. امیدوارم این مقاله بهتون کمک کرده باشه تا DOM رو بهتر بشناسید. اگه سوالی دارین حطمن بپرسید!
موفق باشید!
getElementById(), getElementsByClassName(), getElementsByTagName() و غیره استفاده کنید.وقتی به DOM به عنوان مخفف Document Object Model اشاره می کنیم، منظور این است که DOM با گرفتن حروف اولیه هر کلمه مهم در Document Object Model تشکیل می شود. این فرآیند عبارت اصلی را به شکلی کوتاه تر و قابل مدیریت تر فشرده می کند و در عین حال معنای اصلی خود را حفظ می کند. بر اساس این تعریف، DOM مخفف Document Object Model است.
امتیاز شما به این مطلب
امتیاز: 5 از 5 (مجموع 1 رای)
اولین نفری باشید که در مورد این مقاله نظر می دهید!
techfeed.ir© 2024 All rights reserved