אז למדת HTML, יצרת את התגים הראשונים שלך, למדת על CSS, יצרת טפסים יפים, כפתורים מדהימים, עמודים מגיבים והתחלת להראות לכולם כמה כל זה היה מדהים.

אבל אז אתה מחליט שאתה רוצה לעשות צעד נוסף בלימוד שלך, והתחלת לתהות לעצמך: “איך אוכל להוסיף אנימציה לדף שלי? הלוואי שהכפתור הזה עשה קצת אנימציה בעמוד שלי כשלחצתי עליו! "

ובכן, לשם ה- DOM בא לפתור את הבעיה שלך. בטח שמעתם הרבה על זה, אבל אולי עוד לא ידעתם מה זה ואילו בעיות זה פותר. אז בואו נחפור פנימה.

אז מה ה- DOM?

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

DOM (מודל אובייקט מסמך) הוא ממשק המייצג את אופן קריאת מסמכי ה- HTML וה- XML ​​על ידי הדפדפן. זה מאפשר לשפה (JavaScript) לתפעל, לבנות ולעצב את האתר שלך. לאחר שהדפדפן קורא את מסמך ה- HTML שלך, הוא יוצר עץ ייצוגי שנקרא מודל אובייקט המסמך ומגדיר כיצד ניתן לגשת לאותו עץ.

יתרונות

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

כמו שאמרתי, יש לך אינסוף אפשרויות - אתה רק צריך להשתמש ביצירתיות שלך.

ייצוג על ידי הדפדפן

בתמונה לעיל אנו יכולים לראות את עץ הייצוג וכיצד הוא נוצר על ידי הדפדפן. בדוגמה זו, יש לנו ארבעה אלמנטים חשובים שתראה הרבה:

1. מסמך : הוא מטפל בכל מסמכי ה- HTML .
2. אלמנטים : כל התגים שנמצאים בתוך ה- HTML או ה- XML שלך הופכים לאלמנט DOM.
3. טקסט : כל תוכן התגים.
4. תכונות : כל התכונות מאלמנט HTML ספציפי . בתמונה, התכונה class = "hero" היא תכונה מהאלמנט < p>.

מניפולציה של ה- DOM

עכשיו אנחנו מגיעים לחלק הכי טוב: מתחילים לתפעל את ה- DOM. ראשית, ניצור אלמנט HTML כדוגמה כדי לראות כמה שיטות וכיצד האירועים עובדים.

      Entendendo o DOM (Document Object Model) 
00:00:00
 Start Stop Reset 

פשוט מאוד, נכון? עכשיו נלמד עוד על שיטות DOM: כיצד להשיג את האלמנטים שלנו ולהתחיל לתפעל.

שיטות

ל- DOM יש הרבה שיטות. הם הקשר בין הצמתים (אלמנטים) שלנו לאירועים, דבר שנלמד עליו בהמשך. אני אראה לך כמה מהשיטות החשובות ביותר ואיך משתמשים בהן. יש הרבה יותר שיטות שאני לא אראה לך כאן, אבל אתה יכול לראות את כל השיטות כאן.

getElementById ()

שיטה זו מחזירה את האלמנט שמכיל את שם id עבר. כידוע, מזהים צריכים להיות ייחודיים, ולכן זו שיטה מועילה מאוד להשיג רק את האלמנט הרצוי.

var myStart = document.getElementsById('start');

myStart : שם המשתנה שלנו דומה שלנו מזהה עבר.

התחלה : מזהה עבר. ובמקרה שאין לנו שום מזהה בשם ספציפי זה, הוא מחזיר לאפס .

getElementsByClassName ()

שיטה זו מחזירה אוסף HTMLC של כל אותם רכיבים המכילים את מחלקת השמות הספציפית שעברה.

var myContainer = document.getElementsByClassName('container');

myContainer : שם המשתנה שלנו שנראה דומה למחלקה שלנו עבר.

.container : הכיתה שלנו עברה. במקרה שאין לנו שום מחלקה עם השם הספציפי הזה, הוא מחזיר null .

getElementsByTagName ()

זה עובד באותה צורה כמו שיטות אלה לעיל: הוא מחזיר גם HTMLCollection, אך הפעם בהפרש יחיד: הוא מחזיר את כל אותם אלמנטים עם שם התג שעבר.

var buttons = document.getElementsByTagName('button');

לחצנים : שם המשתנה שלנו שנראה דומה לשם התג שלנו עבר.

כפתור : שם התג שאנחנו רוצים לקבל.

querySelector ()

