异常教程

HTML DOM attributes 属性（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

什么是 HTML DOM Attributes 属性？

在网页开发中，HTML DOM（文档对象模型）属性是连接静态 HTML 元素与动态 JavaScript 交互的关键桥梁。想象 DOM 如一棵枝繁叶茂的树，每个 HTML 元素就像树上的枝干，而属性则是装饰枝干的叶子或标签，记录着元素的身份特征。通过操作这些属性，开发者可以动态修改网页内容、响应用户行为，甚至构建复杂交互逻辑。

对于编程初学者，理解属性与 DOM 的关系如同认识树的结构：属性是元素的“身份证”，记录其状态与特征；而 DOM 则是整片森林的总图，允许开发者像园丁一样修剪、调整每个元素的属性。

属性与 DOM 的关系：静态与动态的桥梁

属性的双重身份

HTML 属性主要分为两类：静态属性（直接写在 HTML 标签中）和 动态属性（通过 JavaScript 修改的值）。例如：

<img src="logo.png" alt="公司标志" class="logo">

这里的 src、alt、class 是静态属性。当开发者通过 JavaScript 执行以下代码时：

document.querySelector("img").setAttribute("alt", "新标志");

alt 属性就变成了动态属性，其值被实时更新。

DOM 如何访问属性？

DOM 提供了两种访问属性的方式：

  1. 直接属性访问：通过元素对象的属性名直接读写（如 element.id）
  2. API 方法：使用 getAttribute()、setAttribute() 等方法操作

这两种方式的区别类似于直接访问仓库货架（直接属性）和通过工作人员（API 方法）调取货物。直接访问更快速，但仅支持部分标准属性；API 方法则能处理所有自定义属性。

常见 HTML DOM Attributes 属性及其用法

基础属性详解

以下是一些高频使用的属性及其作用：

属性名描述典型用法示例
id元素唯一标识符<div id="header"></div>
class元素类别标识符（可重复）<p class="warning important">
style行内样式定义<span style="color: red;">
src图像/媒体资源路径<img src="image.jpg">
href超链接目标地址<a href="https://example.com">
disabled控制表单元素是否可用<button disabled>提交</button>

动态操作属性的 3 大核心方法

1. getAttribute()：读取属性值

// 获取元素的 class 属性值
const element = document.getElementById("myDiv");
const currentClass = element.getAttribute("class");
console.log(currentClass); // 输出 "warning important"

2. setAttribute()：修改或新增属性

// 将按钮的 disabled 属性设为 true
const button = document.querySelector("button");
button.setAttribute("disabled", true);

3. removeAttribute()：移除属性

// 移除元素的 style 属性
element.removeAttribute("style");

特殊属性的使用技巧

1. dataset：自定义数据属性

HTML5 引入的 data-* 属性允许开发者自定义存储数据：

<div data-user-id="12345" data-role="admin">用户信息</div>

通过 dataset 属性可便捷访问：

const userId = element.dataset.userId; // "12345"

2. classList：优雅操作 class 属性

// 添加/移除 class
element.classList.add("active");
element.classList.remove("hidden");
// 切换 class 状态
element.classList.toggle("expanded");

实战案例：动态网页交互构建

案例 1：动态修改元素样式

// 当鼠标悬停时改变按钮颜色
document.querySelector("button").addEventListener("mouseover", () => {
  this.style.backgroundColor = "#4CAF50";
});

案例 2：表单验证与属性控制

function validateForm() {
  const input = document.getElementById("username");
  if (input.value.trim() === "") {
    input.setAttribute("class", "invalid");
    input.setCustomValidity("用户名不能为空");
    return false;
  }
  return true;
}

案例 3：动态加载图片

const imgElement = document.createElement("img");
imgElement.setAttribute("src", "https://example.com/image.jpg");
imgElement.setAttribute("alt", "动态加载的图片");
document.body.appendChild(imgElement);

进阶技巧与注意事项

1. 属性 vs 特性（Properties）

需要注意的是，DOM 中的某些属性（如 checked）对应的是特性（properties），而非直接的属性值。例如：

const checkbox = document.querySelector("input[type=checkbox]");
console.log(checkbox.checked); // 返回布尔值（特性）
console.log(checkbox.getAttribute("checked")); // 返回字符串 "checked"

2. 浏览器兼容性

  • 对于旧版浏览器，需注意 dataset 的兼容性处理
  • 使用 getAttribute() 时，始终返回字符串类型，需手动转换数值类型

3. 性能优化建议

  • 避免频繁修改 style 属性，改用 class 切换
  • 使用 closest() 替代多层 parentNode 遍历
  • 对大量 DOM 操作使用 documentFragment 缓存

结论：掌握属性操作的五大价值

通过深入理解 HTML DOM Attributes 属性，开发者能够：

  1. 实现动态内容更新：实时修改文本、样式、链接等元素特征
  2. 构建交互逻辑：通过事件触发属性变化，创造流畅用户体验
  3. 增强数据存储能力：利用 data-* 属性实现轻量级数据存储
  4. 提升代码可维护性：通过 class 管理和模块化属性操作
  5. 突破静态网页限制：将网页从"展示容器"转化为"交互平台"

建议读者通过以下步骤实践：

  1. 从基础属性开始，编写简单的样式切换案例
  2. 使用浏览器开发者工具实时观察属性变化
  3. 结合事件监听实现综合交互功能
  4. 参考 MDN 文档深入理解特定属性细节

掌握 HTML DOM Attributes 属性，就如同掌握了打开动态网页世界的钥匙。随着实践的深入，开发者将能构建出响应用户行为、适应各种场景的智能网页应用。

最新发布

查看更多文章