استخدام المعرف id HTML id Attribute

الدرس السابق الدرس التالي
سمة المعرف HTML id Attribute
يتم استخدام سمة معرف id  لتحديد معرف فريد لعنصر HTML.
لا يمكن أن يكون لديك أكثر من عنصر واحد بنفس  id في مستند HTML.
استخدام المعرف id 
تحدد سمة المعرف  id معرفًا فريدًا لعنصر HTML. يجب أن تكون قيمة سمة المعرف فريدة داخل مستند HTML.
تُستخدم سمة id للإشارة إلى إعلان نمط معين في ورقة أنماط. يتم استخدامه أيضًا بواسطة JavaScript للوصول إلى العنصر ومعالجته بالمعرف المحدد.
بناء جملة المعرف هو: اكتب حرف تجزئة (#) ، متبوعًا باسم المعرف. بعد ذلك ، حدد خصائص CSS داخل الأقواس المتعرجة {}.
في المثال التالي لدينا عنصر <h1> يشير إلى اسم المعرف "myHeader". سيتم تصميم عنصر <h1> هذا وفقًا لتعريف نمط #myHeader في قسم head:
مثال
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
} 
</style>
</head>
<body>

<h2>The id Attribute</h2>
<p>استخدم CSS لتصميم عنصر بالمعرف "myHeader":</p>

<h1 id="myHeader">My Header</h1>

</body>
</html>

ملاحظة: اسم المعرف حساس لحالة الأحرف!
ملاحظة: يجب أن يحتوي اسم المعرف على حرف واحد على الأقل ، ولا يمكن أن يبدأ برقم ، ويجب ألا يحتوي على مسافات (مسافات ، وعلامات جدولة ، وما إلى ذلك).

الفرق بين class والمعرف id 
يمكن استخدام اسم  class بواسطة عدة عناصر HTML ، بينما يجب استخدام  id  واحد فقط داخل الصفحة:

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
} 
</style>
</head>
<body>

<p> يمكن استخدام اسم فئة بواسطة عدة عناصر HTML ، بينما يجب استخدام اسم معرف بواسطة عنصر HTML واحد فقط داخل الصفحة: </p>

<! - عنصر بمعرف فريد ->
<h1 id = "myHeader"> مدني </h1>

<! - عناصر متعددة بنفس الفئة ->
<h2 class = "city"> لندن </h2>
<p> لندن هي عاصمة إنجلترا </p>

<h2 class = "city"> باريس </h2>
<p> باريس هي عاصمة فرنسا. </p>

<h2 class = "city"> طوكيو </h2>
<p> طوكيو هي عاصمة اليابان. </p>

</body>
</html>

إشارات مرجعية HTML مع المعرف id والروابط 
تُستخدم إشارات HTML المرجعية للسماح للقراء بالانتقال إلى أجزاء معينة من صفحة الويب.
يمكن أن تكون الإشارات المرجعية مفيدة إذا كانت صفحتك طويلة جدًا.
لاستخدام إشارة مرجعية ، يجب عليك أولاً إنشاؤها ، ثم إضافة ارتباط إليها.
بعد ذلك ، عند النقر على الرابط ، ستنتقل الصفحة إلى الموقع الذي يحتوي على الإشارة المرجعية .
مثال
أولاً ، قم بإنشاء إشارة مرجعية  Bookmarks  بسمة id : 
 <h2 id="C4"> الفصل الرابع </h2>

بعد ذلك ، أضف ارتباطًا للإشارة المرجعية ("الانتقال إلى الفصل 4") ، من داخل نفس الصفحة:
مثال 
<!DOCTYPE html>
<html>
<body>
<p> <a href="#C4"> انتقل إلى الفصل الرابع </a> </p>
<p> <a href="#C10"> انتقل إلى الفصل العاشر </a> </p>

<h2> الفصل 1 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 2 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل الثالث </ h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2 id = "C4"> الفصل الرابع </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل الخامس </ h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل السادس </ h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل السابع </ h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل الثامن </ h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل التاسع </ h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2 id = "C10"> الفصل العاشر </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 11 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 12 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 13 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 14 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل الخامس عشر </ h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 16 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 17 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 18 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 19 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 20 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 21 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 22 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

<h2> الفصل 23 </h2>
<p> يشرح هذا الفصل ba bla bla </p>

</body>
</html>

أو قم بإضافة ارتباط إلى الإشارة المرجعية ("الانتقال إلى الفصل 4") ، من صفحة أخرى:
 <a href="html_demo.html#C4"> انتقل إلى الفصل  الرابع </a>

استخدام سمة المعرف id في جافا سكريبت 
يمكن أيضًا استخدام سمة id بواسطة JavaScript لتنفيذ بعض المهام لهذا العنصر المحدد.
يمكن لـ JavaScript الوصول إلى عنصر بمعرف محدد باستخدام  الدالة getElementById ():
مثال
استخدم سمة id لمعالجة النص باستخدام JavaScript: 
 <!DOCTYPE html>
<html>
<body>

<h2> استخدام سمة المعرف id في جافا سكريبت </ h2>
<p> يمكن لجافا سكريبت الوصول إلى عنصر بمعرف محدد باستخدام الدالة getElementById (): </p>

<h1 id = "myHeader"> مرحبًا بكم! </h1>
<button onclick = "displayResult ()"> تغيير النص </button>
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "طاب يومك!";
}
</script>

</body>
</html>

نصيحة: ادرس JavaScript في فصل HTML JavaScript ، أو في برنامج JavaScript التعليمي.

ملخص الفصل
  • يتم استخدام سمة id لتحديد معرف فريد لعنصر HTML
  • يجب أن تكون قيمة id فريدة داخل مستند HTML
  • يتم استخدام سمة id بواسطة CSS و JavaScript لتصميم / تحديد عنصر معين
  • قيمة id  حساسة لحالة الأحرف
  • يتم استخدام سمة id أيضًا لإنشاء إشارات مرجعية بتنسيق HTML
  • يمكن لـ JavaScript الوصول إلى عنصر بمعرف محدد باستخدام الدالة getElementById ()
الدرس السابق الدرس التالي


القسم: