الفرق بين المراجعتين لصفحة: «JavaScript/Document/getElementById»

المراجعة الحالية بتاريخ 14:29، 7 أكتوبر 2022

يُعيد التّابع Document.getElementById()‎ كائنًا من النّوع Element يُمثّل العنصر ذو المُعرّف (id) الذي يُوافق السلسلة النّصيّة المُحدّدة. ولأنّ مُعرّفات العناصر لا بدّ لها أن تكون فريدة عند إنشائها، فهي مُفيدة للوصول إلى عنصرٍ مُعيّنٍ بسرعة.

إن أردت الوصول إلى عنصر لا يملك مُعرّفًا، يُمكنك استعمال التّابع querySelector()‎ للوصول إلى العنصر بأيّ مُحدِّدٍ كيفما كان.

البنية العامة

var element = document.getElementById(id);

`element‎`

كائنٌ من النّوع Element يُمثّل عنصر DOM الذي يوافق مُعرّفه المُعرّف المُعطى، أو القيمة null‎ في حالة لم يوجد عنصر موافقٌ في المستند.

`id‎`

مُعرّف العنصر المرغوب إيجاده. المُعرّف سلسلةٌ نصيّةٌ حسّاسةٌ لحالة الأحرف (case-sensitive) ويكون فريدًا في المُستند؛ لا يُمكن إلّا لعنصرٍ واحدٍ فقط أن يحمل مُعرّفًا مُحدّدًا.

أمثلة

تغيير لون النص عند الضغط على زر

جزء HTML:

<html>
<head>
  <title>getElementById مثال</title>
</head>
<body>
  <p id="para">هنا محتوى الفقرة</p>
  <button onclick="changeColor('blue');">أزرق</button>
  <button onclick="changeColor('red');">أحمر</button>
</body>
</html>

جزء JavaScript:

function changeColor(newColor) {
  var elem = document.getElementById('para');
  elem.style.color = newColor;
}

خطأ محاولة الوصول إلى عنصر من العنصر الأب

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>العنوان</title>
</head>
<body>
    <div id="parent-id">
        <p>مرحبًا بالعالم 1</p>
        <p id="test1">مرحبًا بالعالم 2</p>
        <p>مرحبًا بالعالم 3</p>
        <p>مرحبًا بالعالم 4</p>
    </div>
    <script>
        var parentDOM = document.getElementById('parent-id');
        var test1=parentDOM.getElementById('test1');
        //يرمي الخطأ
        //Uncaught TypeError: parentDOM.getElementById is not a function
    </script>
</body>
</html>

تُعاد القيمة null‎ في حالة لم يوجد عنصر موافقٌ للمُعرّف id‎ المُعطى. لاحظ أنّ المعامل id‎ حسّاس لحالة الأحرف، لذا فالاستدعاء Document.getElementById("Main")‎ يعيد القيمة null‎ عوضًا عن العنصر <div ‎id‎=‎"‎main"‎> لأنّ "M" و "m" قيمتان مُختلفتان عند التّعامل مع هذا التّابع.

لا يُبحث عن العناصِر غير الموجودة على المُستند من طرف التّابع Document.getElementById()‎. عند إنشاء عنصرٍ وتعيين قيمة مُعرّف له، يجب عليك إدخال العنصر إلى المستند عبر التّابع Node.insertBefore()‎ أو تابع مُشابهٍ قبل أن تتمكّن من الوصول إليه عبر التّابع Document.getElementById()‎:

var element = document.createElement('div');
element.id = 'testqq';
var el = document.getElementById('testqq'); // el سيُساوي null

مُلاحظة حول المُستندات المُغايرة لمُستندات HTML: يجب على تطبيق DOM أن يحتوي معلومات تُخبر عن أيّ الخصائصِ هي من النّوع ID. الخصائصِ ذات الاسم "id" ليست مُعرّفات إلا عند تعريف ذلك في DTD الخاصّ بالمستند. الخاصيّة "id" مُعرّفة بأنّها من النّوع ID في المُستندات المعروفة مثل XHTML و XUL وغيرها. لا يُتوقَّع من التّطبيقات التي لا تعرف ما إذا كانت الخصائص من النّوع ID أم لا أن تُعيد القيمة null‎.

ملاحظات

يجب على حالة الأحرف في هذا التّابع أن تكون صحيحة، لن يعمل التّابع Document.getElementByID()‎ ولا التّابع Document.getElementByid()‎، إذ يجب أن توافق حالة الأحرف ما في التّابع Document.getElementById()‎.

على النّقيض من بعض التّوابع الأخرى التي تبحث عن العناصِر في الصّفحة مثل querySelector()‎ وquerySelectorAll()‎، فالتّابع getElementById()‎ مُتاح فقط كتابع للكائن document العمومي، وليس مُتاحًا كتابعٍ على جميع كائنات العناصر في DOM. وذلك لأنّ قيم المُعرّفات لا بدّ لها وأن تكون فريدةً على كامل المُستند، ولا حاجة لنُسخٍ محليّة للتّابع.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1	1	5.5	7	1

انظر أيضًا

Document مرجعٌ لتوابع وخصائص أخرى للتّعامل مع العناصر في المستند.
Document.querySelector()‎ لاستعمال المُحدِّدات التي تستعمل استعلامات مثل div.myclass‎‎.

مصادر ومواصفات

مواصفة Document Object Model (DOM) Level 1 Specification.
مواصفة Document Object Model (DOM) Level 2 Core Specification.
مواصفة Document Object Model (DOM) Level 3 Core Specification.
مواصفة DOM.

@@ سطر 19: / سطر 19: @@
 ===تغيير لون النص عند الضغط على زر===
-جزء HTML:
+جزء [[HTML]]:
 <syntaxhighlight lang="html">
 <html>
@@ سطر 32: / سطر 32: @@
 </html>
 </syntaxhighlight>
-جزء JavaScript:
+جزء [[JavaScript]]:
 <syntaxhighlight lang="javascript">
 function changeColor(newColor) {