לדלג לתוכן

3.2 בחירת ושינוי אלמנטים תרגול

תרגול - בחירת ושינוי אלמנטים

תרגיל 1 - בחירת אלמנטים

נתון ה-HTML הבא:

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Selecting Elements</title>
</head>
<body>
    <header id="main-header">
        <h1 class="title">My Website</h1>
        <nav>
            <a href="/" class="nav-link active">Home</a>
            <a href="/about" class="nav-link">About</a>
            <a href="/contact" class="nav-link">Contact</a>
            <a href="https://github.com" class="nav-link external">GitHub</a>
        </nav>
    </header>

    <main>
        <section class="card" data-category="tech">
            <h2>Article 1</h2>
            <p>Some text here.</p>
        </section>
        <section class="card" data-category="design">
            <h2>Article 2</h2>
            <p>More text here.</p>
        </section>
        <section class="card" data-category="tech">
            <h2>Article 3</h2>
            <p>Even more text.</p>
        </section>
    </main>

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

כתבו JavaScript שעושה את הדברים הבאים (הדפיסו כל תוצאה ל-console):
1. בחרו את ה-header לפי id
2. בחרו את הקישור הפעיל (עם class "active") באמצעות querySelector
3. בחרו את כל הקישורים ב-nav באמצעות querySelectorAll והדפיסו כמה יש
4. בחרו את כל ה-cards והדפיסו את ה-data-category של כל אחד
5. בחרו את הקישור החיצוני (שה-href שלו מתחיל ב-https) באמצעות querySelector עם attribute selector
6. מתוך ה-card הראשון, מצאו את ה-h2 שלו באמצעות ניווט DOM (לא querySelector)

תרגיל 2 - שינוי טקסט ו-HTML

צרו דף HTML עם:

<h1 id="title">Original Title</h1>
<div id="content">
    <p>Original paragraph.</p>
</div>
<div id="output"></div>

כתבו JavaScript שעושה:
1. שנו את הטקסט של ה-h1 ל-"Changed Title" באמצעות textContent
2. שנו את ה-innerHTML של #content ל-HTML חדש שמכיל <h2> ושתי פסקאות <p>
3. ב-#output, הוסיפו רשימה (<ul> עם 3 <li>) באמצעות innerHTML
4. הדפיסו ל-console את ההבדל בין textContent ל-innerHTML ול-innerText של #content

תרגיל 3 - שינוי סגנונות

צרו דף עם div שמכיל כמה פסקאות:

<div id="box" style="padding: 20px; border: 1px solid gray;">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</div>
<button id="style-btn">Change Styles</button>

כשלוחצים על הכפתור:
1. שנו את צבע הרקע של ה-box ל-lightcoral
2. שנו את צבע הטקסט ללבן
3. שנו את ה-border-radius ל-15px
4. שנו את ה-font-size ל-20px
5. הוסיפו צל (box-shadow)
6. שנו את הטקסט של הכפתור ל-"Done!"
7. השביתו את הכפתור (disabled)

תרגיל 4 - classList

צרו דף עם כפתורים ו-div:

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        margin: 20px;
        transition: all 0.3s ease;
    }
    .red { background-color: red; }
    .blue { background-color: blue; }
    .rounded { border-radius: 50%; }
    .shadow { box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); }
    .large { width: 300px; height: 300px; }
</style>

<div id="box" class="box"></div>
<button id="btn-red">Red</button>
<button id="btn-blue">Blue</button>
<button id="btn-round">Toggle Round</button>
<button id="btn-shadow">Toggle Shadow</button>
<button id="btn-large">Toggle Large</button>
<button id="btn-reset">Reset</button>

כתבו JavaScript שמטפל בכל כפתור:
- "Red" - מוסיף class "red" ומוריד "blue"
- "Blue" - מוסיף "blue" ומוריד "red"
- "Toggle Round" - עושה toggle ל-"rounded"
- "Toggle Shadow" - עושה toggle ל-"shadow"
- "Toggle Large" - עושה toggle ל-"large"
- "Reset" - מוריד את כל ה-classes חוץ מ-"box"

תרגיל 5 - data attributes

צרו רשימת מוצרים:

<div id="products">
    <div class="product" data-price="29.99" data-category="electronics" data-in-stock="true">
        <h3>USB Cable</h3>
    </div>
    <div class="product" data-price="999" data-category="electronics" data-in-stock="false">
        <h3>Laptop</h3>
    </div>
    <div class="product" data-price="15" data-category="books" data-in-stock="true">
        <h3>JavaScript Book</h3>
    </div>
    <div class="product" data-price="45" data-category="books" data-in-stock="true">
        <h3>CSS Book</h3>
    </div>
</div>
<p id="summary"></p>

