Get and Set Standard HTML Element Attributes

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

if (myImage) {
    // Get an attribute's value
    const currentSrc = myImage.getAttribute('src');
    console.log('Current image source:', currentSrc); // e.g., 'old-image.jpg'

    // Set a new attribute value
    myImage.setAttribute('src', 'new-image.jpg');
    myImage.setAttribute('alt', 'A new descriptive alt text for the image');
    console.log('Updated image source:', myImage.getAttribute('src'));

    // Check if an attribute exists
    if (myImage.hasAttribute('title')) {
        console.log('Image has a title attribute:', myImage.getAttribute('title'));
    } else {
        console.log('Image does not have a title attribute.');
        myImage.setAttribute('title', 'This is a dynamically added title');
    }

    // Remove an attribute
    myImage.removeAttribute('data-original-src'); // Useful for cleaning up attributes
    console.log('Checked if data-original-src exists after removal:', myImage.hasAttribute('data-original-src'));
} else {
    console.error('Image element with ID "myImage" not found.');
}

// Example HTML for context:
// <img id="myImage" src="old-image.jpg" alt="An old image" data-original-src="old-image.jpg">