מדריך זה מכסה את המתודות querySelector() ו-querySelectorAll() – איך הן עובדות, מתי להשתמש בכל אחת, ואיך לבצע לולאה על התוצאות.
ה-DOM (Document Object Model) מייצג את כל אלמנטי ה-HTML במבנה של עץ. לכל אלמנט בעץ ניתן לגשת באמצעות JavaScript וה-API המובנה של הדפדפן. המתודות querySelector ו-querySelectorAll הן הדרך הגמישה ביותר לבחור אלמנטים מה-DOM כי הן מקבלות כל CSS selector תקין.
הביטו ב-markup הבא. נשתמש בו לכל הדוגמאות בפוסט זה:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>JavaScript DOM API querySelector and querySelectorAll Examples</title>
</head>
<body>
<div class="wrapper">
<div class="name">Liam</div>
<div class="name">Noah</div>
<div class="name">William</div>
<div class="name">James</div>
<div class="name">Benjamin</div>
<div class="name">Elijah</div>
</div>
<div id="country">USA</div>
<footer>Just some footer text</footer>
<script>
// code goes here
</script>
</body>
</html>querySelectorAll – דוגמה
הסינטקס של querySelectorAll:
const elements = parentNode.querySelectorAll(cssSelector);כדי למצוא את כל אלמנטי ה-div עם הקלאס name במבנה ה-HTML שלמעלה:
<script>
const names = document.querySelectorAll(".name");
console.log(names);
</script>שורה 2 מחזירה NodeList שמכיל את כל שישה האלמנטים עם הקלאס name.
querySelector – דוגמה
בעוד ש-querySelectorAll מחזיר את כל האלמנטים התואמים, querySelector מחזיר רק את ההתאמה הראשונה. הנה הסינטקס:
const element = parentNode.querySelector(cssSelector);המתודה querySelector מקבלת כל CSS selector כארגומנט ומחזירה את האלמנט הראשון שמתאים, או null אם לא נמצאה התאמה.
<script>
const country = document.querySelector("#country");
console.log(country);
</script>הקוד מחזיר את האלמנט עם ה-ID בשם country.
querySelector מול getElementById ו-getElementsByClassName
אולי תתהו מתי להשתמש ב-querySelector במקום מתודות ישנות יותר כמו getElementById() ו-getElementsByClassName(). ההבדל המרכזי הוא ש-querySelector ו-querySelectorAll מקבלות כל CSS selector, מה שהופך אותן להרבה יותר גמישות. ניתן להשתמש ב-selectors מורכבים כמו div.wrapper > .name:first-child או [data-role="close"].
עם זאת, getElementById() מהיר יותר כי הוא משתמש בטבלת החיפוש הפנימית של הדפדפן ישירות. בבדיקות ביצועים, הוא רץ בערך פי 2 מהר יותר מ-querySelector(). לחיפושי ID פשוטים בקוד קריטי לביצועים, getElementById() הוא הבחירה הטובה יותר.
יש הבדל חשוב בין התוצאות שהמתודות האלו מחזירות. querySelectorAll() מחזיר NodeList סטטי – תמונת מצב של ה-DOM ברגע השאילתה. מתודות כמו getElementsByClassName() מחזירות HTMLCollection חי שמתעדכן אוטומטית כשה-DOM משתנה. חשוב לזכור את זה כשהקוד שלכם משנה את ה-DOM תוך כדי איטרציה על התוצאות.
ביצוע לולאה על NodeList עם forEach
המתודה querySelectorAll מחזירה NodeList, שתומך במתודת forEach() בכל הדפדפנים המודרניים (Chrome 51+, Firefox 50+, Safari 10+, Edge 16+):
const names = document.querySelectorAll(".name");
names.forEach((element) => {
console.log(element);
});ניתן גם להשתמש בלולאת for...of, שעובדת באופן זהה ונתמכת באותו היקף:
const names = document.querySelectorAll(".name");
for (const element of names) {
element.style.color = "blue";
}
אם אתם צריכים מתודות מערך כמו
map(),filter(), אוreduce()על התוצאות, פרסו את ה-NodeList למערך קודם:[...document.querySelectorAll(".name")].
תחימת querySelector לאלמנט הורה
ניתן לקרוא ל-querySelector ו-querySelectorAll על כל אלמנט, לא רק על document. זה מגביל את החיפוש לצאצאים של אותו אלמנט, מה שמועיל כשעובדים עם קומפוננטות או חלקים ספציפיים בעמוד:
const wrapper = document.querySelector(".wrapper");
const firstChild = wrapper.querySelector(".name");
console.log(firstChild.textContent); // "Liam"שאלות נפוצות
שאלות נפוצות בנושא querySelector ו-querySelectorAll:
querySelector() מחזיר את האלמנט הראשון שמתאים ל-CSS selector, או null אם לא נמצאה התאמה. querySelectorAll() מחזיר NodeList סטטי של כל האלמנטים התואמים, או NodeList ריק אם אין התאמות. השתמשו ב-querySelector() כשאתם צריכים אלמנט אחד וב-querySelectorAll() כשאתם צריכים את כולם.getElementById() מהיר יותר בערך פי 2 כי דפדפנים מנהלים טבלת חיפוש פנימית ל-ID שמאפשרת גישה ישירה. querySelector() משתמש במנוע CSS selector שמוסיף תקורת עיבוד. בפועל, ההבדל זניח עבור רוב היישומים, אבל ללולאות קריטיות לביצועים, getElementById() הוא הבחירה הטובה יותר לחיפושי ID פשוטים.querySelectorAll() מחזיר NodeList סטטי - תמונת מצב של ה-DOM ברגע הקריאה. אם ה-DOM משתנה לאחר מכן, ה-NodeList לא מתעדכן. זה שונה מ-getElementsByClassName() ו-getElementsByTagName(), שמחזירים HTMLCollection חי שמשקף שינויים ב-DOM אוטומטית.querySelector() ו-querySelectorAll() זמינות על כל אלמנט DOM, לא רק על document. קריאה שלהן על אלמנט ספציפי מגבילה את החיפוש לצאצאים שלו. למשל, wrapper.querySelector(".item") מחפש רק בתוך האלמנט wrapper.querySelector() מחזיר null כשאף אלמנט לא תואם את ה-selector. querySelectorAll() מחזיר NodeList ריק (עם length של 0). תמיד בדקו את תוצאת querySelector() מול null לפני גישה למאפיינים, אחרת תקבלו TypeError.סיכום
querySelector() מחזיר את האלמנט הראשון שמתאים, בעוד querySelectorAll() מחזיר NodeList סטטי של כל ההתאמות. שתיהן מקבלות כל CSS selector, מה שהופך אותן לגמישות יותר מ-getElementById() או getElementsByClassName(), אם כי המתודות הישנות יותר מהירות יותר לחיפושים פשוטים. ניתן לבצע לולאה על NodeList באמצעות forEach() או for...of בכל הדפדפנים המודרניים, ולתחום את השאילתות לאלמנט הורה ספציפי כדי לצמצם את החיפוש.
הנה פוסטים קשורים בנושא:
