خواندن ۴ دقیقه·۳ سال پیش

HTML DOM و نحوه دستکاری عناصر HTML

با HTML DOM ، جاوااسکریپت میتونه به عناصر اچ تی ام ال دسترسی پیدا کنه و آنها رو تغییر بده.
وقتی که یک صفحه وب بارگذاری میشه، مرورگر یک DOM(Document Object Model) ایجاد میکنه.
HTML DOM به عنوان درختی از اشیاء ساخته شده The HTML DOM Tree of Objects

با Object model، جاوااسکریپت همه قدرتی که برای ایجاد HTML پویا نیاز داره رو میگیره ازجمله:
- جاوااسکریپت میتونه همه المان های HTML رو تو صفحه تغییر بده.
- میتونه همه ویژگی‌های HTML رو تو صفحه تغییر بده
- میتونه همه استایل های CSS رو تصفحه تغییر بده
- میتونه همه المان ها و ویژگی‌های موجود در صفحه رو حذف کنه.
- میتونه همه رویدادهای موجود در صفحه رو میتونه فعال کنه .
- میتونه رویدادهای جدید توی صفحه ایجاد کنه.

چیزهایی که در ادامه این مقاله یاد میگیریم:
- چطوری محتوای المان ها رو تغییر بدیم.
- چطوری استایل های css رو تغییر بدیم و چطور رویدادهای المان ها رو فعال کنیم و چطوری المان ها رو اضافه یا حذف کنیم

DOMچیست ؟
DOM درواقع یک w3C(World Wide Web Consortium)یک استانداردی رو برای دسترسی به اسناد مشخص میکنه.

دام یک پلتفرم و زبان رابط خنثی هست که به برنامه‌ها اجازه میده به صورت پویا، به محتوا،ساختارها و استایل های سند دسترسی پیدا کنند و آن‌ها رو به‌روزرسانی کنن.

W3C DOMبه سه قسمت تقسیم شده:
- Core DOM : این استاندارد برای همه نو‌ع سندهای هست
-XML DOM: این استاندارد برای همه سندهای XML هست
-HTML DOM: برای اسناد HTML هست.

HTML DOM چیست ؟

و یک رابط برنامه نویسی (programming Interface)HTML DOM درواقع برای HTML یک مدل استاندارد شی (Standard object model) هست. آن تعیین میکنه:

- المان‌های HTML رو به عنوان اشیاء
- خواص همه المان‌های HTML رو
- روش‌هایی رو برای دسترسی به همه المان‌های HTML
- رویدادهای برای همه المان‌های HTML

به عبارت دیگه HTML DOM یک استانداری هست برای که اینکه چطوری یک المان های HTML رو بگیریم و تغییرات ایجاد کنیم؛ اضافه یا حذف کنیم.

HTML DOM methods اقداماتی هستن که ما میتونیم اجرا کنیم روی المان های HTML
HTML DOM properties یکسری مقدارهایی از المان های HTML هستن که ما میتونیم تنظیم کنیم و یا تغییرشون بدیم.

رابط برنامه نویسی دام (The DOM programming Interface)

اچ تی ام ال دام میتونه با جاوا اسکریپت دسترسی داشته باشه ( و با دیگر زبان‌های برنامه نویسی ). در دام، همه المان‌هایHTML به عنوان اشیا تعریف میشن و رابط برنامه‌نویسی خواص (properties) و روشهایی(methods) از هر شی هستن.
- یک ویژگی (property) مقداری هست که ما میتونیم بگیریم یا تنظیم کنیم (مثل تغییر محتوای یک عنصر)
-یک روش(method)، اقدامی هست که ما میتونیم انجام بدیم(مثل اضافه یا حذف کردن یک عنصر HTML).
برای مثال:

<html>
 <body>
 <p id=&quotdemo&quot></p>
 
 
 document.getElementById(&quotdemo&quot) = &quotHello World!&quot
 
 
 </body>
 </html>

توی مثال بالا با استفاده "id="demo به المان p دسترسی پیدا کردیم و با innerHTML محتوای اون رو تغییر دادیم. و نکته قابل ذکر این هست که تو این مثال getElementById یک روش(method) درحالی که innerHTML یک ویژگی (property) هست.

متدgetElementById(The getElementById Method)

رایج‌ترین روش برای دسترسی به عنصر HTML استفاده از id عنصر هست؛ توی مثال بالا متد getElementById با استفاده از "Id="demo المان رو پیدا کرده.

ویژگی innerHTML(The innerHTML Property)

راحت‌ترین روش برای گرفتن محتوای یک عنصر استفاده از ویژگی (property)innerHTML هست. , ویژگی(property) innerHTML یک روش مفید هست برای گرفتن و تغییر دادن محتوای یک عنصر HTML.

از ویژگی (property) innerHTML میتونیم برای گرفتن یا تغییر دادن هر عنصر HTML شامل <html> و <body> استفاده کنیم.

The HTML DOM Document Object

اگر ما بخواهیم به هر عنصری توی صفحه HTML دسترسی پیدا کنیم، همیشه با دسترسی به document object ها شروع میکنیم. در ادامه یکسری نمونه ها رو میگیم که به ما نشون میده چطور میتونیم استفاده کنیم از document object ها و HTML رو دستکاری کنیم.

پیدا کردن عنصرهای HTML

document.getElementById(&quotid&quot) عنصر رو با استفاده از id پیدا میکنه.
document.getElementsByTabName(&quotTagName&quot)  با استفاده از اسم تگ عنصر رو پیدا میکنه.|
document.getElementsByClassName(&quotClassName&quot)  عنصر رو با استفاده از اسم کلاس پیدا میکنه

تغییر دادن عنصرهای HTML

element= new html content    محتوای عنصر رو تغییر میده 
element.attribute=new value  مقدار ویژگی یک عنصر رو تغییر میده 
element.style.property=new style  استایل های یک عنصر html  رو تغییر میده

تو این یکی نمونه از متد استفاده شده:element.setAttribute(attribute,value) مقدار ویژگی‌های یک عنصر html رو تغییر میده.

اضافه کردن و حذف کردن عنصرها

document.createElement(element) یک عنصر جدید ایجاد میکنه
document.removeChild(element) یک عنصر رو حذف میکنه
document(element)  یک عنصر اضافه میکنه
document.replaceChild(new,old)یک عنصر رو جایگزین میکنه 
(text) متنی که را که میخواهیم داخل سند مینویسد( البته از این روش خیلی نباید استفاده کرد به ویژه زمانی که تمامی عنصرهای اچ تی ام ال بارگذاری شده، به خاطر اینکه این دستور overwrite میکنه و (تمام عناصر رو پاک میکنه و محتوای خودش رو جای گذاری میکنه

اما نحوه اضافه کردن رویداد

document.getElementById(id).click=function()

{

console.log("Hello world")
}

با دستور بالا کد داخل تابع با رویداد کلیک اجرا میشه.

امیدوارم این مقاله براتون مفید بوده باشه

منبعw3schools.com

مونا به کردار

عاشق چالش و کدنویسی

شاید از این پست‌ها خوشتان بیاید