如何通过getElementsByTagName获取元素属性？为何该方法无法获取属性值

嘿，这个问题其实是很常见的DOM API使用误区，我来给你拆解一下：

核心区别：单个元素 vs 元素集合 #

• 当你用 document.getElementById('t') 或者直接通过id（比如window.t）访问元素时，得到的是单个DOM元素对象，这类对象自带getAttribute方法，所以调用getAttribute('href')完全没问题。
• 但 document.body.getElementsByTagName('a') 返回的不是单个元素，而是一个HTMLCollection（类数组的元素集合）——它包含了页面中所有匹配<a>标签的元素，集合本身并没有getAttribute方法，直接调用自然会失败。

修正你的代码 #

如果你的页面中只有这一个<a>标签，只需要从集合中取出第一个元素再调用方法即可：

var a = document.body.getElementsByTagName('a')[0].getAttribute('href');
console.log(a); // 输出 "###"

如果不确定有多少个<a>标签，或者需要处理多个元素，你可以遍历这个集合：

var links = document.body.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
  console.log(links[i].getAttribute('href'));
}

另外，也可以用更简洁的querySelector方法，它直接返回第一个匹配的元素：

var a = document.body.querySelector('a').getAttribute('href');
console.log(a);

内容的提问来源于stack exchange，提问作者Sviat Kuzhelev