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

מעבר DOM מתאר כיצד לנווט במבנה דמוי עץ שמסמכי HTML יוצרים. להלן מדריך מלא כיצד לעבור את ה-DOM עם JavaScript.

מה זה מעבר DOM?

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

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

חציית DOM (נקראת גם הליכה או ניווט ב-DOM) היא הפעולה של בחירת צמתים בעץ ה-DOM מצמתים אחרים. אתה בטח כבר מכיר כמה שיטות עבור גישה לאלמנטים בעץ ה-DOM לפי המזהה, המחלקה או שם התג שלהם. אתה יכול להשתמש בשיטות כמו document.querySelector() ו document.getElementById() לעשות זאת.

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

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

instagram viewer

מסמך לדוגמה למעבר

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

השיטה הראשונה כוללת חיפוש אחר אלמנט שמתחיל בצומת העליון (כמו צומת המסמך) ונע כלפי מטה.

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

כדי להדגים, שקול את מסמך HTML לדוגמה זה:

<!DOCTYPE html>
<html lang="he">
<רֹאשׁ>
<מטא תווים ="UTF-8" />
<מטא http-equiv="X-UA-תואם" תוכן="IE=קצה" />
<מטא שם="נקודת מבט" תוכן="רוחב=רוחב התקן, קנה מידה התחלתי=1.0" />
<כותרת>עמוד לדוגמא</title>
</head>
<גוּף>
<רָאשִׁי>
<h1>כותרת העמוד שלי</h1>
<ע>כיתוב נחמד הולך כאן</p>


<כיתת מאמר="מאמר __ראשון">
<h2>רשימה של פירות מדהימים</h2>
<ע>חייבים לאכול פירות</p>


<div class="עטיפה-1">
<ul class="רשימת תפוחים">
<לי כיתה="תפוח עץ">תפוחים</li>
<לי כיתה="תפוז">תפוזים</li>
<לי כיתה="אבוקדו">אבוקדואים</li>
<לי כיתה="עַנָב">
 ענבים


<ul>
<לי כיתה="סוג 1">ירח יורד</li>
<לי>סולטנה</li>
<לי>הַרמוֹנִיָה</li>
<לי>Crimson Seedless</li>
</ul>
</li>
<לי כיתה="בננה">בננות</li>
</ul>


<כפתור מחלקה="btn-1">קרא את הרשימה המלאה</button>
</div>
</article>


<כיתת מאמר="מאמר __שני">
<h2>מקומות מדהימים בקניה</h2>
<ע>חובה לבקר במקומות בקניה</p>


<div class="עטיפה-2">
<ul class="רשימת מקומות">
<לי>מסאי מארה</li>
<לי>חוף דיאני</li>
<לי>חוף וואטאמו</li>
<לי>הפארק הלאומי אמבוסלי</li>
<לי>אגם נאקורו</li>
</ul>


<כפתור מחלקה="btn-2">קרא את הרשימה המלאה</button>
</div>
</article>
</main>
</body>
</html>

חציית ה-DOM כלפי מטה

אתה יכול לעבור את ה-DOM כלפי מטה באחת משתי שיטות. הראשון הוא שיטת הבורר הנפוצה (element.querySelector אוֹ element.querySelectorAll). שנית, אתה יכול להשתמש ב- יְלָדִים אוֹ צמתים ילדים תכונה. ישנם גם שני נכסים מיוחדים נוספים, כלומר, ילד אחרון ו ילד ראשון.

שימוש בשיטות בורר

שיטות querySelector() מאפשרות לך לחפש אלמנט אחד או יותר התואמים לבורר נתון. לדוגמה, אתה יכול לחפש את האלמנט הראשון עם מחלקה של "מאמר ראשון" באמצעות document.querySelector('.first-article'). וכדי להביא הכל h2 רכיבים במסמך, אתה יכול להשתמש ב- querySelectorAll שיטה: document.querySelectorAll('h2'). ה querySelectorAll השיטה מחזירה רשימת צומתים של אלמנטים תואמים; אתה יכול לבחור כל פריט באמצעות סימון סוגריים:

const כותרות = מסמך.querySelectorAll('h2');
const firstHeading = כותרות[0]; // בחירה באלמנט h2 הראשון
const secondHeading = כותרות[1]; // בחירה באלמנט h2 השני

המלכוד העיקרי בעת שימוש בשיטות בורר הוא שעליך להשתמש בסמלים המתאימים, במידת האפשר, לפני הבורר כפי שאתה עושה ב-CSS. לדוגמה, ".classname" עבור מחלקות ו-"#id" עבור מזהים.

זכור שהתוצאה תהיה אלמנט HTML, לא רק התוכן הפנימי של האלמנט הנבחר. כדי לגשת לתוכן אתה יכול להשתמש בצומת innerHTML תכונה:

מסמך.querySelector('.orange').innerHTML

שימוש במאפיינים של ילדים או צמתים ילדים

ה יְלָדִים מאפיין בוחר את כל רכיבי הצאצא שנמצאים ישירות מתחת לרכיב נתון. הנה דוגמה של יְלָדִים נכס בפעולה:

const appleList = מסמך.querySelector('.apple-list');
const apples = appleList.children; 
לְנַחֵם.log (תפוחים);

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

לא כמו ה יְלָדִים תכונה, צמתים ילדים מחזירה את כל צמתי הצאצא הישירים (לא רק רכיבי צאצא). אם אתה מעוניין רק ברכיבי צאצא, נניח פריטי רשימה בלבד, השתמש ב- יְלָדִים תכונה.

שימוש במאפייני lastChild ו-firstChild מיוחדים

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

const appleList = מסמך.querySelector('.apple-list');
const firstChild = appleList.firstChild;
const lastChild = appleList.lastChild;

חציית ה-DOM כלפי מעלה

אתה יכול לנווט למעלה ב-DOM באמצעות ה- parentElement (אוֹ parentNode) ו הכי קרוב נכסים.

שימוש ב-parentElement או parentNode

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

בדוגמת הקוד שלהלן, אנו משתמשים parentElement כדי לבחור את ה-div עם המחלקה "wrapper-1" מתוך "apple-list":

const appleList = מסמך.querySelector('.apple-list');
const parentDiv = appleList.parentElement; 
לְנַחֵם.log (parentDiv); // מציג רכיב div עם class wrapper-1

שימוש בנכס הקרוב ביותר

ה הכי קרוב מאפיין בוחר את רכיב האב הראשון שתואם לבורר שצוין. זה מאפשר לך לבחור רמות מרובות למעלה במקום אחת. לדוגמה, אם כבר יש לנו את הכפתור עם מחלקה "btn-1", נוכל לבחור את רָאשִׁי אלמנט באמצעות ה הכי קרוב נכס כדלקמן:

const btn1 = מסמך.querySelector('.btn-1');
const mainEl = btn1.closest('רָאשִׁי');
לְנַחֵם.log (mainEl); // מציג את האלמנט הראשי

כמו querySelector ו querySelectorAll, השתמש בבוררים המתאימים ב- הכי קרוב שיטה.

חציית ה-DOM הצידה

קיימות שתי שיטות להליכה של ה-DOM הצידה. אתה יכול להשתמש nextElementSibling אוֹ הקודםElementSibling. להשתמש nextElementSibling כדי לבחור את רכיב האחים הבא ו הקודםElementSibling כדי לבחור את האח הקודם.

const כתום = מסמך.querySelector('.orange');
const apple = orange.previousElementSibling;
const אבוקדו = orange.nextElementSibling;

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

עשה יותר על ידי שרשרת מאפיינים ושיטות חציית DOM

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