واجهة برمجة تطبيقات المحددات: querySelector و querySelectorAll

الوصول إلى عناصر DOM باستخدام querySelector و querySelectorAll. إنهم يقبلون أي محدد CSS ، لذلك لم تعد مقيدًا بتحديد العناصر بواسطة`id`

مقدمة

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

قدمت المتصفحات تقليديًا طريقة واحدة فقط لتحديد عنصر DOM - من خلالidالسمة معgetElementById()، وهي طريقة يقدمهاdocumentموضوع.

المحددات API

منذ عام 2013محددات API، يسمح لك DOM باستخدام طريقتين أكثر فائدة:

document.querySelector()
document.querySelectorAll()

يمكن استخدامها بأمان ،كما يخبرنا caniuse.com، وهي مدعومة بالكامل على IE9 بالإضافة إلى جميع المتصفحات الحديثة الأخرى ، لذلك لا يوجد سبب لتجنبها ، إلا إذا كنت بحاجة إلى دعم IE8 (الذي يحتوي على دعم جزئي) وما دونه.

إنهم يقبلون أي محدد CSS ، لذلك لم تعد مقيدًا بتحديد العناصر بواسطةid.

document.querySelector()إرجاع عنصر واحد ، تم العثور عليه لأول مرة
document.querySelectorAll()إرجاع كافة العناصر ، ملفوفة في كائن NodeList.

هذه كلها محددات صالحة:

document.querySelector('#test')
document.querySelector('.my-class')
document.querySelector('#test .my-class')
document.querySelector('a:hover')

jQuery الأساسي لأمثلة واجهة برمجة تطبيقات DOM

فيما يلي ترجمة لواجهة jQuery API الشهيرة إلى استدعاءات DOM API أصلية.

اختر بواسطة`id`

$('#test')
document.querySelector('#test')

نحن نستخدمquerySelectorمنذidفريد في الصفحة

اختر بواسطة`class`

$('.test')
document.querySelectorAll('.test')

حدد حسب اسم العلامة

$('div')
document.querySelectorAll('div')

أكثر تقدمًا من jQuery إلى أمثلة API لـ DOM

حدد عدة عناصر

$('div, span')
document.querySelectorAll('div, span')

حدد حسب قيمة سمة HTML

$('[data-example="test"]')
document.querySelectorAll('[data-example="test"]')

حدد من خلال فئة CSS الزائفة

$(':nth-child(4n)')
document.querySelectorAll(':nth-child(4n)')

حدد أحفاد عنصر

على سبيل المثال كل شيءliعناصر تحت#test:

$('#test li')
document.querySelectorAll('#test li')

تحميل مجانيدليل جافا سكريبت للمبتدئين