اشیای HTML (HTML Objects)
اینجا با «اشیای HTML» کار می کنیم. «شیء (Object)» یعنی یک عنصر با ویژگی ها. با جاوااسکریپت این ویژگی ها را می خوانیم یا تغییر می دهیم. مثل کنترل وسایل کلاس با یک ریموت.
لینک ها: Anchor
ویژگی های لینک را بخوان. مثلا آدرس «href» یا زبان «hreflang». این ها مسیر و توضیح لینک هستند.
// مقدار href لینک;
const a = document.getElementById("myLink");
console.log(a.href);
// خواندن hreflang و rel و target;
const linkEl = document.getElementById("myLink");
console.log(linkEl.hreflang);
console.log(linkEl.rel);
console.log(linkEl.target);
نقشه تصویر: Area
«Area» بخش های کلیک شدنی یک تصویر است. مختصات «coords» جای نقطه ها را می گوید. مثل صندلی های علامت دار سالن.
// خواندن مختصات ناحیه;
const ar = document.getElementById("myArea");
console.log(ar.coords);
console.log(ar.shape);
console.log(ar.href);
پایه لینک ها: Base
«base» آدرس پایه همه لینک های نسبی است. مثل آدرس مدرسه برای همه کلاس ها.
// خواندن آدرس base صفحه;
const baseEl = document.querySelector("base");
if (baseEl) {
console.log(baseEl.href);
}
فریم ها: IFrame
«iframe» یک صفحه توی صفحه است. می توانی پس زمینه اش را عوض کنی یا ارتفاعش را بخوانی.
// تغییر رنگ پس زمینه محتوای iframe;
const ifr = document.getElementById("myFrame");
const doc = ifr.contentDocument;
if (doc) {
doc.body.style.backgroundColor = "lightyellow";
}
// خواندن ارتفاع iframe;
const frameEl = document.getElementById("myFrame");
console.log(frameEl.height);
تصاویر: Image
می توانی «src» تصویر را عوض کنی. این یعنی عکس دیگری نمایش بده. مثل عوض کردن پوستر روی دیوار.
// تغییر منبع تصویر;
const img = document.getElementById("myImg");
img.src = "pic_highres.jpg";
جدول ها: Table
در جدول می توانی سطر اضافه کنی یا حذف کنی. این یعنی مدیریت داده ها مثل لیست حضور و غیاب.
// افزودن یک سطر جدید;
const tbl = document.getElementById("myTable");
const row = tbl.insertRow(-1);
const c1 = row.insertCell(0);
const c2 = row.insertCell(1);
c1.textContent = "New";
c2.textContent = "Row";
گام های پیشنهادی تمرین
- یک عنصر بساز و id بده.
- با document.getElementById انتخاب کن.
- یک ویژگی را بخوان یا تغییر بده.
نکته: کد را بعد از لود شدن DOM اجرا کن. سپس وجود عنصر را همیشه بررسی کن.
جمع بندی سریع
- Anchor برای لینک هاست.
- Area مختصات ناحیه ها را دارد.
- Base مسیر پایه لینک هاست.
- IFrame صفحه تو در تو است.
- Image و Table آسان تغییر می کنند.