التفريق بين السمات (Attributes) في HTML والخاصيات (Properties) في جافاسكربت

في عالم تطوير الويب، تُعد لغة HTML وJavaScript من الركائز الأساسية لبناء صفحات وتطبيقات الإنترنت. عند التعامل مع العناصر داخل صفحة الويب، غالبًا ما يختلط على المطورين المفهومان “السمات” (Attributes) و”الخاصيات” (Properties)، رغم أنهما مفهومان مختلفان جوهريًا. هذا المقال يسلط الضوء بشكل معمق على الفرق بين السمات في HTML والخاصيات في JavaScript، ويوضح كيفية التعامل مع كل منهما، مع شرح أسباب الاختلافات وأهميتها في تطوير الويب.

تعريف السمات (Attributes) في HTML

السمات في HTML هي القيم التي تكتب داخل وسم العنصر (Tag) عند تعريفه داخل ملف HTML، وتستخدم لتحديد خصائص العنصر عند تحميل الصفحة. السمات موجودة دائمًا في الشفرة المصدرية (Source Code) لصفحة الويب، وهي ثابتة إلا إذا تم تعديلها ديناميكيًا عبر جافاسكربت.

مثال على عنصر HTML يحتوي على سمات:

html
CopyEdit
<input type="text" id="username" value="Ahmed" disabled>

في المثال أعلاه:

• type وid وvalue وdisabled هي سمات.

• هذه السمات تحدد خصائص العنصر قبل أن يتم تحميله أو عرضه في المتصفح.

السمات تُستخدم لوصف حالة أو خصائص العنصر أثناء عملية التحميل، وتُعد جزءًا من تعريف العنصر داخل HTML.

تعريف الخاصيات (Properties) في JavaScript

الخاصيات هي القيم أو الخصائص المرتبطة بكائن (Object) في JavaScript، والكائن هنا هو عنصر DOM (Document Object Model) الذي يمثل العنصر HTML في الذاكرة بعد تحميل الصفحة.

بمجرد تحميل صفحة الويب، يتم تحويل عناصر HTML إلى كائنات DOM تحتوي على خاصيات تُمثل حالة العنصر في الوقت الفعلي. يمكن لهذه الخاصيات أن تتغير ديناميكيًا باستخدام جافاسكربت، وتعكس الحالة الحالية للعنصر في الصفحة.

مثال على الوصول إلى خاصية عنصر في جافاسكربت:

javascript
CopyEdit
const inputElement = document.getElementById('username');
console.log(inputElement.value);  // "Ahmed"
inputElement.disabled = true;     // تعطيل الحقل ديناميكيًا

في المثال السابق:

• value وdisabled هما خاصيتان لكائن الـDOM.

• يمكن تعديل هذه الخاصيات لإحداث تغييرات فورية على العنصر.

الفرق الجوهري بين السمات والخاصيات

1. موقع التعريف والوجود

• السمات (Attributes): تعرف في الكود المصدر (HTML) عند كتابة الصفحة، وتبقى ثابتة ما لم يتم تعديلها برمجيًا.

• الخاصيات (Properties): تُعرف كجزء من كائن DOM في الذاكرة، وتُعكس الحالة الحالية للعنصر.

2. التغير والديناميكية

• السمات تعبر عن القيم الابتدائية للعنصر، وقد تبقى ثابتة بعد التحميل.

• الخاصيات يمكن أن تتغير خلال وقت تشغيل الصفحة لتعكس التغيرات في حالة العنصر.

3. التزامن والاختلاف بين القيم

في بعض الحالات، تختلف قيمة الخاصية عن قيمة السمة، لأن الخاصية تعكس الحالة الحالية للعنصر، أما السمة فتشير إلى الحالة الابتدائية.

مثال شائع:

html
CopyEdit
<input type="checkbox" id="agree" checked>

