跟着 MDN 学 HTML day_33：（Attr 接口与属性节点的深入理解）

Attr 接口表示元素属性的对象形式。在日常开发中，我们通常使用 getAttribute 等方法直接以字符串形式获取属性值，但在某些场景下，需要以节点形式操作属性时，Attr 接口就派上了用场。

一、Attr 接口的基本概念

Attr 对象代表 DOM 元素的一个属性节点。每个属性都有名称和值，还可能属于某个命名空间。Attr 继承自 Node 接口，因此它可以被视为 DOM 树中的一个节点类型。

// 演示 Attr 对象的基本获取方式
function demonstrateAttrBasics() {
  // 创建一个带属性的元素
  const div = document.createElement('div');
  div.id = 'myDiv';
  div.className = 'container active';
  div.setAttribute('data-custom', 'hello');
  div.setAttribute('title', '这是一个提示');
  document.body.appendChild(div);
  
  // 方式1：使用 getAttributeNode 获取 Attr 对象
  const idAttr = div.getAttributeNode('id');
  console.log('getAttributeNode 返回的类型:', idAttr instanceof Attr); // true
  console.log('id 属性节点:', idAttr);
  
  // 方式2：使用 attributes 属性获取所有属性节点
  const attributes = div.attributes;
  console.log('元素包含的属性数量:', attributes.length);
  
  for (let i = 0; i < attributes.length; i++) {
    const attr = attributes[i];
    console.log(`属性 ${i + 1}: 名称="${attr.name}", 值="${attr.value}"`);
  }
  
  // 方式3：从元素中获取
  const divElement = document.getElementById('myDiv');
  const titleAttr = divElement.attributes.getNamedItem('title');
  console.log('通过 getNamedItem 获取:', titleAttr?.value);
  
  // 比较 Attr 对象和 getAttribute 的区别
  const attrWay = div.getAttributeNode('data-custom');
  const stringWay = div.getAttribute('data-custom');
  
  console.log('getAttributeNode 返回:', attrWay); // Attr 对象
  console.log('getAttribute 返回:', stringWay); // "hello" 字符串
  
  // 清理
  div.remove();
}

function understandAttrInheritance() {
  const div = document.createElement('div');
  div.setAttribute('test', 'value');
  const attr = div.getAttributeNode('test');
  
  // Attr 继承自 Node，所以拥有 Node 的属性
  console.log('Attr 的 nodeType:', attr.nodeType); // 2 (ATTRIBUTE_NODE)
  console.log('Attr 的 nodeName:', attr.nodeName); // 属性名 "test"
  console.log('Attr 的 nodeValue:', attr.nodeValue); // 属性值 "value"
  
  // Attr 也继承自 EventTarget
  console.log('Attr 是否有 addEventListener:', typeof attr.addEventListener); // "function"
  
  div.remove();
}

demonstrateAttrBasics();
understandAttrInheritance();

Attr 对象是 Node 的一种特殊类型，其 nodeType 值为 2。与普通元素节点不同，Attr 节点不属于 DOM 树的直接组成部分，但它与所属元素有着紧密的关联。

二、Attr 的实例属性详解

Attr 接口提供了多个只读属性来描述属性的特征，以及一个可读写的 value 属性来操作属性值。

// 全面演示 Attr 的各个属性
function exploreAttrProperties() {
  // 创建一个带命名空间和普通属性的元素
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('class', 'icon');
  svg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#icon-heart');
  document.body.appendChild(svg);
  
  // 获取普通属性
  const classAttr = svg.getAttributeNode('class');
  console.log('=== 普通属性（无命名空间）===');
  console.log('localName:', classAttr.localName);   // "class"
  console.log('name:', classAttr.name);             // "class"
  console.log('namespaceURI:', classAttr.namespaceURI); // null
  console.log('prefix:', classAttr.prefix);         // null
  console.log('value:', classAttr.value);           // "icon"
  console.log('ownerElement:', classAttr.ownerElement); // svg 元素
  
  // 获取带命名空间的属性
  const xlinkAttr = svg.getAttributeNodeNS('http://www.w3.org/1999/xlink', 'href');
  if (xlinkAttr) {
    console.log('=== 带命名空间的属性 ===');
    console.log('localName:', xlinkAttr.localName);   // "href"
    console.log('name:', xlinkAttr.name);             // "xlink:href"
    console.log('namespaceURI:', xlinkAttr.namespaceURI); // "http://www.w3.org/1999/xlink"
    console.log('prefix:', xlinkAttr.prefix);         // "xlink"
  }
  
  // 演示 specified 属性（已废弃，总是返回 true）
  console.log('specified 属性值:', classAttr.specified); // true
  
  // 演示修改 value 属性
  console.log('修改前的值:', classAttr.value);
  classAttr.value = 'icon active large';
  console.log('修改后的元素属性:', svg.getAttribute('class')); // "icon active large"
  
  // 演示 name 和 localName 在普通属性中相同
  const normalAttr = svg.getAttributeNode('class');
  console.log('普通属性中 name === localName:', normalAttr.name === normalAttr.localName); // true
  
  svg.remove();
}

