Modifying HTML Content and Attributes

const img = document.querySelector('img');
img.setAttribute('src', 'newImage.jpg');
img.src = 'newImage.jpg';

They are completely equivalent
setAttribute is more verbose but works with custom attributes
While both approaches work for standard HTML attributes, setAttribute() is more versatile as it works with both standard and custom attributes. The direct property access (img.src) is more convenient for standard attributes and automatically resolves relative URLs to absolute ones. However, for custom data attributes or non-standard attributes, setAttribute() must be used. Additionally, setAttribute() maintains consistency in your code when dealing with various types of attributes.
The src property only works with valid URLs
setAttribute is always faster