javascript
CopyEdit
const checkbox = document.getElementById('agree');
console.log(checkbox.getAttribute('checked')); // "checked" (السمة الأصلية)
console.log(checkbox.checked);                  // true أو false حسب حالة التحديد الفعلية (الخاصية)

إذا قام المستخدم بإلغاء تحديد خانة الاختيار، فإن الخاصية checked تصبح false بينما تبقى السمة checked موجودة في HTML.

كيف تؤثر السمات والخاصيات على التعامل مع عناصر DOM

قراءة وتعديل السمات

يمكن استخدام دوال مثل getAttribute() و setAttribute() لقراءة وتعديل السمات في HTML:

javascript
CopyEdit
const input = document.getElementById('username');

// قراءة السمة
const initialValue = input.getAttribute('value');  // "Ahmed"

// تعديل السمة
input.setAttribute('value', 'Mohamed');

هذه التغييرات تُعدل الكود الداخلي للعنصر، لكنها قد لا تؤثر فورًا على الخاصيات.

قراءة وتعديل الخاصيات

يمكن قراءة أو تعديل الخاصيات مباشرة عبر الكائن:

javascript
CopyEdit
const input = document.getElementById('username');

// قراءة الخاصية
const currentValue = input.value;

// تعديل الخاصية
input.value = 'Ali';

هذه التغييرات تؤثر على العنصر المعروض فورًا، وتعكس حالة العنصر في الوقت الفعلي.

الفرق في التعامل مع السمات والخاصيات في حالات معينة

السمات الخاصة بالسمات البوليانية (Boolean Attributes)

مثل checked و disabled وreadonly، تكون السمات موجودة أو غير موجودة في HTML لتدل على الحالة.

مثلاً:

html
CopyEdit
<input type="checkbox" checked>

إذا كانت السمة موجودة، تعتبر الحالة “true”، وإذا كانت غير موجودة تعتبر “false”.

لكن الخاصيات في جافاسكربت يمكن أن تأخذ القيم true أو false بشكل صريح:

javascript
CopyEdit
const checkbox = document.getElementById('checkboxId');
checkbox.checked = false;  // إزالة التحديد حتى لو السمة موجودة

السمات التي لا تتحول إلى خاصيات

ليس لكل سمة خاصية مقابلة. بعض السمات تستخدم فقط لأغراض معينة في HTML ولا تُعرض كخاصيات في DOM.

مثلاً، سمة data-* الخاصة ببيانات مخصصة:

html
CopyEdit
<div data-info="123">div>

يمكن الوصول إليها عبر:

javascript
CopyEdit
const div = document.querySelector('div');
console.log(div.getAttribute('data-info'));  // "123"
console.log(div.dataset.info);               // "123"

ولكن لا يمكن الوصول إلى data-info كخاصية مباشرة بدون استخدام dataset.

علاقة السمات والخاصيات بتحميل الصفحة وأحداث DOM

عند تحميل صفحة الويب، يتم قراءة السمات من ملف HTML وتحويلها إلى خاصيات DOM. بعد التحميل، التعديلات التي تتم على الخاصيات لا تؤثر بالضرورة على السمات، والعكس صحيح.

على سبيل المثال:

• تغيير خاصية value في عنصر يغير القيمة المعروضة في المتصفح.

• تغيير سمة value لا يغير بالضرورة القيمة المعروضة إلا إذا تم إعادة تحميل العنصر أو تم تعديل الخاصية بالتزامن.

أهمية فهم الفرق بين السمات والخاصيات في التطوير

التمييز بين السمات والخاصيات ضروري لتحقيق عدة أهداف:

1. تحكم دقيق في سلوك العناصر: معرفة متى تستخدم السمات ومتى الخاصيات تضمن تأثير التعديل المطلوب على العنصر.

2. تجنب الأخطاء البرمجية: استخدام getAttribute() لقراءة خاصية ديناميكية قد لا يعطي القيمة الحقيقية الحالية، مما يؤدي إلى أخطاء في منطق البرنامج.

