// index.html
/*
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementById Example</title>
</head>
<body>
    <h1 id="mainTitle">Welcome to DOM Selection Mastery</h1>
    <p id="introductionText">This paragraph introduces the core concepts of selecting elements in JavaScript.</p>
    <div id="contentArea">
        <p>Dynamic content will appear here.</p>
    </div>

    <script src="script.js"></script>
</body>
</html>
*/

// script.js
// We activate the selection process once the DOM is fully loaded.
document.addEventListener('DOMContentLoaded', () => {
    // 1. Selecting a heading by its unique ID.
    // This command directly targets the element with id="mainTitle".
    const mainTitleElement = document.getElementById('mainTitle');
    if (mainTitleElement) {
        mainTitleElement.style.color = 'navy'; // Apply a style directly.
        mainTitleElement.textContent = 'Deciphering DOM Selection Techniques'; // Update text content.
        console.log("Main Title Element found:", mainTitleElement.textContent);
    } else {
        console.error("Error: Element with ID 'mainTitle' not found.");
    }

    // 2. Selecting a paragraph by its unique ID.
    // We engineer this selection for a specific text block.
    const introParagraphElement = document.getElementById('introductionText');
    if (introParagraphElement) {
        introParagraphElement.style.fontSize = '1.1em'; // Adjust font size.
        console.log("Introduction Paragraph Element found:", introParagraphElement.textContent);
    } else {
        console.error("Error: Element with ID 'introductionText' not found.");
    }

    // 3. Selecting a container div to inject new content.
    // This demonstrates using getElementById for a content injection point.
    const contentAreaDiv = document.getElementById('contentArea');
    if (contentAreaDiv) {
        const newParagraph = document.createElement('p');
        newParagraph.textContent = 'This content was dynamically added using getElementById targeting the container.';
        contentAreaDiv.appendChild(newParagraph);
        console.log("Content Area Div found and content added.");
    } else {
        console.error("Error: Element with ID 'contentArea' not found.");
    }

    // Example of trying to select a non-existent ID.
    const nonExistentElement = document.getElementById('missingId');
    if (nonExistentElement === null) {
        console.log("Expected: Element with ID 'missingId' was not found (returns null).");
    }
});

// index.html (continued from Part 1, or can be a separate file)
/*
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>querySelector/querySelectorAll Example</title>
    <style>
        .highlight {
            background-color: yellow;
            border: 1px solid orange;
        }
        .item-list {
            list-style: none;
            padding: 0;
        }
        .item-list li {
            margin-bottom: 5px;
            padding: 5px;
            border: 1px solid #ccc;
        }
        .item-list li:nth-child(even) {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <a href="#" class="nav-link active">Home</a>
            <a href="#" class="nav-link">About</a>
            <a href="#" class="nav-link">Services</a>
        </nav>
    </header>

    <main>
        <section id="features">
            <h2>Our Features</h2>
            <div class="feature-card">Feature A</div>
            <div class="feature-card highlight">Feature B (Highlighted)</div>
            <div class="feature-card">Feature C</div>
        </section>

        <section id="products">
            <h2>Our Products</h2>
            <ul class="item-list">
                <li data-product-id="101">Product Alpha</li>
                <li data-product-id="102" class="available">Product Beta</li>
                <li data-product-id="103">Product Gamma</li>
                <li data-product-id="104" class="available">Product Delta</li>
            </ul>
            <button class="action-button">Load More</button>
            <button class="action-button primary">Submit</button>
        </section>
    </main>

    <footer id="mainFooter">
        <p>&copy; 2026 Developer Mastery</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>
*/

