<div id="box" class="container" data-index="1">測試div</div>

<script>
  const box = document.getElementById('box');

  // 1. 獲取屬性
  console.log(box.getAttribute('id')); // 輸出：box
  console.log(box.getAttribute('class')); // 輸出：container
  console.log(box.getAttribute('data-index')); // 輸出：1（自定義屬性）

  // 2. 設(shè)置/新增屬性
  box.setAttribute('title', '這是一個div'); // 新增title屬性
  box.setAttribute('class', 'new-container'); // 修改class屬性
  box.setAttribute('data-type', 'test'); // 新增自定義data屬性

  // 3. 刪除屬性
  box.removeAttribute('data-index'); // 刪除data-index屬性

  // 查看修改后的HTML：<div id="box" class="new-container" data-type="test" title="這是一個div">測試div</div>
  console.log(box.outerHTML);
</script>

<img id="img" src="old.jpg" alt="舊圖片">
<input type="text" id="input" class="form-input" readonly>
<label for="input" id="label">輸入框：</label>

<script>
  const img = document.getElementById('img');
  const input = document.getElementById('input');
  const label = document.getElementById('label');

  // 1. 獲取屬性
  console.log(img.src); // 輸出：完整的圖片URL（如http://xxx/old.jpg）
  console.log(input.className); // 輸出：form-input（對應(yīng)class屬性）
  console.log(label.htmlFor); // 輸出：input（對應(yīng)for屬性）
  console.log(input.readOnly); // 輸出：true（布爾值，不是字符串）

  // 2. 設(shè)置屬性
  img.src = 'new.jpg'; // 修改圖片地址
  img.alt = '新圖片'; // 修改alt屬性
  input.className = 'new-form-input'; // 修改class
  input.readOnly = false; // 取消只讀

  // 3. 清空屬性（部分屬性可直接賦值為空）
  img.alt = '';
</script>

<div id="demo" class="box">測試樣式</div>

<script>
  const demo = document.getElementById('demo');

  // 1. 添加類（不會覆蓋原有類）
  demo.classList.add('active', 'red'); // 可同時加多個類

  // 2. 移除類
  demo.classList.remove('box');

  // 3. 切換類（有則刪，無則加，適合點(diǎn)擊切換場景）
  demo.classList.toggle('active');

  // 4. 判斷是否包含某個類
  console.log(demo.classList.contains('red')); // 輸出：true
</script>

<div id="user" data-id="1001" data-user-name="張三">用戶信息</div>

<script>
  const user = document.getElementById('user');

  // 1. 獲取data屬性（自動轉(zhuǎn)駝峰：data-user-name → userName）
  console.log(user.dataset.id); // 輸出：1001
  console.log(user.dataset.userName); // 輸出：張三

  // 2. 設(shè)置data屬性
  user.dataset.age = '20'; // 新增data-age="20"
  user.dataset.userName = '李四'; // 修改data-user-name="李四"

  // 3. 刪除data屬性（賦值為null或delete）
  delete user.dataset.age;
</script>

<input type="checkbox" id="checkbox" checked>
<button id="btn" disabled>禁用按鈕</button>

<script>
  const checkbox = document.getElementById('checkbox');
  const btn = document.getElementById('btn');

  // 獲取布爾屬性
  console.log(checkbox.checked); // 輸出：true
  console.log(btn.disabled); // 輸出：true

  // 修改布爾屬性
  checkbox.checked = false; // 取消勾選
  btn.disabled = false; // 啟用按鈕
</script>

<img id="banner" src="banner1.jpg" alt="輪播圖1">
<button id="changeBtn">切換圖片</button>

<script>
  const banner = document.getElementById('banner');
  const changeBtn = document.getElementById('changeBtn');
  let isFirst = true;

  changeBtn.addEventListener('click', function() {
    if (isFirst) {
      banner.src = 'banner2.jpg';
      banner.alt = '輪播圖2';
    } else {
      banner.src = 'banner1.jpg';
      banner.alt = '輪播圖1';
    }
    isFirst = !isFirst;
  });
</script>

<input type="text" id="username" placeholder="請輸入用戶名" maxlength="10">
<button id="checkBtn">查看屬性</button>

<script>
  const username = document.getElementById('username');
  const checkBtn = document.getElementById('checkBtn');

  checkBtn.addEventListener('click', function() {
    // 獲取輸入框?qū)傩?
    console.log('占位符：', username.placeholder);
    console.log('最大長度：', username.maxLength);
    console.log('當(dāng)前值：', username.value);

    // 修改屬性
    username.placeholder = '請輸入真實(shí)姓名';
    username.maxLength = 15;
  });
</script>