怎么通过HTML的NamedNodeMap的getNamedItem方法按名称获取元素的属性节点对象-html教程-PHP中文网

namednodemap.getnameditem() 返回 attr 对象而非字符串值，需通过 .value 或 .nodevalue 获取属性值；它区分大小写、不支持简写，且仅匹配实际存在的 html 属性节点，不反映某些 dom 属性的动态变化。

怎么通过html的namednodemap的getnameditem方法按名称获取元素的属性节点对象

NamedNodeMap.getNamedItem() 返回的是 Attr 对象，不是字符串值

直接调用 getNamedItem() 得到的是一个 Attr 节点对象，不是你想要的属性值。很多人误以为它像 getAttribute() 那样返回字符串，结果打印出来是 [object Attr] 或访问 .value 报错（比如 Cannot read property 'value' of null）。

正确做法是先确认属性存在，再取其 .value 或 .nodeValue：

const el = document.getElementById('myDiv');
const attrs = el.attributes; // NamedNodeMap
const classAttr = attrs.getNamedItem('class');
if (classAttr) {
  console.log(classAttr.value); // ✅ 正确：输出 "my-class"
  console.log(classAttr.nodeValue); // ✅ 等价写法
}

只对已存在的属性名有效，大小写敏感且不支持简写

getNamedItem() 查找的是元素实际拥有的属性节点，不是渲染后计算出的值。比如 el.attributes.getNamedItem('className') 一定返回 null，因为 HTML 中没有 className 这个属性名——它是 JavaScript 的 DOM 属性映射，底层对应的是 class。

getNamedItem('CLASS') → null（HTML 属性名始终小写解析）
getNamedItem('hidden') → 可能返回 Attr，即使没写值（布尔属性存在即为 true）
getNamedItem('data-id') → ✅ 支持连字符，但必须拼写完全一致
getNamedItem('dataset') → ❌ dataset 是 JS 属性，不是 HTML 属性节点

和 getAttribute() 的关键区别：是否反映动态修改

getNamedItem() 操作的是 NamedNodeMap，它反映的是 HTML 源码中声明的属性（加上后续通过 setAttribute() 添加的），但不会自动同步某些特殊属性的 JS 状态变化。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

<input checked>：初始时 el.attributes.getNamedItem('checked') 返回 Attr，.value 是空字符串；用户点击后，checked 属性节点依然存在，但 el.checked 值已变 —— 这里 DOM 属性和属性节点已脱钩
el.setAttribute('style', 'color:red') → getNamedItem('style') 立即可见
el.style.color = 'blue' → ❌ 不会更新 style 属性节点，getNamedItem('style') 仍返回旧值

遍历 attributes 时 getNamedItem() 容易重复查询

如果已经拿到 NamedNodeMap（比如 el.attributes），又在循环里反复调用 getNamedItem('x')，性能不如直接遍历或缓存查找结果。

更稳妥的写法是先查一次，再判断：

const attrs = el.attributes;
const idAttr = attrs.getNamedItem('id');
const dataSrc = attrs.getNamedItem('data-src');

if (idAttr && dataSrc) {
  doSomething(idAttr.value, dataSrc.value);
}

不要写成 if (attrs.getNamedItem('id')) { ... attrs.getNamedItem('id').value ... } —— 多了一次查找开销，而且可能因中间被移除而两次结果不一致。

真正容易被忽略的是：NamedNodeMap 是**实时集合**，但 getNamedItem() 返回的对象本身不会随后续 DOM 修改自动更新；它的 .value 是快照值，改了属性后需重新调用才能获取新值。