// 命名空间属性的详细说明
function namespaceExplanation() {
  // 创建一个使用命名空间的复杂示例
  const container = document.createElement('div');
  container.innerHTML = `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill="red" />
    </svg>
  `;
  document.body.appendChild(container);
  
  const svg = container.querySelector('svg');
  const allAttrs = svg.attributes;
  
  console.log('=== SVG 元素的属性 ===');
  for (let i = 0; i < allAttrs.length; i++) {
    const attr = allAttrs[i];
    console.log(`属性: ${attr.name}`);
    console.log(`  - localName: ${attr.localName}`);
    console.log(`  - namespaceURI: ${attr.namespaceURI || '(无)'}`);
    console.log(`  - prefix: ${attr.prefix || '(无)'}`);
  }
  
  container.remove();
}

exploreAttrProperties();
namespaceExplanation();

localName 和 name 的区别在于：name 包含命名空间前缀，而 localName 只包含本地名称。当属性没有命名空间时，两者相同。namespaceURI 可以帮助识别属性所属的特定标准，如 XLink、XML 等。

三、ownerElement 属性与双向关系

ownerElement 属性指向拥有该属性的元素。这个属性是只读的，当属性被从元素上移除时，ownerElement 变为 null。

// 演示 ownerElement 的使用
function demonstrateOwnerElement() {
  const div = document.createElement('div');
  div.id = 'testDiv';
  div.setAttribute('role', 'button');
  div.setAttribute('aria-label', '确认按钮');
  document.body.appendChild(div);
  
  // 获取属性节点
  const idAttr = div.getAttributeNode('id');
  const roleAttr = div.getAttributeNode('role');
  
  console.log('id 属性的 ownerElement:', idAttr.ownerElement); // div 元素
  console.log('role 属性的 ownerElement:', roleAttr.ownerElement); // div 元素
  console.log('ownerElement 是否相同:', idAttr.ownerElement === roleAttr.ownerElement); // true
  
  // 演示移除属性后 ownerElement 的变化
  console.log('移除前 ownerElement 是否存在:', !!idAttr.ownerElement);
  div.removeAttribute('id');
  console.log('移除后 ownerElement 是否存在:', !!idAttr.ownerElement); // false
  console.log('移除后属性值:', idAttr.value); // 值仍然保留，但不再属于任何元素
  
  // 将属性重新添加到另一个元素
  const newDiv = document.createElement('div');
  newDiv.setAttributeNode(idAttr);
  console.log('重新添加后 ownerElement:', idAttr.ownerElement); // newDiv
  console.log('新元素的 id:', newDiv.id); // "testDiv"
  
  // 使用 removeAttributeNode 获取被移除的属性
  const removedAttr = newDiv.removeAttributeNode(newDiv.getAttributeNode('id'));
  console.log('removeAttributeNode 返回的 Attr:', removedAttr);
  console.log('移除后 ownerElement:', removedAttr.ownerElement); // null
  
  div.remove();
  newDiv.remove();
}

