DOM Element Selection Methods

// Select a container first
const sidebar = document.getElementById('sidebar');

// Then search only within that container
const sidebarLinks = sidebar.querySelectorAll('a');
const activeItems = sidebar.getElementsByClassName('active');

// This is more efficient than searching the entire document
// when you know the general area of your target elements

Working with a Single Element

// Get a single element
const title = document.getElementById('main-title');

// Read its content
console.log(title.textContent);
console.log(title.innerHTML);

// Modify its content
title.textContent = 'New Title';
title.innerHTML = 'New <em>Styled</em> Title';

// Change attributes
title.setAttribute('data-modified', 'true');
title.id = 'updated-title';

// Modify classes
title.classList.add('highlight');
title.classList.remove('old-style');
title.classList.toggle('expanded');

// Change styling
title.style.color = 'blue';
title.style.fontSize = '24px';

Working with Multiple Elements

// Get multiple elements
const paragraphs = document.querySelectorAll('p');

// Loop through them using forEach
paragraphs.forEach(paragraph => {
    paragraph.classList.add('body-text');
    paragraph.style.lineHeight = '1.5';
});

// Convert to array for more array methods
const paragraphsArray = Array.from(paragraphs);
// Or use the spread operator
// const paragraphsArray = [...paragraphs];

// Now you can use array methods
const longParagraphs = paragraphsArray.filter(p => p.textContent.length > 100);
const paragraphTexts = paragraphsArray.map(p => p.textContent);

HTML Structure:

<div class="blog-container">
    <div class="categories">
        <button class="category-btn active" data-category="all">All</button>
        <button class="category-btn" data-category="technology">Technology</button>
        <button class="category-btn" data-category="design">Design</button>
        <button class="category-btn" data-category="business">Business</button>
    </div>
    
    <div class="posts-container">
        <!-- Posts will be loaded here -->
    </div>
    
    <div class="loading-indicator" style="display: none;">
        Loading...
    </div>
</div>

JavaScript:

document.addEventListener('DOMContentLoaded', () => {
    // Initial load
    loadPosts('all');
    
    // Set up category filter buttons
    const categoryButtons = document.querySelectorAll('.category-btn');
    categoryButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Update active button
            document.querySelector('.category-btn.active').classList.remove('active');
            button.classList.add('active');
            
            // Load posts for selected category
            const category = button.getAttribute('data-category');
            loadPosts(category);
        });
    });
});

function loadPosts(category) {
    // Show loading indicator
    const loadingIndicator = document.querySelector('.loading-indicator');
    loadingIndicator.style.display = 'block';
    
    // Clear current posts
    const postsContainer = document.querySelector('.posts-container');
    postsContainer.innerHTML = '';
    
    // Simulate API call with setTimeout
    setTimeout(() => {
        // Fetch would normally go here
        // fetch(`/api/posts?category=${category}`)
        
        // Generate some dummy posts for demo
        const posts = generateDummyPosts(category);
        
        // Render posts
        posts.forEach(post => {
            const postElement = createPostElement(post);
            postsContainer.appendChild(postElement);
        });
        
        // Hide loading indicator
        loadingIndicator.style.display = 'none';
    }, 1000);
}

function createPostElement(post) {
    const postDiv = document.createElement('div');
    postDiv.className = 'post';
    postDiv.dataset.category = post.category;
    
    postDiv.innerHTML = `
        
${post.title}
        
${post.excerpt}
        

            ${post.category}
            ${post.date}
        
    `;
    
    return postDiv;
}

function generateDummyPosts(category) {
    // Dummy data for demonstration
    const allPosts = [
        {
            id: 1,
            title: 'Introduction to JavaScript DOM',
            excerpt: 'Learn the basics of DOM manipulation with JavaScript...',
            category: 'technology',
            date: 'May 5, 2025'
        },
        {
            id: 2,
            title: 'UI Design Principles for Developers',
            excerpt: 'Understanding basic design principles can make you a better developer...',
            category: 'design',
            date: 'May 3, 2025'
        },
        {
            id: 3,
            title: 'Building a Tech Startup: Lessons Learned',
            excerpt: 'Key insights from building a tech company from scratch...',
            category: 'business',
            date: 'May 1, 2025'
        },
        // More posts would be here
    ];
    
    // Filter posts by category (or return all)
    if (category === 'all') {
        return allPosts;
    } else {
        return allPosts.filter(post => post.category === category);
    }
}