جافاسكربتما هو DOM
- مفهوم DOM
- بناء الكائن DOM
- مصطلحات DOM
مفهوم DOM
عند استعراض صفحات الويب في المتصفح فإنه يقوم بشكل تلقائي ببناء كائن يحتوي على جميع العناصر الموجودة في الصفحة و بذات الترتيب الذي تم وضعها فيها يقال له Document Object Model أو يتم إختصار إسمه بالكلمة DOM فقط.
عند التعامل مع هذا الكائن فإن أي تغيير تجريه عليه يتم تطبيقه بشكل تلقائي على الصفحة، مما يعني أنك من خلاله تصبح قادر على الوصول إلى عناصر الصفحة، تعديل خصائصها أو محتواها، إضافة عناصر جديدة فيها أو حذف عناصر منها.
في جافاسكربت، الكائن document هو نفسه DOM الذي يقوم المتصفح ببناؤه لكل صفحة يتم استعراضها و هو يحتوي على عناصر الصفحة بالإضافة إلى دوال جاهزة يمكن من خلالها التعامل معها.
بناء الكائن DOM
إذا افترضنا أنه لدينا صفحة بسيطة جداً كما يلي، فلاحظ كيف سيكون الكائن الذي سيبنيه المتصفح ليمثل كل عنصر فيها.
مثال
<html> <head> <title>My Title</title> </head> <body> <h1>My Header</h1> <a href="https://harmash.com">My Link</a> </body> </html>
عناصر الصفحة ستكون مرتبة في الكائن DOM على النحو التالي.
الرسم السابق يوضح لك بدقة العلاقة بين العناصر و ما يحتويه كل عنصر من خصائص و قيم.
مصطلحات DOM
عند الحاجة للوصول لعناصر الصفحة بواسطة الدوال التي يوفرها لك الكائن document تخيّل أنها مرتبطة ببعضها كما في الصورة السابقة فهذا الأمر سيساعدك كثيراً على معرفة الدوال التي يمكنك استخدامها للوصول إليها.
فيما يلي أهم المصطلحات المتعارف عليها و التي تستخدم لشرح طبيعة العلاقة بين العناصر الموجودة في الصفحة و الكائن document.
1- العنصر الرئيسي
<html> هو العنصر الرئيسي ( Root Element ) أو العقدة الرئيسية ( Root Node ) التي تحتوي على كل مكونات الصفحة.
2- العنصر العادي
<head> و <body> و <title> و <h1> و <a> كلها تعتبر عناصر ( Elements ) أو عقد (Nodes ) عادية موجودة ضمن الصفحة.
3- العنصر الأب
العنصر الذي يوجد فيه عنصر آخر يُعتبر بمثابة أب له و يسمى Parent Element أو Parent Node نسبةً له.
<html>يعتبر بمثابة أب للعنصرين<head>و<body>.<body>يعتبر بمثابة أب للعنصرين<h1>و<a>.
4- العنصر الإبن
العنصر الذي يندرج من عنصر آخر يعتبر بمثابة إبن له و يسمى Child Element أو Child Node نسبةً له.
<head>يعتبر بمثابة إبن للعنصر<html>.<body>يعتبر بمثابة إبن للعنصر<html>.<title>يعتبر بمثابة إبن للعنصر<head>.<h1>يعتبر بمثابة إبن للعنصر<body>.<a>يعتبر بمثابة إبن للعنصر<body>.
5- العنصر الشقيق
العناصر التي تنتدرج من ذات الأب تعتبر إخوة و تسمى Sibling Elements أو Sibling Nodes نسبةً لبعضها.
<head>و<body>هما إخوة لأنهما موجودان مباشرةً تحت العنصر<html>.<h1>و<a>هما إخوة لأنهما موجودان مباشرةً تحت العنصر<body>.
الخصائص ( Attributes ) التي يمكن إعطاءها للعناصر مثل id، class، style، href إلخ.. بالإضافة إلى النصوص التي نظهرها على العناصر Text لا يوجد بينها علاقة أبوّة أو أخوّة كعلاقة العناصر ببعضها فهي خاصة بكل عنصر على حدا.
