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

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
طلا ملخص تعديل
طلا ملخص تعديل
 
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:<code>Document.getElementById()‎</code>}}</noinclude>
<noinclude>{{DISPLAYTITLE:<code>Document.getElementById()‎</code>}}</noinclude>
يُعيد التّابع <code>Document.getElementById()‎</code> كائنًا من النّوع <code>[[JavaScript/Element|Element]]</code> يُمثّل العنصر  ذو المُعرّف (<code>[[JavaScript/Element/id|id]]</code>) الذي  يُوافق السلسلة النّصيّة المُحدّدة. ولأنّ مُعرّفات العناصر لا بدّ لها أن تكون فريدة عند إنشائها، فهي مُفيدة للوصول إلى عنصرٍ مُعيّنٍ بسرعة.
يُعيد التّابع <code>Document.getElementById()‎</code> كائنًا من النّوع <code>[[JavaScript/Element|Element]]</code> يُمثّل العنصر  ذو المُعرّف (<code>[[JavaScript/Element/id|id]]</code>) الذي  يُوافق السلسلة النّصيّة المُحدّدة. ولأنّ مُعرّفات العناصر لا بدّ لها أن تكون فريدة عند إنشائها، فهي مُفيدة للوصول إلى عنصرٍ مُعيّنٍ بسرعة.
إن أردت الوصول إلى عنصر لا يملك مُعرّفًا، يُمكنك استعمال التّابع <code>[[JavaScript/Document/querySelector|querySelector()‎]]</code> للوصول إلى العنصر بأيّ مُحدِّدٍ كيفما كان.
إن أردت الوصول إلى عنصر لا يملك مُعرّفًا، يُمكنك استعمال التّابع <code>[[JavaScript/Document/querySelector|querySelector()‎]]</code> للوصول إلى العنصر بأيّ مُحدِّدٍ كيفما كان.


سطر 8: سطر 9:
</syntaxhighlight>
</syntaxhighlight>


===القيم===
===<code>element‎</code>===
====<code>element‎</code>====
كائنٌ من النّوع <code>[[JavaScript/Element|Element]]</code> يُمثّل عنصر DOM الذي يوافق مُعرّفه المُعرّف المُعطى، أو القيمة <code>null‎</code> في حالة لم يوجد عنصر موافقٌ في المستند.
كائنٌ من النّوع <code>[[JavaScript/Element|Element]]</code> يُمثّل عنصر DOM الذي يوافق مُعرّفه المُعرّف المُعطى، أو القيمة <code>null‎</code> في حالة لم يوجد عنصر موافقٌ في المستند.


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


== أمثلة ==


==أمثلة==
===تغيير لون النص عند الضغط على زر===
===المثال الأول===


جزء HTML:
جزء [[HTML]]:
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<html>
<html>
<head>
<head>
   <title>getElementById example</title>
   <title>getElementById مثال</title>
</head>
</head>
<body>
<body>
   <p id="para">Some text here</p>
   <p id="para">هنا محتوى الفقرة</p>
   <button onclick="changeColor('blue');">blue</button>
   <button onclick="changeColor('blue');">أزرق</button>
   <button onclick="changeColor('red');">red</button>
   <button onclick="changeColor('red');">أحمر</button>
