DOM属性是什么？

一、DOM属性的核心作用

• 修改文本内容：`element.textContent = "新文本"`
• 调整样式：`element.style.color = "red"`
• 绑定事件：`element.onclick = () => alert("点击了")` 这些操作通过DOM属性直接作用于元素，实现页面的动态交互。

  二、DOM属性的类型

  1. 标准属性内置属性

  HTML规范定义的元素自带属性，如`id`、`class`、`src`、`value`等，在DOM中对应元素节点的同名属性。例如：
  • 获取元素ID：`const id = element.id`
  • 设置图片地址：`img.src = "new.jpg"` 标准属性与HTML标签属性名称基本一致，但部分存在大小写差异如HTML的`class`对应DOM的`className`。

    2. 自定义属性Data属性

    开发者通过`data-*`前缀定义的属性如`data-user`，需通过`dataset`对象访问。例如：
    • HTML标签：``
    • JS访问：`const age = element.dataset.age`返回"20"
    • 修改：`element.dataset.age = "21"`

      三、DOM属性与HTML属性的区别

      DOM属性与HTML属性HTML Attribute并非全等同：
      • HTML属性是标签上定义的初始值如``，通过`element.getAttribute("value")`获取，且值始终为符串。
      • DOM属性是元素对象的实时状态如输入框输入后，`element.value`为当前输入值，类型可能为符串、布尔值等如`checkbox.checked`为布尔值。 例如：在``中输入"456"，`element.value`返回"456"，而`element.getAttribute("value")`仍返回"123"。

        四、常见DOM属性操作示例

        • 获取/修改文本：`element.textContent`纯文本、`element.innerHTML`带HTML标签的文本
        • 操作样式：`element.style`内联样式、`element.classList`类名列表，如`classList.add("active")`
        • 表单元素：`input.value`输入值、`select.selectedIndex`选中项索引
        • 事件属性：`element.onload`、`element.onmouseover`可直接赋值函数 DOM属性是连接JavaScript与页面元素的桥梁，通过它能精准元素的状态和行为，是实现动态网页交互的基础。