跟着 MDN 学 HTML day_27：（深入理解 HTML 属性反射机制）

引言

在操作 DOM 元素时，开发者经常需要在 JavaScript 中读取或修改 HTML 属性的值。虽然可以通过 getAttribute 和 setAttribute 方法来完成这些操作，但浏览器为许多常用属性提供了更便捷的访问方式------属性反射。属性反射是指在对应的 DOM 接口上暴露一个 JavaScript 属性，该属性与 HTML 特性保持双向同步。本文将系统性地介绍属性反射的工作机制、不同类型属性的反射行为，以及在涉及元素引用时的特殊规则。

一、传统的属性操作方法

在了解属性反射之前，先回顾一下操作属性的默认方式。Element 接口提供了 getAttribute 和 setAttribute 方法，无论属性是否被反射，这两个方法始终可用。

<input placeholder="原始占位文本" />
<br />
<button id="btn">修改占位文本</button>

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

  // 使用 getAttribute 获取属性值
  let currentPlaceholder = input.getAttribute('placeholder');
  console.log('当前占位文本：', currentPlaceholder); // "原始占位文本"

  // 使用 setAttribute 设置属性值
  btn.addEventListener('click', () => {
    input.setAttribute('placeholder', '修改后的占位文本');
    console.log('修改后：', input.getAttribute('placeholder'));
  });

  // getAttribute 在没有该属性时返回 null
  console.log(input.getAttribute('data-nonexistent')); // null
</script>

这种传统方法的特点是函数调用形式，需要传入属性名字符串。虽然功能完备，但在频繁操作时略显繁琐，且属性名是以字符串形式硬编码的，无法享受代码补全等编辑器功能的便利。

二、属性反射的基本概念

属性反射意味着属性值与对应的 JavaScript 对象属性之间建立了双向绑定关系。以 input 元素的 placeholder 为例，HTMLInputElement 接口上有一个同名的 placeholder 属性，操作该属性等价于操作特性本身。

<input placeholder="原始占位文本" />
<br />
<button id="reflect-btn">通过反射属性修改</button>

<script>
  const input = document.querySelector('input');
  const reflectBtn = document.getElementById('reflect-btn');

  // 通过反射属性读取
  console.log(input.placeholder); // "原始占位文本"

  // 通过反射属性设置
  reflectBtn.addEventListener('click', () => {
    input.placeholder = '通过反射属性设置的新文本';
  });

  // 验证双向绑定：手动修改 DOM 属性后，反射属性也会同步
  input.setAttribute('placeholder', '通过 setAttribute 设置');
  console.log(input.placeholder); // "通过 setAttribute 设置"

  // 反之，修改反射属性也会同步到 DOM 特性
  input.placeholder = '再次通过反射属性修改';
  console.log(input.getAttribute('placeholder')); // "再次通过反射属性修改"
</script>

反射属性名通常遵循驼峰命名法。当原始属性名包含连字符时，反射属性名会将连字符后的字母大写。例如，aria-checked 属性对应的反射属性是 ariaChecked。

<div role="checkbox" aria-checked="true" tabindex="0">可聚焦的复选框</div>

<script>
  const div = document.querySelector('div');

  // 注意名称转换：aria-checked 变为 ariaChecked
  console.log(div.ariaChecked); // "true"

  // 通过反射属性修改 ARIA 状态
  div.ariaChecked = "false";
  console.log(div.getAttribute('aria-checked')); // "false"

  // 常见的多单词属性转换规则
  // tabindex  -> tabIndex
  // readonly  -> readOnly
  // maxlength -> maxLength
  console.log(div.tabIndex); // 0
</script>

这种命名规则使得在 JavaScript 中操作 HTML 属性时更加自然，也符合 JavaScript 语言本身的编码习惯。

三、布尔类型属性的反射

布尔属性是一种特殊的 HTML 属性，它们不需要显式地声明值。只要属性出现在元素上，就表示该属性为 true。常见的布尔属性包括 checked、disabled、readonly、required 等。

