Manipulating Element Attributes Beyond Data Attributes

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

// Get an attribute's value
const currentSrc = myImage.getAttribute('src');
console.log('Current image source:', currentSrc);

// Set an attribute's value
myImage.setAttribute('alt', 'A dynamically set alt text for the image');
myImage.setAttribute('src', 'https://via.placeholder.com/200/FF5733/FFFFFF?text=New+Image');
console.log('New alt text:', myImage.getAttribute('alt'));

// Check if an attribute exists
if (myLink.hasAttribute('target')) {
  console.log('Link has a target attribute.');
} else {
  console.log('Link does not have a target attribute.');
  myLink.setAttribute('target', '_blank'); // Add it
}

// Remove an attribute
myInput.setAttribute('disabled', ''); // Initially disable
setTimeout(() => {
  myInput.removeAttribute('disabled'); // Re-enable after 3 seconds
  console.log('Input re-enabled.');
}, 3000);

// Manipulating a custom non-data attribute (use with caution, prefer data-attributes for custom data)
const customElement = document.getElementById('customElement');
customElement.setAttribute('status', 'active');
console.log('Custom element status:', customElement.getAttribute('status'));

/* HTML Structure Example:
<img id="myImage" src="https://via.placeholder.com/150" alt="Placeholder Image">
<a id="myLink" href="#">My Link</a>
<input type="text" id="myInput" value="Hello, world!">
<div id="customElement">A custom div</div>
*/