Manage Element Attributes (Get, Set, Remove)

function manageElementAttributes(elementId) {
    const element = document.getElementById(elementId);
    if (!element) {
        console.error(`Element with ID '${elementId}' not found.`);
        return;
    }

    console.log(`--- Managing attributes for element '${elementId}' ---`);

    // 1. Get an attribute
    const currentClass = element.getAttribute('class');
    console.log(`Current class attribute: ${currentClass}`); // Might be null if not set

    // 2. Set an attribute (or update if it exists)
    element.setAttribute('title', 'This is a dynamic title');
    element.setAttribute('style', 'color: blue; border: 1px solid blue;'); // Overwrites existing inline style
    element.setAttribute('data-state', 'active'); // Example with a data attribute

    console.log(`New 'title' attribute: ${element.getAttribute('title')}`);
    console.log(`New 'style' attribute: ${element.getAttribute('style')}`);
    console.log(`New 'data-state' attribute: ${element.getAttribute('data-state')}`);


    // 3. Check if an attribute exists
    const hasId = element.hasAttribute('id');
    console.log(`Element has 'id' attribute: ${hasId}`);

    // 4. Remove an attribute
    element.removeAttribute('title');
    console.log(`'title' attribute after removal: ${element.getAttribute('title')}`); // Will be null

    // Using properties for some common attributes (cleaner for direct access)
    element.className = 'updated-class new-class'; // Sets/overwrites the class attribute
    element.id = 'newDynamicId'; // Sets/overwrites the id attribute
    // For input elements, 'value' property is common:
    if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
        element.value = 'New Input Value'; 
        console.log(`Updated value using property: ${element.value}`);
    }
    console.log(`Updated class using property: ${element.className}`);
    console.log(`Updated ID using property: ${element.id}`);
}

// Example Usage:
// Assume the following elements exist in your HTML:
// <input type="text" id="myInput" class="initial-input" value="Hello" />
manageElementAttributes('myInput');

// <div id="myDiv">Some content</div>
// manageElementAttributes('myDiv');