<label>
  <input type="checkbox" id="agree" checked /> 我同意条款
</label>
<br />
<label>
  <input type="checkbox" id="newsletter" /> 订阅新闻简报
</label>

<script>
  const agreeCheckbox = document.getElementById('agree');
  const newsletterCheckbox = document.getElementById('newsletter');

  // 布尔属性的 getAttribute 返回值
  console.log(agreeCheckbox.getAttribute('checked'));    // ""（空字符串）
  console.log(newsletterCheckbox.getAttribute('checked')); // null

  // 反射属性的返回值是真正的布尔值
  console.log(agreeCheckbox.checked);      // true
  console.log(newsletterCheckbox.checked); // false

  // 通过反射属性切换状态
  newsletterCheckbox.checked = true;
  console.log(newsletterCheckbox.getAttribute('checked')); // ""（属性被添加）
  console.log(newsletterCheckbox.checked);                  // true

  // 取消选中
  agreeCheckbox.checked = false;
  console.log(agreeCheckbox.getAttribute('checked')); // null（属性被移除）
  console.log(agreeCheckbox.checked);                  // false
</script>

布尔反射属性的核心优势在于它返回的是真正的布尔值，而不是空字符串或 null。这使得在条件判断中可以直接使用，无需进行额外的类型转换。

四、枚举类型属性的反射

HTML 中存在一类属性，它们的值只能从预定义的有限集合中选取，这类属性称为枚举属性。一个典型的例子是全局属性 dir，它只有 ltr、rtl 和 auto 三个有效值。

<p id="para-ltr" dir="ltr">从左到右的文本</p>
<p id="para-rtl" dir="rtl">从右到左的文本</p>
<p id="para-mixed" dir="RTL">使用大写的 RTL</p>

<script>
  const paraLtr = document.getElementById('para-ltr');
  const paraRtl = document.getElementById('para-rtl');
  const paraMixed = document.getElementById('para-mixed');

  // 枚举反射属性返回规范化的值（小写）
  console.log(paraLtr.dir);   // "ltr"
  console.log(paraRtl.dir);   // "rtl"
  console.log(paraMixed.dir); // "rtl"（自动规范化为小写）

  // getAttribute 返回原始 HTML 中的值
  console.log(paraMixed.getAttribute('dir')); // "RTL"

  // 设置反射属性时也会自动规范化为小写
  paraMixed.dir = "LTR";
  console.log(paraMixed.dir);                    // "ltr"
  console.log(paraMixed.getAttribute('dir'));    // "ltr"
</script>

这种规范化行为确保了通过反射属性读取到的值始终符合规范定义的标准形式，避免了大小写差异导致的逻辑判断问题。HTML 枚举属性值在 HTML 层面是不区分大小写的，但反射属性会将其统一为规范形式。

五、元素引用属性的反射概述

某些 ARIA 属性接受元素引用作为值，例如 aria-labelledby 和 aria-describedby。它们的属性值是一个或多个元素的 id，用空格分隔。这些属性被反射为包含对应 HTMLElement 对象的数组。

<span id="label-1">第一段标签文本</span>
<span id="label-2">第二段标签文本</span>
<!-- 注意：label-3 在当前 DOM 中不存在 -->
<input id="my-input" aria-labelledby="label-1 label-2 label-3" />

<script>
  const inputElement = document.getElementById('my-input');

  // 通过 getAttribute 获取原始字符串
  console.log(inputElement.getAttribute('aria-labelledby'));
  // "label-1 label-2 label-3"

  // 通过反射属性获取元素数组
  console.log(inputElement.ariaLabelledByElements);
  // [span#label-1, span#label-2]
  // 注意：label-3 对应的元素不存在，因此数组中只有两个元素

  // 遍历反射属性数组获取实际的文本内容
  const accessibleName = inputElement.ariaLabelledByElements
    .map(el => el.textContent.trim())
    .join(' ');
  console.log('无障碍名称：', accessibleName);
  // "第一段标签文本 第二段标签文本"