</body>
</body>
</html>
</html>
</syntaxhighlight>
</syntaxhighlight>
جزء JavaScript:
جزء [[JavaScript]]:
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
function changeColor(newColor) {
function changeColor(newColor) {
سطر 40: سطر 40:
</syntaxhighlight>
</syntaxhighlight>


 
===خطأ محاولة الوصول إلى عنصر من العنصر الأب===
===المثال الثّاني===
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<!doctype html>
<!doctype html>
سطر 47: سطر 46:
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <title>Document</title>
     <title>العنوان</title>
</head>
</head>
<body>
<body>
     <div id="parent-id">
     <div id="parent-id">
         <p>hello word1</p>
         <p>مرحبًا بالعالم 1</p>
         <p id="test1">hello word2</p>
         <p id="test1">مرحبًا بالعالم 2</p>
         <p>hello word3</p>
         <p>مرحبًا بالعالم 3</p>
         <p>hello word4</p>
         <p>مرحبًا بالعالم 4</p>
     </div>
     </div>
     <script>
     <script>
سطر 66: سطر 65:
</syntaxhighlight>
</syntaxhighlight>
تُعاد القيمة <code>null‎</code> في حالة لم يوجد عنصر موافقٌ للمُعرّف <code>id‎</code> المُعطى. لاحظ أنّ المعامل <code>id‎</code> حسّاس لحالة الأحرف، لذا فالاستدعاء <code>Document.getElementById("Main")‎</code> يعيد القيمة <code>null‎</code> عوضًا عن العنصر <code><nowiki><div ‎id‎=‎"‎main"‎></nowiki></code> لأنّ "M" و "m" قيمتان مُختلفتان عند التّعامل مع هذا التّابع.
تُعاد القيمة <code>null‎</code> في حالة لم يوجد عنصر موافقٌ للمُعرّف <code>id‎</code> المُعطى. لاحظ أنّ المعامل <code>id‎</code> حسّاس لحالة الأحرف، لذا فالاستدعاء <code>Document.getElementById("Main")‎</code> يعيد القيمة <code>null‎</code> عوضًا عن العنصر <code><nowiki><div ‎id‎=‎"‎main"‎></nowiki></code> لأنّ "M" و "m" قيمتان مُختلفتان عند التّعامل مع هذا التّابع.
لا يُبحث عن العناصِر غير الموجودة على المُستند من طرف التّابع <code>Document.getElementById()‎</code>. عند إنشاء عنصرٍ وتعيين قيمة مُعرّف له، يجب عليك إدخال العنصر إلى المستند عبر التّابع <code>[[JavaScript/Node/insertBefore|Node.insertBefore()‎]]</code> أو تابع مُشابهٍ قبل أن تتمكّن من الوصول إليه عبر التّابع <code>Document.getElementById()‎</code>:
لا يُبحث عن العناصِر غير الموجودة على المُستند من طرف التّابع <code>Document.getElementById()‎</code>. عند إنشاء عنصرٍ وتعيين قيمة مُعرّف له، يجب عليك إدخال العنصر إلى المستند عبر التّابع <code>[[JavaScript/Node/insertBefore|Node.insertBefore()‎]]</code> أو تابع مُشابهٍ قبل أن تتمكّن من الوصول إليه عبر التّابع <code>Document.getElementById()‎</code>:
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
سطر 73: سطر 73:
</syntaxhighlight>
</syntaxhighlight>


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


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


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


== دعم المتصفحات ==
== دعم المتصفحات ==
سطر 101: سطر 100:
==انظر أيضًا==
==انظر أيضًا==
* <code>[[JavaScript/Document|Document]]</code> مرجعٌ لتوابع وخصائص أخرى للتّعامل مع العناصر في المستند.
* <code>[[JavaScript/Document|Document]]</code> مرجعٌ لتوابع وخصائص أخرى للتّعامل مع العناصر في المستند.
* <code>[[JavaScript/Document/querySelector|Document.querySelector()‎]]</code> لاستعمال المُحدِّدات التي تستعمل استعلامات مثل <code>‎'div.myclass'‎‎</code>.
* <code>[[JavaScript/Document/querySelector|Document.querySelector()‎]]</code> لاستعمال المُحدِّدات التي تستعمل استعلامات مثل <code>div.myclass‎‎</code>.


==مصادر ومواصفات==
==مصادر ومواصفات==
* مواصفة [https://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#method-getElementById Document Object Model (DOM) Level 1 Specification]
* مواصفة [https://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#method-getElementById Document Object Model (DOM) Level 1 Specification].
* مواصفة [https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId Document Object Model (DOM) Level 2 Core Specification]
* مواصفة [https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId Document Object Model (DOM) Level 2 Core Specification].
* مواصفة [https://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-getElBId Document Object Model (DOM) Level 3 Core Specification]
* مواصفة [https://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-getElBId Document Object Model (DOM) Level 3 Core Specification].
* مواصفة [https://dom.spec.whatwg.org/#interface-nonelementparentnode DOM]
* مواصفة [https://dom.spec.whatwg.org/#interface-nonelementparentnode DOM].


  [[تصنيف:JavaScript]]
  [[تصنيف:JavaScript]]

المراجعة الحالية بتاريخ 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‎‎.

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=JavaScript/Document/getElementById&oldid=32413»