Traverse DOM and Update Element Content

// Assume HTML structure:
// <div id="container">
//   <h2>Section Title</h2>
//   <p class="description">This is the first paragraph.</p>
//   <p class="description">This is the second paragraph.</p>
//   <button id="actionBtn">Click Me</button>
// </div>

const container = document.getElementById('container');

if (container) {
    // Find the first paragraph within the container
    const firstParagraph = container.querySelector('.description');
    if (firstParagraph) {
        firstParagraph.textContent = 'Content of the first paragraph updated!';
        console.log('First paragraph updated.');
    }

    // Access children and siblings
    const actionButton = document.getElementById('actionBtn');
    if (actionButton) {
        const previousSibling = actionButton.previousElementSibling; // The second paragraph
        if (previousSibling) {
            previousSibling.style.color = 'blue';
            console.log('Previous sibling (second paragraph) style updated.');
        }

        const parentDiv = actionButton.parentElement; // The container div
        if (parentDiv) {
            const title = parentDiv.firstElementChild; // The h2 title
            if (title) {
                title.innerHTML = '<span>New Section</span> Title';
                console.log('Parent element and title updated.');
            }
        }
    }
} else {
    console.log('Container element with ID "container" not found.');
}