// script.js
document.addEventListener('DOMContentLoaded', () => {
    // 1. Using querySelector to select the first element matching a CSS class.
    // We aim to activate the first navigation link.
    const activeNavLink = document.querySelector('.nav-link.active');
    if (activeNavLink) {
        activeNavLink.style.fontWeight = 'bold'; // Emphasize the active link.
        console.log("First active navigation link:", activeNavLink.textContent);
    }

    // 2. Using querySelector to select an element by attribute.
    // We decode the specific feature card that is highlighted.
    const highlightedFeature = document.querySelector('.feature-card.highlight');
    if (highlightedFeature) {
        highlightedFeature.style.backgroundColor = 'lightgreen'; // Change background.
        console.log("Highlighted feature card:", highlightedFeature.textContent);
    }

    // 3. Using querySelectorAll to select all elements matching a CSS class.
    // We engineer modifications across all action buttons.
    const actionButtons = document.querySelectorAll('.action-button');
    actionButtons.forEach(button => {
        button.style.cursor = 'pointer'; // Add a pointer cursor.
        button.addEventListener('click', () => {
            alert(`Button "${button.textContent}" clicked!`);
        });
        console.log("Found action button:", button.textContent);
    });

    // 4. Using querySelectorAll to select elements based on a complex selector.
    // This command targets specific list items within a product list.
    const availableProducts = document.querySelectorAll('#products .item-list li.available');
    availableProducts.forEach(product => {
        product.style.color = 'green'; // Highlight available products.
        console.log("Available product:", product.textContent);
    });

    // 5. Scoped querySelector - searching within a specific element.
    // We limit the search scope to the 'products' section.
    const productsSection = document.getElementById('products');
    if (productsSection) {
        const firstProductItem = productsSection.querySelector('li'); // Finds the first LI within #products.
        if (firstProductItem) {
            firstProductItem.style.border = '2px solid blue'; // Emphasize the first product.
            console.log("First product item within #products:", firstProductItem.textContent);
        }
    }
});

// index.html (additional elements for comparison)
/*
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Performance Comparison Example</title>
</head>
<body>
    <div id="container">
        <p id="targetElementId">Target ID Element</p>
        <div class="wrapper">
            <span class="target-class">Target Class Element 1</span>
        </div>
        <div class="wrapper">
            <span class="target-class">Target Class Element 2</span>
        </div>
        <div class="wrapper">
            <span class="target-class">Target Class Element 3</span>
        </div>
    </div>
    <div id="largeContainer">
        // Imagine hundreds or thousands of elements here for a real-world large DOM scenario.
        // For demonstration, we'll keep it small, but understand the principle.
        <p class="data-item">Item 1</p>
        <p class="data-item">Item 2</p>
        <p class="data-item">Item 3</p>
    </div>

    <script src="script.js"></script>
</body>
</html>
*/

// script.js
document.addEventListener('DOMContentLoaded', () => {
    // A function to simulate operations and measure performance
    const measurePerformance = (name, operation) => {
        const start = performance.now(); // High-resolution time stamp
        operation();
        const end = performance.now();
        console.log(`${name} took: ${(end - start).toFixed(4)} ms`);
    };

    // --- Scenario 1: Single element selection (ID vs. Class with querySelector) ---
    measurePerformance('getElementById for ID', () => {
        const elementById = document.getElementById('targetElementId');
        // console.log("getElementById result:", elementById ? elementById.textContent : "null");
    });

    measurePerformance('querySelector for ID', () => {
        const elementByQueryId = document.querySelector('#targetElementId');
        // console.log("querySelector ID result:", elementByQueryId ? elementByQueryId.textContent : "null");
    });

    measurePerformance('querySelector for Class (first match)', () => {
        const elementByQueryClass = document.querySelector('.target-class');
        // console.log("querySelector Class result:", elementByQueryClass ? elementByQueryClass.textContent : "null");
    });

    // --- Scenario 2: Multiple element selection ---
    measurePerformance('querySelectorAll for Class (multiple matches)', () => {
        const elementsByQueryAllClass = document.querySelectorAll('.target-class');
        // We ensure a full traversal by accessing elements (optional for measurement).
        elementsByQueryAllClass.forEach(el => el.textContent);
        // console.log("querySelectorAll Class count:", elementsByQueryAllClass.length);
    });

    // --- Important Consideration: Scoping for performance ---
    // Scoping querySelector/querySelectorAll to a smaller subtree reduces the search space.
    const container = document.getElementById('container');
    if (container) {
        measurePerformance('querySelector for Class (scoped to container)', () => {
            const scopedElement = container.querySelector('.target-class');
            // console.log("Scoped querySelector result:", scopedElement ? scopedElement.textContent : "null");
        });
    }

    // --- Conceptual example for a large DOM ---
    // Imagine dynamically adding 1000 'data-item' elements
    const largeContainer = document.getElementById('largeContainer');
    if (largeContainer) {
        for (let i = 4; i <= 1000; i++) {
            const p = document.createElement('p');
            p.className = 'data-item';
            p.textContent = `Item ${i}`;
            largeContainer.appendChild(p);
        }

        measurePerformance('querySelectorAll on large DOM', () => {
            const allDataItems = document.querySelectorAll('.data-item');
            allDataItems.forEach(item => item.textContent); // Force traversal
        });

        // Best practice: if you need to select by ID on a large scale, use getElementById
        // Example: If each data item had a unique ID like dataItem-1, dataItem-2...
        // measurePerformance('getElementById on large DOM (conceptual)', () => {
        //     const specificDataItem = document.getElementById('dataItem-500'); // If such ID existed
        // });
    }
});

