Attributes

HTML elements have attributes that provide additional information about them, like the `src` of an `<img>` tag or the `href` of an `<a>` tag. JavaScript gives you full control to read and modify these attributes dynamically. For standard attributes like `id`, `src`, or `href`, you can often access them directly as properties on the element object (e.g., `img.src`). This is the easiest and most common way. However, for any attribute, including custom ones, you can use the generic methods `getAttribute('attrName')` and `setAttribute('attrName', 'value')`. These methods work with the attribute names as strings. A particularly powerful feature is custom `data-*` attributes. These are designed to let you store extra information on standard HTML elements without having to resort to non-standard attributes. For example, you could have `<div data-user-id="123">`. In JavaScript, you can access these attributes through the `dataset` property. The attribute `data-user-id` would be accessible as `element.dataset.userId` (the part after `data-` is converted to camelCase). This provides a clean way to attach application-specific data directly to the DOM, which can then be easily accessed by your scripts.