编辑“︁HTML属性操作”︁

= HTML属性操作 =

HTML属性操作是JavaScript与HTML交互的核心技术之一，它允许开发者动态修改HTML元素的属性，从而实现页面内容的实时更新和交互功能。本教程将详细介绍如何使用JavaScript操作HTML属性，包括获取、设置、删除属性以及处理自定义数据属性。

== 基本概念 ==
HTML属性是HTML元素提供的额外信息，通常以键值对的形式出现在元素的开始标签中。例如：
<syntaxhighlight lang="html">
<input type="text" id="username" class="input-field" disabled>
</syntaxhighlight>
其中：
* '''type'''、'''id'''、'''class'''和'''disabled'''都是属性
* '''type="text"'''表示这是一个文本输入框
* '''disabled'''是一个布尔属性，不需要值

JavaScript提供了多种方法来操作这些属性。

== 标准属性操作 ==

=== 直接属性访问 ===
DOM元素对象提供了对标准HTML属性的直接访问：
<syntaxhighlight lang="javascript">
// 获取元素
const input = document.getElementById('username');

// 读取属性
console.log(input.id); // 输出: "username"
console.log(input.type); // 输出: "text"

// 修改属性
input.type = 'password';
input.disabled = true;
</syntaxhighlight>

=== getAttribute() 和 setAttribute() ===
更通用的方法是使用：
<syntaxhighlight lang="javascript">
// 获取属性值
const className = input.getAttribute('class'); // "input-field"

// 设置属性
input.setAttribute('placeholder', '请输入用户名');
input.setAttribute('data-custom', 'value');
</syntaxhighlight>

== 布尔属性处理 ==
布尔属性（如disabled、checked等）有特殊处理方式：
<syntaxhighlight lang="javascript">
const checkbox = document.querySelector('#myCheckbox');

// 正确方式
checkbox.checked = true; // 勾选复选框
checkbox.disabled = false; // 启用元素

// 也可以使用setAttribute/removeAttribute
checkbox.setAttribute('disabled', ''); // 禁用
checkbox.removeAttribute('disabled'); // 启用
</syntaxhighlight>

== 自定义数据属性 ==
HTML5引入了'''data-*'''属性，用于存储自定义数据：
<syntaxhighlight lang="html">
<div id="product" data-id="123" data-price="19.99" data-in-stock="true"></div>
</syntaxhighlight>

JavaScript访问方式：
<syntaxhighlight lang="javascript">
const product = document.getElementById('product');

// 传统方法
console.log(product.getAttribute('data-price')); // "19.99"

// dataset API（推荐）
console.log(product.dataset.id); // "123"
console.log(product.dataset.price); // "19.99"
console.log(product.dataset.inStock); // "true"

// 修改数据
product.dataset.price = "24.99";
product.dataset.newAttr = "value"; // 自动转换为data-new-attr
</syntaxhighlight>

== 属性 vs 属性 ==
理解HTML'''属性'''和DOM'''属性'''的区别很重要：

<mermaid>
graph LR
    A[HTML属性] -->|初始设置| B[DOM属性]
    B -->|可能影响| C[页面呈现]
    B -->|不一定同步| A
</mermaid>

重要区别：
* HTML属性是HTML源代码中的值
* DOM属性是JavaScript中对象属性的当前状态
* 某些属性是同步的（如id），有些不是（如value）

== 样式操作 ==
虽然严格来说不是属性操作，但样式修改常与属性操作结合使用：
<syntaxhighlight lang="javascript">
const element = document.getElementById('myElement');

// 直接修改style属性
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';

// 通过classList操作类
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('highlight');
</syntaxhighlight>

== 实际应用案例 ==

=== 动态表单验证 ===
<syntaxhighlight lang="html">
<input type="email" id="emailInput" required>
<span id="emailError" style="display:none;color:red;">请输入有效的邮箱地址</span>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
const emailInput = document.getElementById('emailInput');
const errorSpan = document.getElementById('emailError');

emailInput.addEventListener('blur', () => {
    if (!emailInput.checkValidity()) {
        emailInput.setAttribute('aria-invalid', 'true');
        errorSpan.style.display = 'block';
    } else {
        emailInput.removeAttribute('aria-invalid');
        errorSpan.style.display = 'none';
    }
});
</syntaxhighlight>

=== 图片切换器 ===
<syntaxhighlight lang="html">
<img id="galleryImage" src="image1.jpg" data-current-index="0">
<button onclick="nextImage()">下一张</button>
</syntaxhighlight>

<syntaxhighlight lang="javascript">
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

function nextImage() {
    const img = document.getElementById('galleryImage');
    let currentIndex = parseInt(img.dataset.currentIndex);
    currentIndex = (currentIndex + 1) % images.length;
    
    img.src = images[currentIndex];
    img.dataset.currentIndex = currentIndex;
}
</syntaxhighlight>

== 性能考虑 ==
频繁操作DOM属性会影响性能，优化建议：
* 批量修改属性时，使用DocumentFragment或克隆节点
* 对隐藏元素（display:none）进行操作可以减少重绘
* 使用class而不是直接修改style属性

== 总结 ==
HTML属性操作是动态网页开发的基础技能。关键点包括：
* 使用标准方法（getAttribute/setAttribute）或直接属性访问
* 正确处理布尔属性
* 利用dataset API处理自定义数据
* 理解属性与DOM属性的区别
* 结合样式操作创建丰富交互

掌握这些技术将大大增强您创建交互式网页的能力。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML与JavaScript交互]]