编辑“︁JavaScript DOM属性”︁

= JavaScript DOM属性 =

== 介绍 ==
'''DOM属性'''（Document Object Model Properties）是JavaScript与HTML文档交互的核心机制之一，通过操作DOM元素的属性，开发者可以动态修改网页内容、样式和行为。DOM属性分为'''固有属性'''（如`id`、`className`）和'''自定义属性'''（如`data-*`）。本章将详细解析其分类、用法及实际应用。

== 属性分类 ==
DOM属性可分为以下几类：
* '''标准属性'''：HTML元素原生支持的属性（如`src`、`href`）。
* '''自定义属性'''：以`data-`开头的属性（如`data-user-id`）。
* '''样式属性'''：通过`style`对象访问的CSS属性（如`style.color`）。
* '''特殊属性'''：如`innerHTML`、`textContent`等。

=== 标准属性示例 ===
以下代码演示如何获取和设置`<img>`的`src`属性：
<syntaxhighlight lang="javascript">
// 获取属性
const img = document.getElementById('myImage');
console.log(img.src); // 输出: 完整URL路径

// 设置属性
img.src = 'new-image.jpg'; // 修改图片源
</syntaxhighlight>

== 核心属性详解 ==
=== 1. innerHTML vs textContent ===
{| class="wikitable"
|-
! 属性 !! 描述 !! 示例
|-
| <code>innerHTML</code> || 解析HTML标签 || <code>element.innerHTML = '<b>Hello</b>'</code>
|-
| <code>textContent</code> || 忽略HTML标签 || <code>element.textContent = '<b>Hello</b>'</code>
|}

<syntaxhighlight lang="javascript">
const div = document.querySelector('div');
div.innerHTML = '<em>斜体文本</em>'; // 渲染为斜体
div.textContent = '<em>普通文本</em>'; // 输出原始字符串
</syntaxhighlight>

=== 2. 自定义属性（data-*） ===
HTML5允许通过<code>dataset</code>访问自定义属性：
<syntaxhighlight lang="html">
<div id="user" data-user-id="123" data-role="admin"></div>
</syntaxhighlight>
<syntaxhighlight lang="javascript">
const user = document.getElementById('user');
console.log(user.dataset.userId); // "123"
user.dataset.role = 'guest'; // 动态修改
</syntaxhighlight>

== 样式属性操作 ==
通过<code>style</code>对象直接修改CSS：
<syntaxhighlight lang="javascript">
const title = document.getElementById('title');
title.style.color = 'blue';
title.style.fontSize = '24px'; // 注意驼峰命名
</syntaxhighlight>

== 实际案例：动态表单验证 ==
以下代码利用DOM属性实现实时输入验证：
<syntaxhighlight lang="html">
<input type="text" id="username" required minlength="3">
<p id="error" style="color: red;"></p>
</syntaxhighlight>
<syntaxhighlight lang="javascript">
const input = document.getElementById('username');
const error = document.getElementById('error');

input.addEventListener('input', () => {
  if (input.value.length < 3) {
    error.textContent = '用户名至少3个字符';
    input.style.border = '2px solid red';
  } else {
    error.textContent = '';
    input.style.border = '1px solid green';
  }
});
</syntaxhighlight>

== 属性访问方法对比 ==
<mermaid>
flowchart TD
    A[访问属性] --> B[直接属性访问 element.id]
    A --> C[getAttribute/setAttribute]
    B --> D[仅限标准属性]
    C --> E[支持任意属性]
</mermaid>

=== 方法对比示例 ===
<syntaxhighlight lang="javascript">
const link = document.querySelector('a');

// 直接访问
console.log(link.href); // 完整URL

// getAttribute
console.log(link.getAttribute('href')); // 原始值
</syntaxhighlight>

== 数学公式辅助说明 ==
属性操作的时间复杂度通常为O(1)，因为DOM使用哈希表存储属性：
<math>
T(n) = O(1)
</math>

== 总结 ==
* DOM属性是动态网页开发的基础工具。
* 区分标准属性与自定义属性的使用场景。
* 优先使用<code>dataset</code>而非非标准自定义属性。
* 样式修改推荐使用<code>classList</code>而非直接操作<code>style</code>。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript DOM]]