</script>

反射属性数组只包含在当前作用域中实际存在的元素。在 HTML 中写了但 DOM 中不存在的 id 引用会被自动过滤掉，这使得通过反射属性遍历相关元素更加安全可靠。

六、元素引用属性的作用域规则

元素引用的作用域是一个比较复杂的话题。HTML 属性中的 id 引用只能在声明该 id 的同一个 DOM 或 Shadow DOM 中有效。而反射属性 ARIA 元素引用的作用域规则略有不同：目标元素可以位于引用元素所在的 DOM 或其父级 DOM 中，但不能位于嵌套的子 Shadow DOM 中。

首先来看 HTML 属性的 id 引用作用域：

<div id="outer-scope">
  <span id="label-x">外部标签 X</span>
</div>

<div id="shadow-host">
  <!-- 其内部有一个 Shadow DOM，结构如下：
    <span id="label-y">内部标签 Y</span>
    <input aria-labelledby="label-x label-y" />
  -->
</div>

<script>
  const shadowHost = document.getElementById('shadow-host');
  const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
  shadowRoot.innerHTML = `
    <span id="label-y">内部标签 Y</span>
    <input id="shadow-input" aria-labelledby="label-x label-y" />
  `;

  const shadowInput = shadowRoot.getElementById('shadow-input');

  // HTML 属性中的 id 引用：label-x 和 label-y 在同一个 Shadow DOM 中吗？
  // label-x 在外部 DOM 中，对于 Shadow DOM 内的元素来说不在作用域内
  console.log(shadowInput.getAttribute('aria-labelledby'));
  // "label-x label-y"

  // 但通过反射属性查看时，label-x 是否会出现？
  // 取决于浏览器的实现，在大多数情况下：
  // label-x 在外部 DOM，不在同一个 shadow root 中，可能被过滤
  console.log(shadowInput.ariaLabelledByElements.length);
  // 可能为 1（只有 label-y）
</script>

而反射属性的作用域规则允许跨 DOM 层级访问父级 DOM 中的元素：

<div id="parent-dom">
  <span id="label-parent">父级 DOM 中的标签</span>
</div>

<div id="child-host"></div>

<script>
  const childHost = document.getElementById('child-host');
  const childRoot = childHost.attachShadow({ mode: 'open' });
  childRoot.innerHTML = `
    <span id="label-child">子 Shadow DOM 中的标签</span>
    <input id="child-input" />
  `;

  const childInput = childRoot.getElementById('child-input');
  const parentLabel = document.getElementById('label-parent');
  const childLabel = childRoot.getElementById('label-child');

  // 反射属性允许引用父级 DOM 中的元素
  childInput.ariaLabelledByElements = [childLabel, parentLabel];
  console.log(childInput.ariaLabelledByElements.length); // 2
  console.log(childInput.ariaLabelledByElements[1].textContent);
  // "父级 DOM 中的标签"
</script>

理解这种作用域差异对于在复杂的 Web Components 应用中正确处理 ARIA 属性至关重要。反射属性的作用域比 HTML 属性的 id 引用作用域更宽松，允许向上访问祖先 DOM 中的元素。

七、设置属性与反射属性的关系断开与恢复

元素引用属性的反射有一个与其他属性显著不同的特性：当通过反射属性设置值时，原始 HTML 属性会被清空，两者之间的反射关系会暂时断开。

<span id="ref-a">引用 A</span>
<span id="ref-b">引用 B</span>
<input id="ref-input" aria-labelledby="ref-a ref-b" />

