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

ضمن المستند الذي يطابق المحدد المحدد، أو مجموعة المحددات. إذا لم يتم العثور على أي تطابقات، فسيتم إرجاع القيمة null.

ملاحظة: تتم المطابقة باستخدام اجتياز الترتيب المسبق للعمق أولاً لعقد المستند بدءًا من العنصر الأول في ترميز المستند والتكرار عبر العقد المتسلسلة حسب ترتيب عدد العقد الفرعية.

ملاحظة: يجب تجاوز الأحرف التي لا تشكل جزءًا من بناء جملة CSS القياسي باستخدام حرف الخط المائل العكسي. بما أن JavaScript تستخدم أيضًا الهروب من الخط المائل العكسي، فكن حذرًا بشكل خاص عند كتابة سلسلة حرفية باستخدام هذه الأحرف. انظر لمزيد من المعلومات.

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

للمطابقة مع معرف أو محددات لا تتبع بناء جملة CSS القياسي (باستخدام نقطتين أو مسافة بشكل غير مناسب، على سبيل المثال)، يجب عليك الهروب من الحرف بخط مائل عكسي (" \ "). نظرًا لأن الشرطة المائلة العكسية هي أيضًا حرف هروب في JavaScript، إذا كنت تقوم بإدخال سلسلة حرفية، فيجب عليك الهروب منها مرتين(مرة واحدة لسلسلة JavaScript، ومرة ​​أخرى لـ querySelector()):

console.log("#foo\bar"); // "#fooar" (\b هو حرف التحكم في مسافة للخلف) document.querySelector("#foo\bar"); // لا يطابق أي شيء console.log("#foo\\bar"); // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\\\bar"); // تطابق القسم الأول document.querySelector("#foo:bar"); // لا يطابق أي شيء document.querySelector("#foo\\:bar"); // تطابق القسم الثاني

في هذا المثال، يتم إرجاع العنصر الأول في المستند بالفئة "myclass":

var el = document.querySelector(".myclass");

يمكن أن تكون أدوات التحديد أيضًا قوية جدًا، كما هو موضح في المثال التالي. هنا، يتم إرجاع العنصر الأول الذي يحمل الاسم "login" () الموجود داخل فئته "user-panel main" () في المستند:

var el = document.querySelector("div.user-panel.main input");

يتم إنشاء جدول التوافق الموجود في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.

تحديث بيانات التوافق على GitHub

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

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

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

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

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

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

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

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

حظر المحتوى. تنبيه (document.getElementsByClassName("elem").innerHTML);

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

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

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

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

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

إذا (document.getElementsByClassName == unتعريف) ( 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 هو اسم الفئة المخصصة للعنصر.

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

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

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

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

إذن، إليك طريقتان يمكنك من خلالهما التفاعل مع العناصر التي تم تعيين سمة الفئة لها. اختر الخيار الذي يناسبك وقم بتطبيقه.

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

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

document.getElementById(المعرف)

خيارات:

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

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

كود HTML:

جافا سكريبت:

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

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

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

document.getElementsByClassName(class)

خيارات:

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

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

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

كود HTML:

جافا سكريبت:

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

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

document.getElementsByTagName(العلامة)

خيارات:

بطاقة شعار - علامة العنصرالتي يجب العثور عليها

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

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

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

document.querySelector (محدد)

document.querySelectorAll(محدد)

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

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

كود HTML:

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

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

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

element.previousElementSibling

element.nextElementSibling

دعونا نجد العنصر الذي يلي الكتلة:

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

element.children

دعونا نجد عناصر الطفلحاجز.

يوفر معيار DOM عدة وسائل للعثور على عنصر. هذه الطرق هي getElementById، وgetElementsByTagName، وgetElementsByName.

توفر مكتبات JavaScript طرق بحث أكثر قوة.

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

على سبيل المثال، الكود التالي سيغير لون النص إلى اللون الأزرق في القسم "e c id="dataKeeper" :

Document.getElementById("dataKeeper").style.color = "أزرق"

الطريقة التالية هي الحصول على جميع العناصر ذات علامة معينة، والبحث عن العنصر الذي تحتاجه فيما بينها. يتم استخدام Document.getElementsByTagName(tag) لهذا الغرض. تقوم بإرجاع مجموعة من العناصر التي تحتوي على تلك العلامة.

على سبيل المثال، يمكنك الحصول على العنصر الثاني (الترقيم في المصفوفة يبدأ من الصفر) باستخدام علامة li:

Document.getElementsByTagName("LI")

ومن المثير للاهتمام أنه يمكن استدعاء getElementsByTagName ليس فقط للمستند، ولكن بشكل عام لأي عنصر يحتوي على علامة (وليس نصًا).

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

على سبيل المثال، يحصل الاستدعاء التالي على قائمة عناصر LI الموجودة داخل علامة div الأولى:

Document.getElementsByTagName("DIV").getElementsByTagName("LI")

سيؤدي استدعاء elem.getElementsByTagName("*") إلى إرجاع قائمة بجميع العناصر الفرعية لعنصر العقدة بالترتيب الذي مشوا به.

على سبيل المثال، في DOM هذا:

هذا الرمز:

var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") for(var i=0; i