// 属性与元素的关系操作
function attributeRelationshipOperations() {
  const button = document.createElement('button');
  button.textContent = '点击我';
  document.body.appendChild(button);
  
  // 创建一个新的 Attr 对象
  const newAttr = document.createAttribute('data-track');
  newAttr.value = 'click-event';
  
  // 使用 setAttributeNode 将 Attr 添加到元素
  const existingAttr = button.setAttributeNode(newAttr);
  console.log('setAttributeNode 返回的已存在属性:', existingAttr); // null（之前不存在）
  console.log('按钮的 data-track 属性:', button.getAttribute('data-track')); // "click-event"
  
  // 再次添加同名的属性节点会返回被替换的旧节点
  const replacementAttr = document.createAttribute('data-track');
  replacementAttr.value = 'new-value';
  const replacedAttr = button.setAttributeNode(replacementAttr);
  console.log('被替换的旧属性节点:', replacedAttr);
  console.log('替换后的值:', button.getAttribute('data-track')); // "new-value"
  console.log('被替换节点的 ownerElement:', replacedAttr?.ownerElement); // null
  
  // 从 attributes 列表中获取特定的 Attr
  const trackAttr = button.attributes.getNamedItem('data-track');
  console.log('getNamedItem 获取:', trackAttr?.value);
  
  button.remove();
}

demonstrateOwnerElement();
attributeRelationshipOperations();

setAttributeNode 方法返回被替换的旧属性节点（如果存在），否则返回 null。当属性节点从一个元素移动到另一个元素时，ownerElement 会相应地更新。

四、属性值的读写操作

value 属性是 Attr 接口中唯一可读写的属性。通过操作 value，可以改变元素对应的属性值。

// 属性值的各种操作方式
function attributeValueOperations() {
  const input = document.createElement('input');
  input.type = 'text';
  input.placeholder = '请输入内容';
  document.body.appendChild(input);
  
  // 使用 Attr 对象修改值
  const typeAttr = input.getAttributeNode('type');
  console.log('原始 type 值:', typeAttr.value);
  
  // 修改 value 属性
  typeAttr.value = 'password';
  console.log('修改后 type 值:', input.getAttribute('type')); // "password"
  
  // 创建新属性并设置值
  const newAttr = document.createAttribute('data-validation');
  newAttr.value = 'required';
  input.setAttributeNode(newAttr);
  console.log('新属性值:', input.getAttribute('data-validation'));
  
  // 批量操作属性值
  function batchUpdateAttributes(element, attributesMap) {
    const changes = [];
    for (const [name, newValue] of Object.entries(attributesMap)) {
      const attr = element.getAttributeNode(name);
      if (attr) {
        const oldValue = attr.value;
        attr.value = newValue;
        changes.push({ name, oldValue, newValue });
      } else {
        element.setAttribute(name, newValue);
        changes.push({ name, oldValue: null, newValue });
      }
    }
    return changes;
  }
  
  const button = document.createElement('button');
  button.textContent = '提交';
  button.setAttribute('class', 'btn');
  button.setAttribute('disabled', 'disabled');
  document.body.appendChild(button);
  
  const changes = batchUpdateAttributes(button, {
    class: 'btn btn-primary',
    disabled: 'false',
    'data-id': 'submit-001'
  });
  
  console.log('批量更新结果:', changes);
  console.log('更新后的 class:', button.getAttribute('class')); // "btn btn-primary"
  console.log('更新后的 disabled:', button.getAttribute('disabled')); // "false"
  
  // 特殊类型的属性值处理
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  document.body.appendChild(checkbox);
  
  // checked 属性的特性
  checkbox.setAttribute('checked', '');
  const checkedAttr = checkbox.getAttributeNode('checked');
  console.log('checked 属性值:', checkedAttr.value); // ""（空字符串）
  console.log('checked 属性是否存在:', checkbox.hasAttribute('checked')); // true
  
  // 移除检查
  checkbox.removeAttribute('checked');
  console.log('移除后 checked 属性:', checkbox.getAttribute('checked')); // null
  
  input.remove();
  button.remove();
  checkbox.remove();
}

// 属性值的编码和特殊字符处理
function attributeEncodingDemo() {
  const div = document.createElement('div');
  
  // 包含特殊字符的属性值
  const specialValues = [
    '包含"双引号"的文本',
    "包含'单引号'的文本",
    '包含 & 符号的文本',
    '包含 < 和 > 符号的文本',
    '换行符\n第二行'
  ];
  
  specialValues.forEach((value, index) => {
    const attrName = `data-test-${index}`;
    div.setAttribute(attrName, value);
    
    const attr = div.getAttributeNode(attrName);
    console.log(`属性 ${attrName} 的值:`, attr.value);
    console.log(`原始值与读取值是否一致:`, attr.value === value);
  });
  
  // 演示属性值的序列化
  console.log('元素外部 HTML 片段:', div.outerHTML.substring(0, 200));
  
  div.remove();
}

