DOM عناصر (DOM Elements)
اینجا «عناصر DOM» را پیدا می کنیم و به آن ها دسترسی می زنیم. «عنصر (Element)» همان تگ های صفحه است. اول باید عنصرها را بیابیم، بعد تغییرشان دهیم. تمرکز ما روی روش های جستجوی عناصر DOM است.
پیدا کردن عناصر: راه های اصلی
می توانی با id، با tag، با class، با CSS selector و حتی با مجموعه های شیء عنصرها را بیابی.
با شناسه (id)
ساده ترین روش همین است. اگر id را بدانی، مستقیم همان عنصر را می گیری.
const element = document.getElementById("intro");
نکته: اگر پیدا نشود، نتیجه null است. پس حتماً بررسی کن.
با نام تگ (Tag Name)
اینجا یک HTMLCollection می گیری. شبیه آرایه است اما آرایه کامل نیست.
const elements = document.getElementsByTagName("p");
می توانی ابتدا یک والد را بگیری، بعد فقط داخل همان والد جستجو کنی.
const main = document.getElementById("main");
const ps = main.getElementsByTagName("p");
با نام کلاس (Class Name)
اگر چند عنصر یک کلاس دارند، همه شان را یکجا می گیری.
const items = document.getElementsByClassName("intro");
با سلکتورهای CSS
querySelectorAll مطابق یک الگوی CSS برمی گرداند. خروجی آن NodeList است.
const list = document.querySelectorAll("p.intro");
با مجموعه های شیء سند
مثلاً فرم ها در document.forms جمع شده اند. می توانی روی ورودی ها حلقه بزنی.
const form = document.forms["frm1"];
let text = "";
for (let i = 0; i < form.length; i++) {
text += form.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
چند مجموعه پرکاربرد
گام های عملی
- هدف را مشخص کن: کدام عناصر لازم است؟
- یکی از روش های جستجو را انتخاب کن.
- نتیجه را بررسی کن و سپس تغییر بده.
ادامه مسیر: عناصر DOM در متنِ سند · همچنین DOM متدها برای تغییر عناصر.
جمع بندی سریع
- برای تک عنصر،
getElementByIdعالی است. - برای چندتا، tag یا class را بگیر.
- با
querySelectorAllالگوهای دقیق بزن. - فرم ها را با
document.formsپیمایش کن.