可通过四种方式为HTML5元素添加属性：一、JavaScript setAttribute方法动态设置；二、HTML标签中直接声明；三、点语法直接赋值内置属性；四、dataset API操作data-*属性。
如果您需要为HTML5元素动态添加属性，可以通过JavaScript的setAttribute方法实现，也可以在HTML标签中直接声明属性。以下是具体操作步骤：
一、使用JavaScript setAttribute方法添加属性
setAttribute方法允许在运行时为已存在的DOM元素动态添加或修改属性，适用于需要根据条件或用户交互控制属性的场景。
1、获取目标HTML元素，例如通过id选择器：document.getElementById("myElement")。
2、调用setAttribute方法，传入属性名和属性值两个参数：element.setAttribute("data-id", "123")。
立即学习“前端免费学习笔记（深入）”；
3、可连续添加多个属性，如同时设置class和custom属性：element.setAttribute("class", "active"); element.setAttribute("data-status", "loaded")。
二、在HTML标签中直接书写属性
在编写HTML源码时，可在起始标签内直接添加标准或自定义属性，浏览器解析时即生效，适用于静态、确定的属性配置。
1、为元素添加内置属性，如id、class、src等：
。
2、添加HTML5自定义数据属性（data-*）：
3、添加布尔属性（如hidden、disabled），仅存在即表示true：。
三、使用JavaScript点语法直接赋值属性
对于部分内置属性（如id、className、src、hidden等），可通过DOM对象的对应属性直接赋值，比setAttribute更简洁且兼容性良好。
1、获取目标元素：const el = document.querySelector("input")。
2、直接设置标准属性值：el.id = "searchBox"; el.className = "form-control"。
3、设置布尔属性：el.hidden = true; el.disabled = false。
四、使用dataset API操作data-*属性
dataset提供专门访问HTML5 data-*自定义属性的接口，自动将连字符命名转为驼峰式，语义清晰且无需手动解析。
1、确保HTML中已声明data属性：。
2、通过dataset读取或写入：const sec = document.querySelector("section"); sec.dataset.pageNumber = "6"。
3、删除data属性可使用delete操作符：delete sec.dataset.lastUpdated。
