[ITEM 2] QUESTION: How to work with attributes?

Working with HTML element attributes in JavaScript allows you to dynamically manage the behavior, state, and appearance of page components. There is a standard set of methods and properties for this that provide complete control over any standard and custom attributes.

Basic manipulations are performed using the getAttribute() and setAttribute() methods. The getAttribute(name) method takes the attribute name as a string and returns its current value. If the element does not have such an attribute, the method will return null. The setAttribute(name, value) method allows you to set a new value for the specified attribute or create it if it did not exist yet. To remove unnecessary attributes, the removeAttribute(name) method is used, which completely erases the specified attribute from the element's markup. You can quickly check for the presence of an attribute using the hasAttribute(name) method, which returns a boolean value of true or false.

Of particular interest are custom attributes, which in modern HTML are conventionally named using the data- prefix (for example, data-user-id, data-role). For convenient work with them, JavaScript provides a special dataset property. It automatically converts all data- attributes of an element into an object with camelCase notation. For example, if you have a data-user-id attribute, you can get or change its value directly through the el.dataset.userId property. This eliminates the need to constantly call getAttribute and setAttribute methods, making the code cleaner and more readable.

In practice, these tools are used everywhere: from passing database record IDs to click handlers to storing interface state directly in the markup. Using dataset is the modern standard for custom data, while the classic getAttribute and setAttribute methods remain indispensable when working with standard attributes like href, src, disabled, or aria labels.