Understanding how to work with attributes is essential for dynamic and interactive web pages. Many elements in HTML have attributes, such as src for images, href for links, and alt for alternative text. JavaScript gives you several ways to read and change these attributes. The two most common methods are getAttribute and setAttribute.

These methods let you access or modify any attribute by name, regardless of whether it is a standard property:

• Use element.getAttribute("src") to read the src of an image;
• Use element.setAttribute("alt", "A new description") to update its alt text.

In addition to these methods, some attributes can also be accessed directly as properties—such as element.src or element.href. Direct property access is often more convenient but may behave differently for some attributes, especially when dealing with custom or non-standard attributes.

In this example, you see both techniques: setAttribute is used to update the src and alt attributes of the image, while the link's href is changed using direct property access. Both approaches achieve similar results for standard attributes, but using the appropriate method is important for consistency and compatibility.