כתבו JavaScript שעושה:
1. עוברים על כל המוצרים ומדפיסים את השם, המחיר והקטגוריה של כל אחד
2. מחשבים את סכום כל המוצרים שנמצאים ב-stock ומציגים את הסכום ב-#summary
3. מוסיפים class "out-of-stock" למוצרים שלא ב-stock (כש-data-in-stock הוא "false")
4. מוסיפים data attribute חדש data-discounted="true" לכל מוצר שהמחיר שלו מעל 100

תרגיל 6 - ניווט DOM

נתון ה-HTML הבא:

<table id="users-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>alice@example.com</td>
            <td>Admin</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@example.com</td>
            <td>User</td>
        </tr>
        <tr>
            <td>Charlie</td>
            <td>charlie@example.com</td>
            <td>User</td>
        </tr>
    </tbody>
</table>

בלי להשתמש ב-querySelector/querySelectorAll (רק ניווט DOM):
1. גשו לטבלה לפי id
2. גשו ל-tbody (ילד שני של הטבלה)
3. גשו לשורה הראשונה ב-tbody
4. הדפיסו את שם המשתמש הראשון (התא הראשון בשורה הראשונה)
5. עברו על כל השורות ב-tbody והדפיסו את כל השמות
6. גשו לשורה האחרונה ב-tbody ושנו את צבע הרקע שלה

תרגיל 7 - closest ו-matches

צרו מבנה של כרטיסים:

<div class="cards-container">
    <div class="card featured" data-id="1">
        <div class="card-header">
            <h3>Card 1</h3>
            <button class="delete-btn">X</button>
        </div>
        <div class="card-body">
            <p>Content 1</p>
        </div>
    </div>
    <div class="card" data-id="2">
        <div class="card-header">
            <h3>Card 2</h3>
            <button class="delete-btn">X</button>
        </div>
        <div class="card-body">
            <p>Content 2</p>
        </div>
    </div>
    <div class="card featured" data-id="3">
        <div class="card-header">
            <h3>Card 3</h3>
            <button class="delete-btn">X</button>
        </div>
        <div class="card-body">
            <p>Content 3</p>
        </div>
    </div>
</div>

כתבו JavaScript:
1. בחרו את כל כפתורי המחיקה
2. לכל כפתור, השתמשו ב-closest כדי למצוא את ה-card שהוא שייך אליו, והדפיסו את ה-data-id שלו
3. בדקו עם matches אם כל card הוא "featured" והדפיסו את התוצאה
4. מכל כפתור מחיקה, השתמשו ב-closest כדי למצוא את ה-cards-container

תרגיל 8 - פרויקט מיני: מחליף ערכת נושא - theme switcher

צרו דף עם שלוש ערכות נושא:

<style>
    body { font-family: Arial, sans-serif; padding: 40px; transition: all 0.3s; }

    body.light { background-color: #ffffff; color: #333333; }
    body.dark { background-color: #1a1a2e; color: #e0e0e0; }
    body.ocean { background-color: #0a3d62; color: #b8d6e3; }

    .theme-btn { padding: 10px 20px; margin: 5px; cursor: pointer; border: 2px solid; }
    body.light .theme-btn { border-color: #333; }
    body.dark .theme-btn { border-color: #e0e0e0; background: #16213e; color: #e0e0e0; }
    body.ocean .theme-btn { border-color: #b8d6e3; background: #0c2d48; color: #b8d6e3; }

    .active-theme { font-weight: bold; outline: 3px solid gold; }
</style>

<body class="light">
    <h1 id="title">Theme Switcher</h1>
    <p id="description">Select a theme below:</p>

    <div id="controls">
        <button class="theme-btn active-theme" data-theme="light">Light</button>
        <button class="theme-btn" data-theme="dark">Dark</button>
        <button class="theme-btn" data-theme="ocean">Ocean</button>
    </div>

    <div id="preview">
        <h2>Preview Content</h2>
        <p>This is sample text to see how the theme looks.</p>
    </div>
</body>

כתבו JavaScript:
1. כשלוחצים על כפתור ערכת נושא, שנו את ה-class של ה-body ל-theme המתאים
2. הוסיפו class "active-theme" לכפתור שנלחץ והסירו אותו מכל השאר
3. שנו את הטקסט של ה-h1 כך שיציג "Theme: Light" / "Theme: Dark" / "Theme: Ocean"
4. שמרו את הערכה הנבחרת ב-data attribute על ה-body (data-current-theme)

שאלות

  1. מה ההבדל בין querySelector ל-getElementById?
  2. מה ההבדל בין NodeList ל-HTMLCollection?
  3. למה עדיף להשתמש ב-classList במקום ב-element.style?
  4. מה ההבדל בין textContent ל-innerHTML?
  5. מתי נשתמש ב-closest ומתי ב-matches?