id和class属性的使用

id和class属性的基本概念

id和class是HTML中最常用的两个全局属性，用于标识和选择元素。id属性指定元素的唯一标识符，而class属性用于指定元素的一个或多个类名。它们在CSS样式化和JavaScript操作中都扮演着重要角色。

<div id="header" class="main-section highlighted">
  <!-- 内容 -->
</div>

id属性的特性与用法

id属性在文档中必须是唯一的，不能重复。它通常用于标识页面中的特定元素，具有以下几个特点：

1. 唯一性：同一文档中不能有两个相同id的元素
2. 高特异性：在CSS中，id选择器的权重高于class选择器
3. JavaScript访问：常用于通过document.getElementById()获取元素

<section id="user-profile">
  <h2>用户信息</h2>
  <p>用户名: example</p>
</section>

<script>
  const profileSection = document.getElementById('user-profile');
  profileSection.style.backgroundColor = '#f5f5f5';
</script>

class属性的特性与用法

class属性可以重复使用，一个元素可以有多个class，它们之间用空格分隔。主要特点包括：

1. 可复用性：同一class可应用于多个元素
2. 组合性：一个元素可以有多个class
3. 样式共享：便于统一管理相似元素的样式

<button class="btn primary large">主要按钮</button>
<button class="btn secondary">次要按钮</button>
<button class="btn small">小按钮</button>

<style>
  .btn {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
  }
  .primary {
    background-color: blue;
    color: white;
  }
  .secondary {
    background-color: gray;
  }
  .large {
    padding: 12px 24px;
    font-size: 1.2em;
  }
  .small {
    padding: 4px 8px;
    font-size: 0.8em;
  }
</style>

id和class在CSS中的选择器

在CSS中，id选择器使用#前缀，class选择器使用.前缀。它们的权重不同，会影响样式的优先级。

/* id选择器 - 权重更高 */
#navigation {
  background-color: #333;
}

/* class选择器 */
.menu-item {
  color: white;
  padding: 10px;
}

/* 组合选择器 */
#navigation .menu-item.active {
  background-color: #555;
}

JavaScript中的id和class操作

JavaScript提供了多种方法来操作具有特定id或class的元素：

// 通过id获取元素
const header = document.getElementById('header');

// 通过class获取元素集合
const buttons = document.getElementsByClassName('btn');

// 现代选择器方法
const primaryButton = document.querySelector('.btn.primary');
const allButtons = document.querySelectorAll('.btn');

// 添加/移除class
header.classList.add('fixed');
header.classList.remove('old-style');
header.classList.toggle('dark-mode');

实际应用场景对比

适合使用id的场景

1. 页面主要结构区块（页眉、页脚等）
2. 需要JavaScript直接操作的唯一元素
3. 表单元素与其标签的关联

<label for="username-input">用户名</label>
<input type="text" id="username-input" name="username">

适合使用class的场景

1. 可复用的样式组件
2. 状态标记（active, disabled等）
3. 一组需要统一处理的元素

<ul class="product-list">
  <li class="product-item featured">
    <h3>优质商品</h3>
  </li>
  <li class="product-item on-sale">
    <h3>特价商品</h3>
  </li>
</ul>

命名规范与最佳实践

良好的命名习惯能提高代码可维护性：

1. 使用语义化名称（避免presentational names）
2. 小写字母，单词间用连字符连接
3. 避免过于笼统的名称

<!-- 不推荐 -->
<div id="div1" class="red big-box"></div>

<!-- 推荐 -->
<div id="user-profile-card" class="card premium-user"></div>

性能考量

虽然现代浏览器性能优异，但在大型应用中仍需注意：

1. 避免过度使用id选择器（特异性太高难以覆盖）
2. 复杂的class组合可能影响渲染性能
3. 使用class进行批量操作比单独操作id更高效

// 较高效 - 批量操作
const items = document.querySelectorAll('.list-item');
items.forEach(item => {
  item.classList.add('highlight');
});

// 较低效 - 单独操作多个id
const item1 = document.getElementById('item1');
const item2 = document.getElementById('item2');
// ...逐个操作

响应式设计中的应用

class常用于响应式设计，通过媒体查询或JavaScript添加/移除class来实现不同布局：

<div class="grid-container mobile-stack">
  <!-- 内容 -->
</div>

<style>
  @media (max-width: 768px) {
    .mobile-stack {
      flex-direction: column;
    }
  }
</style>

框架中的特殊用法

现代前端框架对class和id有扩展用法：

React中的className

function Button({ primary, children }) {
  return (
    <button className={`btn ${primary ? 'primary' : ''}`}>
      {children}
    </button>
  );
}

Vue的class绑定

<template>
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>

可访问性相关考虑

正确使用id和class可以提升可访问性：

1. 使用id关联表单标签
2. 通过class表示状态变化（如aria-hidden）
3. 避免仅靠class来传达重要信息

<div class="alert" role="alert" id="error-message">
  发生错误，请重试
</div>
<label for="email">邮箱</label>
<input type="email" id="email" class="valid">