// Note: Actual performance will vary greatly depending on browser, hardware,
// and the specific complexity and size of the DOM. These measurements
// provide an indicative understanding, not absolute benchmarks.
// Always profile in your specific application environment for critical optimizations.

// index.html (reusing previous examples, adding event delegation scenario)
/*
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Selection Patterns</title>
    <style>
        .task-list {
            border: 1px solid #eee;
            padding: 10px;
            margin-top: 20px;
        }
        .task-list li {
            padding: 8px;
            margin-bottom: 5px;
            background-color: #f9f9f9;
            border-left: 5px solid #007bff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .task-list button {
            padding: 5px 10px;
            border: none;
            background-color: #dc3545;
            color: white;
            cursor: pointer;
            border-radius: 3px;
        }
        .task-list button:hover {
            background-color: #c82333;
        }
    </style>
</head>
<body>
    <div id="appContainer">
        <h1 id="appTitle">Task Management Dashboard</h1>
        <p data-info-type="status">Current Status: All systems operational.</p>
        
        <ul class="task-list" id="taskList">
            <li data-task-id="1" data-category="frontend">
                <span>Implement navigation bar</span>
                <button data-action="delete-task">Delete</button>
            </li>
            <li data-task-id="2" data-category="backend">
                <span>Develop API endpoint</span>
                <button data-action="delete-task">Delete</button>
            </li>
            <li data-task-id="3" data-category="frontend">
                <span>Refactor CSS for responsiveness</span>
                <button data-action="delete-task">Delete</button>
            </li>
        </ul>
        <button id="addTaskButton" data-action="add-task">Add New Task</button>
    </div>

    <script src="script.js"></script>
</body>
</html>
*/

// script.js
document.addEventListener('DOMContentLoaded', () => {
    // --- 1. Scoping Selections & Caching --- 
    // We cache the app container to scope future searches.
    const appContainer = document.getElementById('appContainer');
    if (!appContainer) {
        console.error("App container not found.");
        return;
    }

    // Scoped querySelector for a status element
    const statusElement = appContainer.querySelector('[data-info-type="status"]');
    if (statusElement) {
        statusElement.textContent = 'Current Status: Monitoring active tasks.';
        console.log("Updated status using scoped selection and data attribute.");
    }

    // --- 2. Data Attributes for Semantic Selection --- 
    // Selecting elements based on custom data attributes provides robust, style-independent targeting.
    const addTaskButton = appContainer.querySelector('[data-action="add-task"]');
    if (addTaskButton) {
        addTaskButton.style.backgroundColor = 'darkgreen'; // Style based on action.
        addTaskButton.addEventListener('click', () => {
            console.log('Add Task button clicked via data attribute selection.');
            // Logic to add a new task... (omitted for brevity)
            alert('Adding new task! (Conceptual)');
        });
    }

    // --- 3. Event Delegation for Dynamic Elements --- 
    // We attach a single event listener to the parent task list,
    // rather than to each individual 'Delete' button.
    const taskList = appContainer.querySelector('#taskList');
    if (taskList) {
        taskList.addEventListener('click', (event) => {
            // We decode which specific element within the list was clicked.
            const targetButton = event.target.closest('button[data-action="delete-task"]');
            if (targetButton) {
                const listItem = targetButton.closest('li[data-task-id]');
                if (listItem) {
                    const taskId = listItem.dataset.taskId; // Access data attribute directly
                    console.log(`Deleting task with ID: ${taskId}`);
                    listItem.remove(); // Remove the task item from the DOM.
                    alert(`Task ${taskId} deleted!`);
                } else {
                    console.warn("Could not find parent task item for delete button.");
                }
            }
        });
        console.log("Event delegation activated on task list.");
    }

    // Example of selecting elements with specific data attribute values
    const frontendTasks = appContainer.querySelectorAll('[data-category="frontend"]');
    console.log(`Found ${frontendTasks.length} frontend tasks.`);
    frontendTasks.forEach(task => {
        task.style.borderLeftColor = '#28a745'; // Highlight frontend tasks.
    });
});