לדלג לתוכן

3.1 מה זה ה DOM תרגול

תרגול - מה זה ה-DOM

תרגיל 1 - חקירת ה-document

פתחו דף HTML ריק עם <script> בסוף ה-body. בתוך הסקריפט:
- הדפיסו ל-console את document.title
- הדפיסו את document.URL
- הדפיסו את document.body
- הדפיסו את document.head
- שנו את ה-title של הדף באמצעות JavaScript ובדקו בלשונית הדפדפן שהשם השתנה

תרגיל 2 - חקירת ה-window

באותו דף, הוסיפו קוד שמדפיס:
- את רוחב וגובה החלון (window.innerWidth, window.innerHeight)
- את כתובת הדף (window.location.href)
- צרו משתנה עם var ומשתנה עם let, ובדקו איזה מהם נגיש דרך window
- השתמשו ב-window.alert כדי להציג הודעה למשתמש

תרגיל 3 - צייר את העץ

נתון ה-HTML הבא:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <header>
        <h1>Welcome</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </nav>
    </header>
    <main>
        <p>Hello World</p>
        <!-- todo: add more content -->
    </main>
</body>
</html>

ציירו (על דף או במסמך טקסט) את עץ ה-DOM שהדפדפן בונה מה-HTML הזה. סמנו את סוג כל צומת (element node, text node, comment node).

תרגיל 4 - ה-DOM מול ה-HTML

צרו דף HTML עם התוכן הבא:

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>DOM vs HTML</title>
</head>
<body>
    <h1 id="title">Original Title</h1>
    <p id="message">Original message.</p>
    <div id="container"></div>

    <script>
        // your code here
    </script>
</body>
</html>

בתוך ה-script:
1. שנו את הטקסט של ה-h1 ל-"Modified Title"
2. שנו את צבע הרקע של ה-body ל-lightblue
3. צרו אלמנט p חדש עם הטקסט "I was added by JS!" והוסיפו אותו ל-container
4. פתחו את הדף בדפדפן. הסתכלו ב-DevTools Elements - מה אתם רואים?
5. עכשיו לחצו קליק ימני ואז View Page Source - מה ההבדל?

תרגיל 5 - מיקום ה-script

צרו שלושה קבצי HTML שונים שמנסים לגשת לאלמנט <h1 id="title">Hello</h1>:

קובץ a.html - שימו את ה-script ב-head (בלי defer):

<head>
    <script>
        const el = document.getElementById("title");
        console.log("File A:", el);
    </script>
</head>

קובץ b.html - שימו את ה-script בסוף ה-body:

<body>
    <h1 id="title">Hello</h1>
    <script>
        const el = document.getElementById("title");
        console.log("File B:", el);
    </script>
</body>

קובץ c.html - שימו את ה-script ב-head עם defer:

<head>
    <script defer>
        const el = document.getElementById("title");
        console.log("File C:", el);
    </script>
</head>

פתחו כל קובץ בדפדפן ובדקו ב-console: באילו מקרים ה-el הוא null ובאילו הוא האלמנט?

שימו לב: defer עובד רק עם src (קובץ חיצוני). מה קורה כשמשתמשים ב-defer על inline script?

תרגיל 6 - DOMContentLoaded מול load

צרו דף HTML עם תמונה גדולה (תשתמשו בכתובת של תמונה כלשהי מהאינטרנט) ושני event listeners:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Events Test</title>
    <script>
        // your code here
    </script>
</head>
<body>
    <h1>Loading Test</h1>
    <img src="https://picsum.photos/2000/2000" alt="large image">
    <p id="status">Loading...</p>
</body>
</html>
  1. הוסיפו event listener ל-DOMContentLoaded שמדפיס "DOM is ready!" ל-console ומציג את הזמן הנוכחי
  2. הוסיפו event listener ל-load על ה-window שמדפיס "Everything loaded!" ומציג את הזמן
  3. פתחו את הדף ובדקו ב-console - איזה הודעה מופיעה ראשונה? מה הפרש הזמנים?
  4. בתוך ה-callback של DOMContentLoaded, שנו את הטקסט של הפסקה ל-"DOM is ready, waiting for images..."
  5. בתוך ה-callback של load, שנו את הטקסט ל-"Everything loaded!"

תרגיל 7 - סוגי צמתים

צרו דף HTML עם תוכן מגוון:

<body>
    <div id="content">
        <h1>Title</h1>
        <!-- this is a comment -->
        <p>Paragraph text</p>
        Some loose text
    </div>

    <script>
        // your code here
    </script>
</body>

בתוך ה-script:
1. גשו ל-document.getElementById("content")
2. עברו על childNodes של האלמנט הזה (לא children - ההבדל חשוב)
3. לכל child node, הדפיסו את ה-nodeType ואת ה-nodeName שלו
4. סוגי הצמתים הם: 1 = Element, 3 = Text, 8 = Comment. בדקו שזה מתאים למה שאתם רואים

רמז:

const content = document.getElementById("content");
for (const node of content.childNodes) {
    console.log(node.nodeType, node.nodeName);
}

שאלות

  1. מה ההבדל בין ה-DOM לבין ה-HTML?
  2. מה ההבדל בין document לבין window?
  3. למה אסור לשים script ב-head שמנסה לגשת לאלמנטים ב-body?
  4. מה ההבדל בין DOMContentLoaded ל-load?
  5. מה ההבדל בין defer ל-async?
  6. מה ההבדל בין children לבין childNodes?