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`属性：

// 获取属性
const img = document.getElementById('myImage');
console.log(img.src); // 输出: 完整URL路径

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

核心属性详解

1. innerHTML vs textContent

属性	描述	示例
innerHTML	解析HTML标签	element.innerHTML = 'Hello'
textContent	忽略HTML标签	element.textContent = 'Hello'

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

2. 自定义属性（data-*）

HTML5允许通过dataset访问自定义属性：

<div id="user" data-user-id="123" data-role="admin"></div>

const user = document.getElementById('user');
console.log(user.dataset.userId); // "123"
user.dataset.role = 'guest'; // 动态修改

样式属性操作

通过style对象直接修改CSS：

const title = document.getElementById('title');
title.style.color = 'blue';
title.style.fontSize = '24px'; // 注意驼峰命名

实际案例：动态表单验证

以下代码利用DOM属性实现实时输入验证：

<input type="text" id="username" required minlength="3">
<p id="error" style="color: red;"></p>

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';
  }
});

属性访问方法对比

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

方法对比示例

const link = document.querySelector('a');

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

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

数学公式辅助说明

属性操作的时间复杂度通常为O(1)，因为DOM使用哈希表存储属性： $T(n)=O(1)$

总结

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