attributeValueOperations();
attributeEncodingDemo();

通过 Attr 对象修改 value 属性会实时反映到元素上。当属性值包含特殊字符时，浏览器会自动处理转义，Attr.value 返回的是解码后的原始字符串。

五、直接创建 Attr 节点

除了从元素获取现有属性，还可以使用 createAttribute 方法直接创建新的 Attr 节点。

// 直接创建 Attr 节点的方法
function createAttrDirectly() {
  // 方法1：使用 document.createAttribute
  const customAttr = document.createAttribute('data-custom');
  customAttr.value = '直接创建的值';
  console.log('createAttribute 创建的 Attr:', customAttr);
  console.log('localName:', customAttr.localName);
  console.log('value:', customAttr.value);
  
  // 将创建的 Attr 添加到元素
  const element = document.createElement('div');
  element.setAttributeNode(customAttr);
  console.log('添加到元素后:', element.getAttribute('data-custom'));
  
  // 方法2：创建带命名空间的属性
  const nsAttr = document.createAttributeNS('http://www.w3.org/2000/svg', 'viewBox');
  nsAttr.value = '0 0 100 100';
  console.log('createAttributeNS 创建的 Attr:');
  console.log('  - name:', nsAttr.name);
  console.log('  - namespaceURI:', nsAttr.namespaceURI);
  console.log('  - localName:', nsAttr.localName);
  
  // 方法3：使用 setAttribute 然后获取（最常用）
  const commonWay = document.createElement('div');
  commonWay.setAttribute('class', 'box');
  const retrievedAttr = commonWay.getAttributeNode('class');
  console.log('通过 setAttribute/getAttributeNode 获得:', retrievedAttr);
  
  // 批量创建属性节点的辅助函数
  function createAttributesFromMap(attributesMap) {
    const attrs = [];
    for (const [name, value] of Object.entries(attributesMap)) {
      const attr = document.createAttribute(name);
      attr.value = String(value);
      attrs.push(attr);
    }
    return attrs;
  }
  
  const multipleAttrs = createAttributesFromMap({
    id: 'section-1',
    class: 'content main',
    role: 'region',
    'aria-label': '主要内容区域'
  });
  
  const container = document.createElement('section');
  multipleAttrs.forEach(attr => {
    container.setAttributeNode(attr);
  });
  
  console.log('批量创建并添加属性后的元素:', container);
  console.log('id:', container.id);
  console.log('class:', container.className);
  console.log('role:', container.getAttribute('role'));
  console.log('aria-label:', container.getAttribute('aria-label'));
  
  element.remove();
  container.remove();
}

// Attr 节点的克隆
function cloneAttributeDemo() {
  const original = document.createElement('div');
  original.setAttribute('title', '原始提示');
  original.setAttribute('data-info', '重要信息');
  
  const originalAttr = original.getAttributeNode('title');
  
  // 克隆 Attr 节点（cloneNode）
  const clonedAttr = originalAttr.cloneNode();
  console.log('克隆的 Attr 节点:', clonedAttr);
  console.log('克隆的值:', clonedAttr.value);
  console.log('克隆的 ownerElement:', clonedAttr.ownerElement); // null
  
  // 克隆的 Attr 可以被添加到新元素
  const newElement = document.createElement('span');
  newElement.setAttributeNode(clonedAttr);
  console.log('新元素的 title 属性:', newElement.getAttribute('title')); // "原始提示"
  
  // 修改克隆不影响原始
  clonedAttr.value = '修改后的提示';
  console.log('原始属性值:', original.getAttribute('title')); // "原始提示"
  console.log('克隆属性值:', clonedAttr.value); // "修改后的提示"
  
  original.remove();
  newElement.remove();
}

createAttrDirectly();
cloneAttributeDemo();

createAttribute 创建的是独立的 Attr 节点，尚未与任何元素关联。需要通过 setAttributeNode 添加到元素后，ownerElement 才会被设置。

