HTML5 selector API

HTML5 selector API

بتاريخ: 23-10-2013   

ما قبل HTML5 ، كانت طريقة الدّعم لاستعلام عناصر صفحة الويب جد مُقيّدة . مما أدى بمطوّري المواقع لكتابة شيفرة تستهدف استرداد عنصر العُقَد (Element nodes) من كائن المستند النّموذجي (DOM) و ذلك عبر تمرير مُعرّفات العقد مثل : ID, ClassName, Name, TagName و namespace.


ال APIs المُستعملة ما قبل HTML


document.getElementById
document.getElementsByTagName
document.getElementsByName
document.getElementsByClassName
document.getElementsbyTagNameNS


دعونا نكتشف document.getElementbyId في مزيد من التفاصيل. يمكن استعمال هذا API لتوجيه التحكم إلى عنصر عبر تمريره مُعرّف العنصر ID . لكن هذا لن يعمل بالنسبة لمجموعة من عناصر تحمل نفس المُعرّف ID ، ما دام مُوجّه التحكم لا يشير سوى لعنصر واحد فقط .
لجعل هذه الأمور ممكنة أضافت html5 واجهات برمجة التطبيقات APIs جديدة للتحسين من جودة طلب الإستعلامات (queries)
اقتباس عن مواصفات HTML5 :


توفر html5 طرق لاختيار و اختبار العناصر ، اعتمادا على كونها تتطابق أم لا مع المُحدّد Selector المعني . بهذه الطرق يكون من السّهل إجراء مطابقة لعنصر العُقد استنادا إلى معايير مُحدّدة ، بدل غربلة النتيجة لاحقا باستدعاء طرق أخرى ك(getElementsByTagName)

تعريف واجهة API :


partial interface Document {
  Element?  querySelector(DOMString selectors);
  NodeList  querySelectorAll(DOMString selectors);
};
 
partial interface DocumentFragment {
  Element?  querySelector(DOMString selectors);
  NodeList  querySelectorAll(DOMString selectors);
};
 
partial interface Element {
  Element?  querySelector(DOMString selectors);
  NodeList  querySelectorAll(DOMString selectors);
};

هذا يعني أن المستند بدأ يأخذ الآن بعين الإعتبار طلب الإستعلامات عن طريق selector string و العائد يكون إما عُنصراً واحدا (عن طريق document.querySelector) أو مجموعة من العناصر (عن طريق document.querySelectorAll)
يقوم document.querySelector باسترجاع و إعطاءنا أول عنصر يطابق DOM string المُحدّد
أمّا document.querySelectorAll يقوم بإرجاع جميع العناصر المطابقة ل DOM string المحدد.

مثال تطبيقي

سنستعمل صفحة html5 و نضيف إليها لائحة غير مُرّقمة ثم سنربط كل عنصر من عناصر اللاّئحة بالصفة class التي ستأخذ إما قيمة odd أو even ثم سنستعمل selector API للولوج إلى العناصر و التّحكّم في مظهرها:

<ul id="dataList">
   <li class="odd">عدد فردي 1</li>
   <li class="even">عدد زوجي 1</li>
   <li class="odd">عدد فردي 2</li>
   <li class="even">عدد زوجي 2</li>
   <li class="odd">عدد فردي 3</li>
</ul>

للولوج إلى العنصر الأول فقط من اللاّئحة و المنتمي لصفة class : "odd" ، نقوم باستدعاء مُحدّد document.querySelector و تمريره كحجة للعنصر المقصود في حالتنا هو "li.odd" . أما للولوج إلى جميع العناصر نستدعي بدل ذلك : document.querySelectorAll
والآن لنلقي نظرة نظرة كاملة على الصفحة

<!DOCTYPE html>
<html dir="rtl">
<head>
  <meta charset="utf-8">
  <title>html5 api selector مثال استعمال </title>
  <style>
    li {font-weight: bold;font-size: 18px;}
  </style>
</head>
<body>
 <button id="btnFirstOdd"  type="button" onclick="btnFirstOdd()">اختيار الصفة الأولى odd</button>
 <button id="btnFirstEven" type="button" onclick="btnFirstEven()">اختيار الصفة الأولى even</button>
 <button id="btnAllOdds"   type="button" onclick="btnAllOdds()">اختيار جميع صفات odd</button>
 <button id="btnAllEvens"  type="button" onclick="btnAllEvens()">اختيار جميع صفات even</button>
 <button id="btnAllRows"   type="button" onclick="btnAllRows()">اختيار جميع عناصر اللائحة</button>

<article>
  <header>
    <h1>Selector API </h1>
    <p>مثال عن طريقة استعمال HTML5 selector API</p>
  </header>
  <nav>
    <ul id="dataList">
      <li class="odd">عدد فردي 1</li>
      <li class="even">عدد زوجي 1</li>
      <li class="odd">عدد فردي 2</li>
      <li class="even">عدد زوجي 2</li>
      <li class="odd">عدد فردي 3</li>
    </ul>
  </nav>     
</article>
<script>
    function btnFirstOdd()
    {     
        var selectedOdd = document.querySelector('li.odd');
        selectedOdd.style.color = 'Red';
    }
    function btnFirstEven()
    {
        var selectedEven = document.querySelector('li.even');
        selectedEven.style.color = 'Blue';
    }
    function btnAllOdds()
    {
        var SelectedAll = document.querySelectorAll('li.odd');
        for (var i = 0; i < SelectedAll.length; i++)
        SelectedAll[i].style.color = 'Red';
    }
    function btnAllEvens()
    {
        var SelectedAll = document.querySelectorAll('li.even');
        for (var i = 0; i < SelectedAll.length; i++)
        SelectedAll[i].style.color = 'Blue';
    }
    function btnAllRows()
    {
        var SelectedAll = document.querySelectorAll('li.odd, li.even');
        for (var i = 0; i < SelectedAll.length; i++)
        SelectedAll[i].style.color = 'Gray';
    }
</script>
</body>
</html>

جرّبوا هذا على أحدث متصفّح ويب (google chrome , mozilla...) ، ستلاحظون التغييرات التي ستحدثها selector API على عناصر لائحتكم