ה-querySelector היא שיטת JavaScript הממלאת תפקיד חיוני בחיפוש אלמנטים.
בחלק זה, נבין ונדון בשיטת querySelector (), השימוש בה, וגם נסתכל על דוגמה כדי להבין את הרעיון של שיטת querySelector () באופן מעשי.
הצגת שיטת JavaScript querySelector ().
שיטת ממשק אלמנטים המאפשרת לנו לחפש ולהחזיר את האלמנט הראשון בתוך המסמך. הוא מוצא את הרכיב הזה שמתאים לכל אחד מהבוררים של ה-CSS או לקבוצת הבוררים שצוינו. עם זאת, אם לא נמצא רכיב תואם, הוא מחזיר null. שיטת querySelector () היא השיטה של ממשק המסמך בלבד. ממשק מסמכים הוא ממשק המתאר את השיטות הנפוצות כמו גם את המאפיינים של כל html , XML או כל סוג אחר של מסמך.
כיצד מבצעת שיטת querySelector () את החיפוש
אנו יודעים כי ישנם סוגים שונים של חיפושים שניתן להשתמש בהם לחיפוש אלמנטים. עם זאת, שיטת querySelector () משתמשת הזמנה מוקדמת של עומק ראשון מעבר של הצמתים של המסמך. בו, המעבר מתחיל עם האלמנט הראשון בסימון המסמך ולאחר מכן עובר דרך הצמתים הרציפים לפי סדר מספר הצמתים הצאצאים.
.04 כשבר
תחביר
element = document.querySelector(selectors);
שיטת querySelector () היא שיטה של ממשק מסמכים ולכן יש לה תחביר כזה.
יש לו פרמטר אחד, 'בוררים', שהוא מחרוזת DOM ויש לו בורר CSS חוקי אחד או יותר.
סוג החזרה
הוא עשוי להחזיר 'null' אם לא נמצא התאמה, ואם האלמנט הראשון תואם לבוררי ה-CSS שצוינו (אם יש), הוא יחזיר את הרכיב הזה.
עם זאת, אם אין בורר CSS חוקי, הוא יזרוק חריג 'SyntaxError'.
כעת, לפני שנסתכל על יישום לדוגמה, עלינו לדעת על סוגים שונים של בוררי CSS. אם אינך מודע, בקר שלנו https://www.javatpoint.com/css-selector חלק של מערך הלימוד של CSS.
אז, כעת ניישם דוגמה שבמסגרתה נכסה בורר CSS ונשמור על ערך האלמנט הראשון שלו באמצעות שיטת querySelector () .
יישום querySelector () דוגמה
להלן קוד לדוגמה שיגרום לנו להבין את פעולתה של שיטת querySelector ():
הגדר java
class='colors'>Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll ('p'); console.log(e);
כעת, אתה יכול לראות את ההבדל בין הקוד שבדוגמה הראשונה, השתמשנו בשיטת querySelector () והוא הוציא רק את ערך הבורר התואם הראשון. אבל, כאשר אתה מתבונן בפלט של הדוגמה השנייה הזו, תראה שהיא החזירה את כל הערכים התואמים של הבוררים או קבוצת הבוררים שצוינו. הפלט של הקוד לעיל מוצג להלן:
הסבר קוד
- הקוד לעיל הוא שילוב של HTML ו-JavaScript.
- הטמענו בוררי CSS שונים בקוד.
- בקטע JavaScript, השתמשנו בשיטת querySelectorAll () והפעלנו בורר אלמנטים של CSS.
- לכן, השיטה querySelectorAll () עוברת כעת לקוד למעבר שלו באמצעות שיטת Depth-first pre-order ומחזירה את כל ערכי האלמנטים התואמים שצוינו כפרמטרים של השיטה querySlectorAll ().
אז, באותו אופן, נוכל להשתמש בשיטת querySelectorAll () עבור סוגי בוררי CSS אחרים, והיא תחזיר את כל הערכים התואמים של הבוררים שצוינו כארגומנט שלו. על מנת ליישם את השיטה, החלף את שיטת querySelector () בשיטת querySelectorAll () עבור בוררים שונים, והשיטה תמצא את ההתאמה ותחזיר לפחות ערך תואם אחד של האלמנט שצוין.