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

من موسوعة حسوب
→ التعديل السابق
مرئينص الويكي
لا ملخص تعديل
طلا ملخص تعديل
 
(مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين)
سطر 17: سطر 17:
== أمثلة ==
== أمثلة ==


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


جزء 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) {
سطر 39: سطر 39:
}
}
</syntaxhighlight>
</syntaxhighlight>
===المثال الثّاني===
 
===خطأ محاولة الوصول إلى عنصر من العنصر الأب===
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<!doctype html>
<!doctype html>
سطر 45: سطر 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>

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