הוא מחזיר את האלמנט הראשון שעבר בורר ה- CSS הספציפי . רק זכרו שהבורר צריך לעקוב אחר התחביר של CSS . במקרה שאין לך בורר כלשהו , הוא מחזיר null .

var resetButton = document.querySelector('#reset');

resetButton : שם המשתנה שלנו שנראה דומה לבורר שלנו עבר.

# reset : בורר עבר, ואם אין לך בורר שתואם הוא מחזיר null .

querySelectorAll ()

דומה מאוד לשיטת querySelector () , אך עם הבדל יחיד: הוא מחזיר את כל האלמנטים התואמים לבורר ה- CSS שעבר. על הבורר לעקוב אחר התחביר של CSS . במקרה שאין לך בורר כלשהו , הוא מחזיר null .

var myButtons = document.querySelector('#buttons');

myButtons : שם המשתנה שלנו שנראה דומה לבורר שלנו עבר.

כפתורים # : בורר עבר, אם אין לך בורר שתואם הוא מחזיר null .

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

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

עכשיו, אנחנו הולכים ללמוד על אירועים - אחרי הכל בלעדיהם אנחנו לא יכולים לעשות אנימציות בדפים שלנו.

אירועים

לאלמנטים של ה- DOM יש שיטות , כפי שדיברנו זה עתה, אך יש להם גם אירועים . אירועים אלה אחראים לאפשר אינטראקטיביות בעמוד שלנו. אבל הנה דבר אחד שאתה אולי לא יודע: אירועים הם גם שיטות .

נְקִישָׁה

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

myStart.addEventListener('click', function(event) {

// Do something here.

}, false);

הפרמטרים addEventListener () הם:

1. סוג האירוע הרצוי (במקרה זה ' לחץ ').
2. פונקציית התקשרות חוזרת
3. השימוש ב- Capture כברירת מחדל הוא שקר. זה מציין אם אתה רוצה "לתפוס" את האירוע או לא.

בחר

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

myStart.addEventListener('select', function(event) {

alert('Element selected!');

}, false);

אלה כמה מהאירועים הנפוצים ביותר. כמובן שיש לנו הרבה אירועים אחרים שבהם אתה יכול להשתמש, כמו גרור ושחרר אירועים - כאשר משתמש מתחיל לגרור אלמנט כלשהו אתה יכול לבצע פעולה כלשהי, וכאשר הוא שומט את האלמנט הזה אתה יכול לבצע פעולה אחרת.

עכשיו נראה כיצד נוכל לחצות את ה- DOM ולהשתמש במאפיינים מסוימים.

חוצה את ה- DOM

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

.childNodes

מאפיין זה מחזיר nodeList של צמתים צאצאים של האלמנט הנתון. הוא מחזיר טקסט, הערות וכו '. לכן, כאשר אתה רוצה להשתמש בו, עליך להיזהר.

var container = document.querySelector('.container');

var getContainerChilds = container.childNodes;

.ילד ראשון

מאפיין זה מחזיר את הילד הראשון של האלמנט הנתון.

var container = document.querySelector('.container');

var getFirstChild = container.firstChild;

.nodeName

מאפיין זה מחזיר את שם האלמנט הנתון. במקרה זה, עברנו div , כך שהוא יחזיר " div ".

var container = document.querySelector('.container');

var getName = container.nodeName;

.nodeValue

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

var container = document.querySelector('.container')

var getValue = container.nodeValue;

.nodeType

מאפיין זה מחזיר את סוג האלמנט הנתון. במקרה זה, הוא מחזיר " 1 ".

var container = document.querySelector('.container')

var getValue = container.nodeType;

אבל, מה המשמעות של " 1 " בכל מקרה? זה בעצם הצומת node של האלמנט הנתון. במקרה זה, זה _ELEMENT_NODE_ ומחזיר null. אם זו הייתה תכונה, היא תוחזר כ- " 2 " אלינו וערך התכונה.

אתה יכול לקרוא עוד על nodeTypes כאן.

אלמנטים

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

.parentNode

מאפיין זה מחזיר את האב של הצומת שניתן.

var container = document.querySelector('.container')

var getParent = container.parentNode;

.firstElementChild

מחזיר את האלמנט הצאצא הראשון של האלמנט הנתון.

var container = document.querySelector('.container')

var getValue = container.firstElementChild;

.lastElementChild

מחזיר את האלמנט הצאצא האחרון של האלמנט הנתון.

var container = document.querySelector('.container')

var getValue = container.lastElementChild;

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

סיכום

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

? תן לי בטוויטר!

⭐ F ollow לי על GitHub!

אני מחפש הזדמנות מרוחקת, אז אם יש לי אשמח לשמוע עליה, אז אנא צור איתי קשר!