<script>
  const refInput = document.getElementById('ref-input');
  const refA = document.getElementById('ref-a');
  const refB = document.getElementById('ref-b');

  // 初始状态：属性和反射属性保持同步
  console.log(refInput.getAttribute('aria-labelledby'));  // "ref-a ref-b"
  console.log(refInput.ariaLabelledByElements.length);    // 2

  // 通过反射属性设置新值
  refInput.ariaLabelledByElements = [refA];
  // HTML 属性被清空
  console.log(refInput.getAttribute('aria-labelledby'));  // ""
  console.log(refInput.ariaLabelledByElements.length);    // 1

  // 通过 setAttribute 恢复反射关系
  refInput.setAttribute('aria-labelledby', 'ref-a ref-b');
  // 反射关系恢复
  console.log(refInput.getAttribute('aria-labelledby'));  // "ref-a ref-b"
  console.log(refInput.ariaLabelledByElements.length);    // 2
</script>

这种设计有其内在的合理性。通过反射属性赋值时，开发者可以传入任何 HTMLElement 对象，而这些对象可能没有 id 属性，因此无法在 HTML 属性中用字符串形式表示。断开反射关系避免了数据不一致的问题。当再次通过 setAttribute 设置 HTML 属性时，关系会自动恢复。

八、反射属性数组的静态特性

反射属性返回的数组是静态的，这意味着直接修改返回的数组不会影响对应的 HTML 属性，同时后续对 HTML 属性的修改也不会反映到之前获取的数组引用上。

<span id="static-a">静态引用 A</span>
<span id="static-b">静态引用 B</span>
<input id="static-input" aria-labelledby="static-a static-b" />

<script>
  const staticInput = document.getElementById('static-input');

  // 获取反射属性数组
  const firstSnapshot = staticInput.ariaLabelledByElements;
  console.log(firstSnapshot.length); // 2

  // 尝试通过修改数组来影响属性------这是无效的
  firstSnapshot.pop();
  console.log(firstSnapshot.length);                        // 1
  console.log(staticInput.ariaLabelledByElements.length);   // 2（不受影响）
  console.log(staticInput.getAttribute('aria-labelledby')); // "static-a static-b"（不受影响）

  // 对属性赋值时，数组会被复制
  const refA = document.getElementById('static-a');
  staticInput.ariaLabelledByElements = [refA];

  // 修改 HTML 属性后重新获取，才会得到新的数组
  staticInput.setAttribute('aria-labelledby', 'static-a static-b');
  const secondSnapshot = staticInput.ariaLabelledByElements;
  console.log(secondSnapshot.length); // 2
  console.log(firstSnapshot.length);  // 1（旧的引用不受影响）
</script>

这种静态特性意味着每次需要最新的元素引用时，都应该重新读取反射属性，而不是缓存之前的引用。对于需要频繁访问的场景，可以考虑将获取逻辑封装成一个函数。

总结

属性反射是 DOM API 中一项重要的设计，它让 JavaScript 与 HTML 属性之间的交互变得更加自然和高效。本文系统地梳理了以下几个核心要点：

传统的 getAttribute 和 setAttribute 方法是操作属性的基础手段，适用于所有属性。而对于常用的标准属性，反射机制提供了更便捷的访问途径。反射属性名采用驼峰命名法，自动处理连字符到驼峰的转换。布尔类型的反射属性返回真正的布尔值，而非空字符串或 null，极大简化了条件判断逻辑。枚举类型属性的反射值会自动规范化为标准形式，消除了大小写不一致带来的隐患。ARIA 元素引用属性的反射返回的是实际的 DOM 元素数组，并自动过滤不存在或不在作用域内的引用。元素引用的作用域规则在 HTML 属性层面和反射属性层面存在差异，反射属性允许跨父级 DOM 引用元素。设置元素引用反射属性会断开与 HTML 属性的同步关系，而通过 setAttribute 设置可以恢复这种关系。反射属性返回的数组是静态快照，不应缓存后直接修改。

掌握属性反射机制，不仅能让代码更加简洁优雅，也能帮助开发者在处理 Web Components 和无障碍特性时避免许多隐蔽的错误。

---

想要解锁更多HTML 核心标签实战、前端零基础入门干货、开发避坑全指南吗？
持续关注，后续将更新CSS 布局实战、JavaScript 交互基础、全站导航开发等硬核内容，带你从新手快速进阶，轻松搞定前端开发！