3. تحسين الأداء: تحديث الخاصيات مباشرة أسرع وأكفأ من تعديل السمات لأنها تؤثر فورًا على حالة العنصر دون الحاجة إلى إعادة معالجة الكود HTML.

4. التوافق مع معايير الويب: فهم العلاقة بين السمات والخاصيات يساهم في كتابة كود أكثر موثوقية ومتوافق مع مختلف المتصفحات.

جدول يوضح الفرق بين السمات والخاصيات

أمثلة عملية لفهم الفرق في سيناريوهات متنوعة

مثال 1: عنصر الإدخال النصي (Input Text)

html
CopyEdit
<input type="text" id="myInput" value="Hello">

عند تحميل الصفحة، تكون السمة value تساوي "Hello" والخاصية value أيضًا "Hello".

بعد تحميل الصفحة:

javascript
CopyEdit
const input = document.getElementById('myInput');
input.value = "World";               // يغير القيمة المعروضة في العنصر فورًا
console.log(input.getAttribute('value')); // "Hello" (السمة الأصلية لم تتغير)

إذا أردنا تغيير السمة أيضًا:

javascript
CopyEdit
input.setAttribute('value', 'World');

لكن السمة لا تؤثر فورًا على النص المعروض بعد تحميل الصفحة إلا إذا تم تحديث الخاصية أيضًا.

مثال 2: عنصر التحقق (Checkbox)

html
CopyEdit
<input type="checkbox" id="check" checked>

بعد التحميل:

javascript
CopyEdit
const checkbox = document.getElementById('check');
checkbox.checked = false;                // يزيل التحديد من مربع الاختيار فورًا
console.log(checkbox.getAttribute('checked')); // "checked" (السمة لا تزال موجودة)
checkbox.removeAttribute('checked');    // إزالة السمة من HTML
console.log(checkbox.checked);           // false (الخاصية تعكس الحالة الحقيقية)

أثر السمات والخاصيات على التفاعل مع DOM APIs

في برمجة الويب، غالبًا ما يستخدم المطورون getAttribute وsetAttribute للتعامل مع السمات، وelement.property للتعامل مع الخاصيات. من الضروري اختيار الطريقة المناسبة حسب الحالة:

• تعديل السمة يفيد في حالة الرغبة بتغيير الكود المصدر أو التعامل مع خصائص لا تتغير كثيرًا.

• تعديل الخاصية يفيد لتحديث الحالة التفاعلية للعنصر أو التحكم في خصائصه الديناميكية.

علاقة السمات والخاصيات بمعايير الوصولية (Accessibility) والأداء

• السمات مثل aria-* تعد جزءًا مهمًا من تحسين الوصولية وتستخدم لتعريف معلومات إضافية للقراء الشاشة.

• تعديل السمات بشكل مباشر يمكن أن يؤثر على كيفية قراءة الصفحة بواسطة الأجهزة المساعدة.

• الخاصيات تؤثر بشكل مباشر على سلوك العناصر، مما يساهم في أداء تفاعل المستخدم مع الصفحة.

الخلاصة

السمات (Attributes) في HTML والخاصيات (Properties) في JavaScript هما وجهان مختلفان لنفس العنصر، يعملان معًا لتحقيق عرض وتفاعل ديناميكي للمحتوى. السمات تعبر عن الحالة الابتدائية في الشفرة المصدرية، بينما الخاصيات تعكس الحالة الحالية والتفاعلية في DOM. الفهم الدقيق للفروق بينهما أساسي لكل مطور ويب لتحقيق برمجة سليمة وفعالة، وكتابة كود متوافق وسلس مع جميع المتصفحات والتقنيات الحديثة.

المراجع

1. MDN Web Docs – HTML attributes vs. DOM properties

2. W3Schools – HTML Attributes vs. DOM Properties