getAttribute 的初学者 Javascript 错误答案

【问题标题】：Beginner Javascript error with getAttributegetAttribute 的初学者 Javascript 错误
【发布时间】：2011-07-17 21:23:27
【问题描述】：

我在 google 和 stackoverflow 上都进行了相当多的搜索，但是由于缺乏关于如何提问的知识（或者即使我问的是正确的问题），因此很难找到相关信息。

我有一个简单的代码块，我正在尝试自学 javascript。

var studio = document.getElementById('studio');
var contact = document.getElementById('contact');
var nav = document.getElementById('nav');
var navLinks = nav.getElementsByTagName('a');

var title = navLinks.getAttribute('title');

我想从 ID 为“nav”的元素中的链接中获取标题属性。

每当我查看调试器时，它都会告诉我Object #<NodeList> has no method 'getAttribute'

我不知道我哪里出错了。

navLinks 的节点类型和节点值返回为未定义，我认为这可能是问题的一部分，但我对此很陌生，老实说我不知道。

【问题讨论】：

不要将 getAttribute 用于标准 HTML 属性，使用相关的 DOM 属性，所以 var title = navLinks[0].title。 getAttribute. 中更快、更少输入和消除浏览器差异

标签： javascript getattribute

【解决方案1】：

getElementsByTagName 方法返回一个对象数组。所以你需要遍历这个数组来获取单个元素及其属性：

var navLinks = nav.getElementsByTagName('a');
for (var i = 0; i < navLinks.length; i++) {
    var link = navLinks[i];
    var title = link.title;
}

【讨论】：

谢谢，就是这样。非常感谢，因为在我决定在这里注册并寻求一些答案之前，我已经在这里坐了很长时间。
getElementsByTagName 返回一个 NodeList，它不是一个数组。见sitepoint.com/a-collection-is-not-an-array

【解决方案2】：

调用nav.getElementsByTagName('a') 返回对象列表。而且该列表没有 getAttribute() 方法。您必须在一个对象上调用它。

当你这样做时：

navLinks[0].getAttribute('title')

那么它应该可以工作 - 您将获得第一个匹配元素的标题。

【讨论】：

【解决方案3】：

var navLinks = nav.getElementsByTagName('a');

getElementsByTagName 返回多个元素（因此Elements），因为一个页面上可以有多个元素具有相同的标签名称。 NodeList（由getElementsByTagName 返回的节点集合）没有getAttribute 方法。

您需要访问您实际需要的元素的属性。我的猜测是，这将是您找到的第一个元素。

var title = navLinks[0].getAttribute('title');

【讨论】：