לא יודעים בכלל מה זה HTML
או Javascript
?
מוזמנים לקרוא כאן:
Javascript והקשר שלו ל-HTML
HTML
מתאר כיצד האתר נראה.Javascript
מתאר כיצד האתר מתנהג.CSS
מתאר כיצד האתר מעוצב.
בעזרת JS
ניתן לומר לאתר להתנהג בצורה שונה ממה שהוא נראה.
אילו התנהגויות יכולות להיות?
- לחיצה של כפתור
- עריכה של נתונים
- הצגת למסך בצורה מורכבת יותר כגון צורות תלת מימדיות.
כיום JS
בונה את הכל - אימיילים, תוכנות אופיס ואפילו משחקים בדפדפן!
אבל הפעם אני רוצה להציג כמה דוגמאות קטנות למה ניתן לעשות בעזרת CSS Selector
ים!
או “בוחרים” - בעזרת שאילתת בחירה נוכל למצוא אלמנטים ולעשות איתם פעולות.
בחירת סדרה רנדומלית
הגעתי לאתר וחיפשתי לתומי סדרות לצפייה.
שמתי לב שהאתר הציג לי רשימה ארוכה מאוד של סדרות שניתן לצפות בהן.
אך - לא היה להם אופציה לקבלת סדרה רנדומלית.
האתר נראה כך:

לוחצים F12
בדפדפן וזה פותח את ה-Dev tools
- כלי הפיתוח לרשת.
ה-HTML
נראה כך:

אנחנו רואים שהאלמנט שאנחנו רוצים הוא מסוג a
.
אך אם נבחר את כל ה-a
סתם ככה אז זה יביא לנו קישורים לא קשורים!
לכן חשוב לבחור את כל הקישורים שהאבא שלהם זה li
.
אלמנט <a>
הוא אלמנט כתובת - קישור למקום אחר.
אלמנט <li>
הוא אלמנט list item
- דבר כחלק מרשימה.
הוא בד”כ נמצא מתחת ל-ul
- אך זה לא חובה.
כדי לבחור אלמנטים ניתן להשתמש ב- document.querySelectorAll()
כדי לקבל את כל אלמנטי ה-HTML
ע”פ selector
.
כדי לבחור את כל האלמנטים a
מתחת ל-li
אנחנו צריכים להשתמש ב->
.
1 | let allAs= document.querySelectorAll("li > a"); |
עכשיו כדי לקבל אלמנט רנדומלי אנחנו צריכים לבחור מתוך הרשימה ולהגריל מסדר רנדומלי.
לאחר שיש לנו מספר רנדומלי שהוא אינדקס של הרשימה - אנחנו רוצים ללחוץ עליו כדי להגיע לקישור המתאים.
1 | let randNum = Math.random(); |
ובקצרה:
1 | let allAs= document.querySelectorAll("li > a");allAs[Math.floor(Math.random() * allAs.length)].click(); |
עכשיו כשנכניס את זה ל-console
נכנס לסדרה רנדומלית!
איך חלון הפיתוח מקל עלינו
ניתן להעתיק את ה-selector
מחלון ה-copy
:

אך זה נותן לנו selector
מאוד ספציפי:
1 | #ddmcc_container > div > ul:nth-child(4) > li:nth-child(3) > a |
מפה נוכל להוריד כמה דברים ולהגיע ל-Selector
יותר כללי:
1 | ul > li > a |
חוקים
חוק | הסבר | HTML לדוגמא | דוגמא |
---|---|---|---|
* | בוחר הכל | <input/> |
* |
element | ייבחר לפי שם האלמנט | <input/> |
input |
.class | בוחר לפי שם class | <div class="my-class"/> |
.my-class |
#id | בוחר לפי ID | <div id="myElement"/> |
#myElement |
[attr=value] | בוחר לפי תכונה | <player autoplay/> |
[autoplay] |
A,B | בוחר כמה אלמנטים | <div></div><span></span> |
div,span |
A B | בוחר את האלמנטים שמתחת, לא חייב להיות ילד ישיר | <div> <div> <span/> </div> </div> |
div span |
A > B | ילד ישיר | <div> <span/> </div> |
div > span |
A ~ B | אחים לא ישירים | <p>Hello</p></span></a> |
p ~ a |
A + B | אחים ישירם | <p>Hello</p></a></span> |
p + a |
A: |
בוחר אלמנט עם מחלקה | <p class="visited"/> |
p:visited |
a:: |
בוחר אלמנט עם אלמנט פסודו | <p>Hello\nWorld</p> |
p::first_line |
בעזרת Javascript
אנחנו יכולים לעשות כל מיני פעולות באתרים שהם לא שלנו!
קצת תחכום וקצת הבנה איך אתרים בנויים יכולים לגלות לנו סודות שלמים :)
כמו הפעם ההיא שהצלחתי לשלוח במס הכנסה טופס שלא הציג כראוי שאחד מה-input
ים לא נכון!
סוד - הבעיה הייתה טמונה בregex
לא טוב!
אחחחח מס הכנסה, אולי תהיו קוד פתוח?
תודה על הקריאה :)