הורדה.jpg

עוד קצת על הקונסול - פניה לאלמנטים הנמצאים ב DOM

עוד כמה מילים על הקונסול, אשר נותן לנו אפשרות גישה לאוביקט ה-Window שהוא מכיל בתוכו את "דף האינטרנט", וגם דרך להוסיף לייקים לכל ההודעות בעמוד כאן,...
נכתב ע"י 5127109 · ‏3/9/19 ·
  1. 5127109
    נתחיל בכמה מילים על JS, שהיא השפה השולטת והבלתי מעורערת בעולם בWEB.

    שפה זו רצה רק בסביבה שיש דפדפן (או לחילופין object model, ובגלל שזה אפשר לכתוב סקריפטים לאינדיזיין עם JS, אבל זה לא קשור כרגע).

    לכל דפדפן ישנו אוביקט כללי בשם window, שהוא מכיל את כל העמוד שאנחנו רואים ועוד כמה דברים. כדי לגשת ל"עמוד" שאנו רואים יש שם אוביקט בשם documant. ו-DOM הוא document object model, הוא מכיל את כל האלמנטים שאנו רואים על המסך (וגם מה שאנחנו לא רואים, כי יש דברים נסתרים מעינינו שנמצאים שם), ואת כל הפונקציות שקשורות אליהם, ומאפשר גישה אליהם.

    והקטע הכי יפה פה, שדרך הקונסול, יש לנו גישה לwindow, ומשם גם לdocument, ואפשר לעשות עם זה דברים מגניבים.

    אם נכתוב בקונסול window, נראה את כל הפרופרטיז שלו. וגם את document, שהוא חלק ממנו.

    לדוגמא, אם נצהיר על משתנה בקונסול הוא באופן אוטמטי יהיה חלק מwindow.

    כמו כן אנחנו יכולים לדרוס פונקציות שנמצאות בwindow לדוגמא אם יש אתר שפותח יותר מידי חלונות צפים, אפשר לדרוס את האופציה הזו על ידי השמה של פונקציה ריקה במקום משהו כזה:
    קוד:
    window.open =()=>{}
    וכן על זו הדרך.


    אם אנחנו רוצים לבצע פעולות מהקונסול על הDOM, שזה אומר על האלמנטים שיש לנו על המסך, אנחנו פשוט יכולים לגשת אליהם דרך הקונסול, ולבצע את הפעולות האלה. אנחנו יודעים בJS למצוא אלמנטים לפי כל מיני מאפיינים שיש להם. אם זה על ידי ת.ז. או שם מחלקה של עיצוב CSS, או כל מאפיין אחר שעולה על הדעת - אפילו כאלה שאנחנו המצאנו !

    פותחים בכבוד אכסניה, הפורום של פרוג. אם למשל אני רוצה לשלוח תודה להודעה הראשונה שבעמוד. אני צריך למצוא את האלמנט הזה ולבצע עליו קליק. את זה אפשר על ידי מציאת שם המחלקה שלו. מכיון שמציאת אלמנטים יכולה להיות יותר מאלמנט אחד, אנחנו מקבלים אוסף שדומה למערך, ואם אנחנו רוצים את הראשון, נפנה אליו (ואם הוא לא נמצא, וננסה לפנות אליו, נקבל שגיאה).

    מחיטוט בelements בלחיצה על F12 אנחנו יכולים לראות ששם המחלקה הוא LikeLabel

    Screen Shot 2019-09-03 at 7.38.40.png

    ואם אנחנו רוצים לתת על זה לייק אז פשוט נכתוב בקונסול:
    קוד:
    document.getElementsByClassName('LikeLabel')[0].click();

    ושימו לב - זה עושה קליק על האלמנט! אם כבר היה שם תודה - זה מסיר אותה ולהפך.

    ומה קורה אם אני רוצה לתת תודה לכל ההודעות בעמוד?

    אז אני צריך לעשות לולאה שעוברת על כל האלמנטים האלה ולוחצת עליהם משהו כזה:

    קוד:
    [...document.getElementsByClassName('LikeLabel')].forEach(p=>p.click())
    אנחנו לא מקבלים פה מערך אמיתי אלא אוסף אלמנטים של HTML, שיש לו כמה פונקציות של מערך כמו אינדקס למשל (ולכן בפעם הראשונה יכולנו לפנות אליו באינדקס), אבל הוא לא מערך אמיתי בשביל forEach לכן צריך להמיר אותו למערך, ואת זה עשיתי עם spreadator כתיבה מודרנית שלJS.

    אני בטוח שתיקחו את זה הלאה לעוד המון מקומות טובים, ואבקש שאת הלייק למאמר הזה תעשו ידני....
    MS2, יוסי גרפי, שויקי ו-21 משתמשים נוספים מודים על התגובה.

תגובות

בכדי לרשום תגובה, עליך להרשם לאתר.
  1. 5127109
      @shaye מודה על התגובה.
  2. @shaye
    אף פעם לא שמתי לב שגם להמרת "HTML-collection" למערך - ה"Spread Operator" יכול להיות שימושי...
    אני חושב שיותר קריא (ולכן יותר נכון :D), לעשות את זה בדרך המקובלת עם ()Array.from:
    קוד:
    Array.from(document.getElementsByClassName('LikeLabel'))
    טוב, אפשר להתווכח על זה (מה גם שזה יותר קצר)...
    בכל אופן, תודה רבה על המאמר המחכים!!
      5127109 מודה על התגובה.
  3. 5127109
    וזאת בגלל שJQuery שהיא בסה"כ ספרית JS שעוטפת את האמור לעיל, נמצאת כאן. יש אתרים שהיא לא נמצאת (וטוב שכך).
    אבל ככה זה נעשה, הבאתי את היסודות.
      תודה רבה! מודה על התגובה.
    1. men770
      אני דיברתי על הדוגמא הספציפית הזו.
  4. men770
    כדי ללחוץ על כל קישורי התודה, אפשר פשוט לעשות כך:
    קוד:
    jQuery('.LikeLabel').click()
      אשר כותבת ו-תודה רבה! מודים על התגובה.
  5. 5127109
    באמת הייתי צריך להוסיף, שאפשר לקרוא את כל האתרים בצורה כזו ובצע פעולות בלי דפדפן בלבד, ואמנות זו נקראת סקראפינג, ואפשר ככה לשאוב מידע ולמצוא עדכונים וכו'. אולי במאמר אחר נרחיב על זה. ומה שהבאת בא בדיוק בשביל למנוע את הסקרפינג הזה, שרק משתמש אמיתי יוכל לבצע פעולות.
    אבל בנתיים חבל שגילת את זה לפרוג, תן לאנשים להרוויח לייקים.... :)
      ניוגראף, תודה רבה! ו-men770 מודים על התגובה.
  6. ניוגראף
    נהניתי מהשימוש ב-spread operator להמרת האוסף למערך!

    אפשר למנוע את היכולת לתת לייקים באמצעות קוד - פשוט לבדוק את אובייקט ה-event אם זה קליק אמיתי של המשתמש או אם זה קליק ע״י הקוד: event.isTrusted, שזה true רק אם הקליק נעשה ע״י משתמש אמיתי :)...

    תודה רבה - מחכים לעוד!
      אשר כותבת, @shaye, men770 ומשתמש נוסף מודים על התגובה.
  7. יוסי דויד
    ניסיתי להריץ את הלולאה ששמה לייק. הצליח!
    עכשיו אני כבר לא מריץ את זה שוב ;)
    כל הכבוד!
      אשר כותבת, @shaye, men770 ומשתמש נוסף מודים על התגובה.