يتم استخدام getelementbyid من مستند أسلوب جافا سكريبت للحصول على. JavaScript - DOM: طرق البحث عن العقد. هل الحقل فارغ

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

المهمة شائعة جدًا أيضًا. عندما أكتب نصوصي ، يجب أن أستخدم هذا المحدد كثيرًا.

لنفترض أن لدينا الكود التالي على الصفحة.

حظر المحتوى.

المهمة بسيطة ، تحتاج إلى تحديد عنصر من الفئة class = "elem" وتنفيذ بعض الإجراءات باستخدامه باستخدام Javascript.

دعونا نلقي نظرة على بعض الخيارات حول كيفية القيام بذلك.

الخيار 1. استخدم طريقة جافا سكريبت getElementsByClassName.

إذا كنت لا تستخدم أي مكتبات إضافية ، فيمكنك الوصول إلى العنصر باستخدام طريقة getElementsByClassName ("class_name").

على سبيل المثال ، فيما يتعلق بـ مصدر الرمز، يمكنك إضافة سطور التعليمات البرمجية التالية.

حظر المحتوى.

نتيجة لذلك ، إذا كان كل شيء يعمل بشكل صحيح ، فسنحصل على نافذة منبثقة يتم فيها عرض النص الموجود داخل كتلة div.

يرجى ملاحظة أن نتيجة تنفيذ طريقة getElementsByClassName ستكون مصفوفة من العناصر. يمكن أن يكون هناك عدة عناصر من نفس الفئة على الصفحة.

لهذا السبب ، في نهاية بناء document.getElementsByClassName ("elem") ، تحتاج إلى الإشارة إلى أن العنصر الصفري في المصفوفة () معروض. يبدأ العد في جافا سكريبت من الصفر ، وليس واحدًا.

لكن مشكلة استخدام طريقة getElementsByClassName هي أن هذه الطريقة غير مدعومة في الإصدارات القديمة من المتصفحات.

هناك بعض الحيل للتغلب على هذا ، لكنها رمز زائدة عن الحاجة. على سبيل المثال ، يمكنك استخدام التعبيرات العادية:

If (document.getElementsByClassName == undefined) (document.getElementsByClassName = function (cl) (var retnode =؛ var myclass = new RegExp ("\\ b" + cl + "\\ b")؛ var elem = this.getElementsByTagName ( "*") ؛ لـ (var i = 0 ؛ i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

هذه طريقة واحدة لحل المشكلة. ولكن ، لكي أكون صادقًا ، ليس من المقبول جدًا بالنسبة لي أن أغلق الصفحة برمز غير ضروري ، لذلك غالبًا ما أستخدم الحل الثاني للمشكلة.

الخيار 2. استخدام مكتبة Jquery.

يسهل استخدام مكتبة Jquery حل مشكلة تحديد العناصر من خلال سمة الفئة الخاصة بهم. تحتاج إلى استخدام البناء:

$ (". elem")

هنا elem هو اسم الصنف المخصص للعنصر.

يجب أن نتذكر أنه لكي يعمل هذا ، يجب أولاً تضمين مكتبة Jquery. يضاف في القسم ، إحدى طرق القيام بذلك هي إضافة السطر التالي من التعليمات البرمجية:

لكي يتم تحميل المكتبة ، يجب أن يكون هناك اتصال بالإنترنت.

دعونا نرى كيف يعمل هذا مع مثال.

حظر المحتوى.

يجب أن يكون النص نفسه ، كما في المثال السابق ، أقل من رمز العنصر الذي تريد التفاعل معه.

وبالتالي ، هناك طريقتان يمكنك من خلالهما التفاعل مع العناصر التي لها سمة الطبقة. اختر أفضل ما يناسبك واستخدمه في الممارسة.

لكي يعمل البرنامج النصي مع بعض عناصر الصفحة ، يجب أولاً العثور على هذا العنصر. هناك عدة طرق للقيام بذلك في JavaScript. عادةً ما يتم تعيين العنصر الموجود إلى متغير ، وبعد ذلك ، من خلال هذا المتغير ، يصل البرنامج النصي إلى العنصر ويقوم ببعض الإجراءات معه.

البحث عن طريق معرف

إذا تم إعطاء العنصر سمة معرف في كود الصفحة ، فيمكن العثور على العنصر بواسطة معرف. هذه الطريقة الأسهل. يتم البحث عن العنصر باستخدام طريقة getElementById () للكائن العام للمستند.

document.getElementById (معرف)

خيارات:

معرف - معرف العنصر الذي سيتم العثور عليه. المعرف عبارة عن سلسلة ، لذلك يجب أن تكون بين علامتي اقتباس.

لنقم بإنشاء صفحة وإضافة عنصر إليها وإعطائها معرفًا ، والعثور على هذا العنصر في البرنامج النصي:

كود HTML:

جافا سكريبت:

var block = document.getElementById ("block") ؛ سجل وحدة التحكم (كتلة) ؛

قمنا بتعيين العنصر الموجود لمتغير الكتلة وعرضنا المتغير في وحدة التحكم. افتح وحدة تحكم المتصفح ، يجب أن تحتوي على العنصر.

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

البحث عن طريق الفصل

تسمح لك طريقة getElementsByClassName () بالعثور على جميع العناصر التي تنتمي إلى فئة معينة.

document.getElementsByClassName (فئة)

خيارات:

فئة - فئة العناصر التي يمكن العثور عليها

تقوم الطريقة بإرجاع مصفوفة زائفة تحتوي على العناصر الموجودة. يطلق عليه اسم مصفوفة زائفة لأن العديد من طرق المصفوفات لا تعمل معها. لكن تظل الخاصية الرئيسية - يمكنك الرجوع إلى أي عنصر من عناصر المصفوفة. حتى إذا تم العثور على عنصر واحد فقط ، فإنه لا يزال في المصفوفة.

دعونا نضيف عناصر إلى الصفحة ونمنحهم فصلًا دراسيًا. سيتم وضع بعض العناصر داخل الكتلة التي أنشأناها سابقًا. سيتم إنشاء الجزء الآخر خارج الكتلة. سيتضح معنى هذا بعد قليل. ستبدو الصفحة الآن كما يلي:

كود HTML:

جافا سكريبت:

الآن فقط تلك العناصر الموجودة في الكتلة موجودة.

البحث بالعلامة

تبحث طريقة getElementsByTagName () عن جميع العناصر بعلامة معينة. تقوم أيضًا بإرجاع مصفوفة زائفة مع العناصر الموجودة.

document.getElementsByTagName (علامة)

خيارات:

علامة - علامة العناصر التي سيتم العثور عليها

دعنا نعثر على جميع علامات p الموجودة على الصفحة:

var p = document.getElementsByTagName ("p") ؛ سجل وحدة التحكم (ع) ؛

يمكن أيضًا تطبيق هذه الطريقة ليس على المستند بأكمله ، ولكن على عنصر معين. ابحث عن جميع علامات p في الكتلة.

البحث عن طريق المحدد

هناك أساليب querySelector () و querySelectorAll () التي تبحث عن العناصر التي تطابق محددًا معينًا. وهذا يعني أنه سيتم العثور على العناصر التي كان من الممكن تطبيق النمط عليها إذا تم تحديده لمثل هذا المحدد. في الوقت نفسه ، فإن وجود مثل هذا المحدد في نمط الصفحة ليس ضروريًا على الإطلاق. هذه الأساليب ليس لها علاقة بـ CSS. يعثر الأسلوب querySelectorAll () على جميع العناصر التي تطابق المحدد. وتجد طريقة querySelector () عنصرًا واحدًا ، وهو العنصر الأول في كود الصفحة. يمكن أن تحل هذه الطرق محل جميع الطرق للعثور على العناصر التي تمت مناقشتها سابقًا ، نظرًا لوجود محدد معرف ، ومحدد علامة ، والعديد من الطرق الأخرى.

document.querySelector (محدد)

document.querySelectorAll (محدد)

تتم كتابة المحددات بنفس طريقة كتابة CSS ، فقط لا تنس وضع علامات الاقتباس.

دعنا نضيف قائمة إلى الصفحة ونجدها بواسطة المحدد. نحن نبحث عن عنصر واحد فقط ونعلم بالتأكيد أنه سيكون العنصر الأول ، لأنه العنصر الوحيد في الصفحة. لذلك ، في هذه الحالة يكون من الأنسب استخدام طريقة querySelector (). ولكن عند استخدام هذه الطريقة ، يجب أن تأخذ في الاعتبار أنه يمكن إضافة نفس العناصر إلى الصفحة في المستقبل. ومع ذلك ، هذا ينطبق على معظم الأساليب.

كود HTML:

يمكن لهذه الطرق أيضًا البحث عن عناصر ليست في المستند بأكمله ، ولكن داخل عنصر واحد.

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

العناصر المجاورة

بالنسبة للعنصر الموجود ، يمكنك العثور على الجيران. كل عنصر هو كائن ، ويمكن الحصول على العناصر المجاورة من خلال خصائص هذا الكائن. تحتوي الخاصية previousElementSibling على العنصر السابق ، وتحتوي الخاصية nextElementSibling على العنصر التالي.

العنصر

العنصر

ابحث عن العنصر الذي يلي الكتلة:

العناصر التابعة

تحتوي خاصية الأطفال على مجموعة من الأبناء.

عنصر الأطفال

ابحث عن العناصر الفرعية للكتلة.


في غطى الدرس الأخير طريقة getElementsByTagName ، والتي تُرجع مصفوفة ( مجموعة) عناصر الصفحة حسب اسم العلامة.

هنا يذهب العمل التطبيقيباستخدام جافا سكريبت وسيتم النظر في طريقة getElementById وهي إرجاع إشارة إلى عنصر، بناءً على معرّفها الفريد.

طريقة getElementById مثل getElementsByTagNameهي طريقة كائن المستند.

يتم ترجمة اسم الطريقة حرفيا: الحصول على عنصر عن طريق معرف.

أي عنصر ( تيجو) من مستند الويب يمكن تعيين معرف معرف خاص به ، وذلك بفضل يصبح العنصر فريدًاويمكنك الوصول إليها للعمل معها.

انتبههـ: لا توجد s في اسم الطريقة في نهاية كلمة العنصر ( على عكس الطريقة getElementsByTagName ). هذا للراحة ويشير إلى أن الطريقة تستخدم لتحديد العنصر.

بعض الشرح لمقتطف الشفرة أعلاه ...

  • علامة img ( الصورو) له معرف - معرف البطريق ؛
  • باستخدام طريقة getElementById ، يتم تحديد علامة img هذه بواسطة معرف البطريق ؛
  • في متغير فريد تم إدخال الارتباطإلى العلامة المختارة ؛
  • ثم يمكنك العمل مع العلامة ، كما هو الحال مع كائن من خلال متغيرفريد من نوعه ، على غرار الطريقة التي عملنا معها كائن التاريخمن خلال متغير عشوائي.

بعد الوصول إلى العنصر ( تيجو) صفحة ويب حسب المعرف باستخدام طريقة getElementById ، فنحن نعمل بالفعل معها كما هو الحال مع كائن ، مما يعني أننا نتمكن من الوصول إلى سمات العلامة كخصائص للكائن.

لذلك ، قيم السمات هي بالفعل قيم خصائص.

دعنا نواصل مع المثال السابق ...

"البطريق المتأمل">

تفسيرات لكود المثال ...

  • علامة img ( الصوره) له بعض صفات: src - عنوان الملف والعرض والارتفاع - عرض الصورة وارتفاعها ، بديل - نص بديل;
  • بعد الوصول إلى العلامة باستخدام طريقة getElementById ككائن ، نتمكن من الوصول إلى سمات العلامة ، كيفية الكائن خصائص;
  • أ قيم السمةهم الان قيم الممتلكات;
  • في جافا سكريبت ، يتم الوصول إلى خصائص الكائن من خلال نقطة. بعد ذلك ، نعرض alt - النص البديل لعلامة img باستخدام طريقة التنبيهعلى الشاشة.

أتمنى ألا يكون كل هذا في حيرة من أمرك. من الضروري أن نفهم في نفس الوقت ما يحدث مستوى البرنامججافا سكريبت وعلى مستوى ترميز المستند.

تعد علامة img كائنًا فريدًا ؛

العرض والسمات البديلة للعلامة هي خصائص الكائن ؛

قيم السمات "128" و "البطريق المتأمل"هي قيم الممتلكات ؛

// هذا ما يبدو عليه من منظور جافا سكريبت:

var فريد = (

العرض: "128" ،

بديل: "البطريق المتأمل"

}

هذه هي الطريقة التي يعمل بها أسلوب getElementById ، ويعيد مرجعًا إلى أي عنصر ( بطاقة شعار) من صفحة الويب إذا كان لها معرّف فريد. بعد ذلك ، نعمل مع هذا العنصر على مستوى جافا سكريبت. كما هو الحال مع كائن...

يجب أن يؤخذ في الاعتبار ذلك: كما في الدرس السابق، هنا - عند العمل باستخدام طريقة getElementById ، يجب وضع سطر استدعاء البرنامج النصي في نهاية مستند html

يوفر jQuery خيارات أخرى لتحديد عناصر مستند الويب.

آخر تحديث: 1.11.2015

للعمل مع بنية DOM في JavaScript ، يتم تعريف كائن المستند في كائن النافذة العامة. يوفر كائن المستند عددًا من الخصائص والأساليب لمعالجة عناصر الصفحة.

ابحث عن العناصر

تُستخدم الطرق التالية للبحث عن عناصر في الصفحة:

    getElementById (قيمة): تحديد العنصر الذي تساوي السمة id الخاصة به القيمة

    getElementsByTagName (قيمة): تحديد جميع العناصر التي تكون علامتها مساوية للقيمة

    getElementsByClassName (قيمة): يختار كل العناصر التي لها قيمة صنف

    محدد الاستعلام (القيمة): يحدد العنصر الأول الذي يطابق قيمة محدد css

    querySelectorAll (القيمة): تحديد جميع العناصر التي تطابق قيمة محدد css

على سبيل المثال ، دعنا نعثر على عنصر بالمعرف:

باستدعاء document.getElementById ("header") نجد العنصر بالمعرف = "header". وباستخدام خاصية innerText ، يمكنك الحصول على نص العنصر الذي تم العثور عليه.

البحث بعلامة محددة:

رأس

الفقرة الأولى

الفقرة الثانية

من خلال استدعاء document.getElementsByTagName ("p") ، نجد جميع عناصر الفقرة. هذا الاستدعاء يعيد مجموعة من العناصر التي تم العثور عليها. لذلك ، من أجل الحصول على العناصر الفرديةمجموعة ، تحتاج إلى تكرارها في حلقة.

إذا احتجنا إلى الحصول على العنصر الأول فقط ، فيمكننا الوصول إلى العنصر الأول من مجموعة الكائنات التي تم العثور عليها:

VarpElement = document.getElementsByTagName ("p")؛ document.write ("Paragraph text:" + pElement.innerText)؛

الحصول على عنصر بفئة:

عنوان المقال

الفقرة الأولى

الفقرة الثانية

حدد بواسطة محدد css:

ملخص المقال

الفقرة الأولى

الفقرة الثانية

يجد تعبير document.querySelector (". التعليق التوضيحي p") عنصرًا يطابق المحدِّد. إذا كان هناك عدة عناصر على الصفحة تتطابق مع المحدد ، فإن الطريقة ستختار أولها. نتيجة لذلك ، سيعرض المتصفح:

شرح المادة الفقرة الأولى الفقرة الثانية نص المحدد: شرح المادة

للحصول على كل العناصر في المحدد ، يمكنك أيضًا استخدام طريقة document.querySelectorAll التي تُرجع مصفوفة من العناصر الموجودة:

ملخص المقال

الفقرة الأولى

الفقرة الثانية

إخراج المتصفح:

شرح المادة الفقرة الأولى الفقرة الثانية نص المحدد 0: الفقرة الأولى نص المحدد 1: الفقرة الثانية