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
2
3

let randNum = Math.random();
let fixedNum = Math.floor(randNum * allAs.length);
allAs[fixedNum].click();

ובקצרה:

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 לא טוב!
אחחחח מס הכנסה, אולי תהיו קוד פתוח?

תודה על הקריאה :)