02. DOM 操作：选择元素、修改内容与样式

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

新品墙板展示卡片

当前状态：草稿

draft

三、知识点提醒

DOM 操作尽量集中在函数中，避免到处写重复修改逻辑。
`data-*` 适合把按钮动作、产品 ID 等信息写在 HTML 上。
修改样式优先切换 class，而不是写大量内联样式。

四、练习建议

给卡片增加图片并用 JS 修改 `src`。
增加一个“隐藏 / 显示详情”的按钮。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/02-dom-select-update.js，下面同步展示，方便学习和复制。

// 页面 02：DOM 选择、内容更新、class 切换、dataset 使用
const card = document.querySelector('#p2-card');
const title = document.querySelector('#p2-title');
const desc = document.querySelector('#p2-desc');
const tag = document.querySelector('#p2-tag');
const actionButtons = document.querySelectorAll('[data-action]');

function setCardStatus(status, message) {
  card.dataset.status = status;
  tag.textContent = status;
  desc.textContent = `当前状态：${message}`;

  card.classList.remove('active');
  if (status === 'featured') {
    card.classList.add('active');
  }
}

actionButtons.forEach((button) => {
  button.addEventListener('click', () => {
    const action = button.dataset.action;

    if (action === 'publish') {
      title.textContent = '已发布：新品墙板展示卡片';
      setCardStatus('published', '已发布，可在前台展示');
    }

    if (action === 'feature') {
      title.textContent = '重点推荐：新品墙板展示卡片';
      setCardStatus('featured', '重点推荐，获得高亮样式');
    }

    if (action === 'reset') {
      title.textContent = '新品墙板展示卡片';
      setCardStatus('draft', '草稿');
    }
  });
});