六、浏览器兼容性与注意事项

Attr 接口在所有现代浏览器中得到广泛支持。需要注意 specified 属性已被废弃，总是返回 true，不应再使用。

// 兼容性和注意事项总结
function attrBestPractices() {
  console.log('=== Attr 接口最佳实践 ===');
  
  // 1. 优先使用字符串方法
  const element = document.createElement('div');
  
  // 推荐：简单直接
  element.setAttribute('class', 'box');
  const classValue = element.getAttribute('class');
  
  // 仅在需要访问属性节点特有信息时使用 Attr
  const attrNode = element.getAttributeNode('class');
  if (attrNode) {
    console.log('需要知道命名空间前缀时使用:', attrNode.prefix);
    console.log('需要判断属性是否属于某个命名空间:', attrNode.namespaceURI);
  }
  
  // 2. 检查属性是否存在
  function hasAttributeWithValue(element, attrName, expectedValue) {
    const attr = element.getAttributeNode(attrName);
    return attr !== null && attr.value === expectedValue;
  }
  
  element.setAttribute('state', 'active');
  console.log('属性存在且值为 active:', hasAttributeWithValue(element, 'state', 'active'));
  console.log('属性存在且值为 inactive:', hasAttributeWithValue(element, 'state', 'inactive'));
  
  // 3. 布尔属性的处理
  function setBooleanAttribute(element, attrName, isActive) {
    if (isActive) {
      element.setAttribute(attrName, '');
    } else {
      element.removeAttribute(attrName);
    }
  }
  
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  setBooleanAttribute(checkbox, 'checked', true);
  console.log('布尔属性设置后:', checkbox.getAttribute('checked')); // ""
  console.log('hasAttribute:', checkbox.hasAttribute('checked')); // true
  
  setBooleanAttribute(checkbox, 'checked', false);
  console.log('移除后 hasAttribute:', checkbox.hasAttribute('checked')); // false
  
  // 4. 性能考虑：批量操作时使用 setAttribute 而非多次 setAttributeNode
  console.time('setAttribute 批量');
  for (let i = 0; i < 1000; i++) {
    const testDiv = document.createElement('div');
    testDiv.setAttribute('data-index', i);
  }
  console.timeEnd('setAttribute 批量');
  
  console.time('setAttributeNode 批量');
  for (let i = 0; i < 1000; i++) {
    const testDiv = document.createElement('div');
    const attr = document.createAttribute('data-index');
    attr.value = i;
    testDiv.setAttributeNode(attr);
  }
  console.timeEnd('setAttributeNode 批量');
  
  // 5. 遍历属性的正确方式
  function logAllAttributes(element) {
    for (const attr of element.attributes) {
      console.log(`${attr.name}="${attr.value}"`);
    }
  }
  
  const sample = document.createElement('div');
  sample.setAttribute('id', 'sample');
  sample.setAttribute('class', 'demo');
  sample.setAttribute('title', '示例');
  logAllAttributes(sample);
  
  element.remove();
}

// 命名空间使用注意事项
function namespaceConsiderations() {
  // 创建 SVG 元素时需要使用命名空间
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  
  // 普通 HTML 属性不需要命名空间
  svg.setAttribute('width', '100');
  svg.setAttribute('height', '100');
  
  // XLink 属性需要命名空间
  svg.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#icon');
  
  const widthAttr = svg.getAttributeNode('width');
  const hrefAttr = svg.getAttributeNodeNS('http://www.w3.org/1999/xlink', 'href');
  
  console.log('普通属性 namespaceURI:', widthAttr?.namespaceURI); // null
  console.log('XLink 属性 namespaceURI:', hrefAttr?.namespaceURI); // "http://www.w3.org/1999/xlink"
  console.log('XLink 属性 prefix:', hrefAttr?.prefix); // "xlink"
  console.log('XLink 属性 localName:', hrefAttr?.localName); // "href"
  
  svg.remove();
}

attrBestPractices();
namespaceConsiderations();

日常开发中，优先使用 getAttribute 和 setAttribute 这类字符串方法。只有在需要获取命名空间前缀、判断属性是否属于特定命名空间等场景时，才需要使用 Attr 接口。布尔属性的处理要特别注意空字符串的设置方式。

---

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