从 getElementsByTagName() 获取属性的最佳方法？

Question

我正在尝试获取 link 标记的属性，似乎有多种访问属性的方法：

document.getElementsByTagName("link")[0]['media']
document.getElementsByTagName("link")[0].media
document.getElementsByTagName("link")[0].getAttribute('media')
document.getElementsByTagName("link")[0].attributes['media']

相同数据的路径数量之多简直是荒谬的。这些方法中的一种是否比其他方法优越得多？

Answer 1

对于这种情况，我将使用 .media ，因为 media 确实是链接元素上的属性。其中每一个都有其用途：

• ['media']： 使用方括号表示法检索“media”属性值。当您在设计时不知道属性的名称时，请使用方括号表示法。例如，当迭代属性时。
• .media： 检索“media”属性值。大多数情况下我都会使用这个。它提供了对属性值的简洁、直接的访问。
• .getAttribute('media')： 检索“media”属性值。当您想要的属性值不一定是元素上的属性时，请使用此选项。并非所有属性都是属性，也不是所有属性都是属性。
• .attributes['media']： 检索“media”属性节点。当您需要有关属性的更多信息而不仅仅是其值时，请使用属性集合。例如，属性名称。您还可以轻松地使用它来获取值，因为 .toString() 返回值，但如果您想要的只是值，那么这可能有点过头了。 attributes 集合对于迭代元素的属性也很有用。

Answer 2

您正在查找的方法称为 getElementsByTagName。它返回一个类似数组的元素列表（不是数组）。

请注意，您的最后一个示例 .attributes['media'] 不会像其他方法那样返回字符串。相反，它返回一个属性节点。

理论上，访问内容的方式应该是相同的，但浏览器错误实际上会导致其他行为。最好使用抽象层（jQuery 等库）来获得一致的行为。如果您打算在没有库的情况下进行编程，那么选择取决于您的品味，但我想说，一般来说，通过属性节点是最安全的。

添加更多技术细节，尽管不同的方式在大多数情况下返回相同的方式，但这对于不存在的属性不一定成立。以以下 HTML 为例：。您可以在另一个浏览器中在 测试 jsFiddle 上自行尝试（下面的输出来自 Firefox）。

// Get reference to element
var a = document.getElementsByTagName('a')[0];

// Existent attributes
console.log(a.href); // String: http://fiddle.jshell.net/_display/test
console.log(a.getAttribute('href')); // String: test
console.log(a.attributes['href']); // Attribute node: href

请注意，一次返回绝对 URI，另一次返回原始值。

// Existent invalid attributes
console.log(a.other); // undefined
console.log(a.getAttribute('other')); // String: thing
console.log(a.attributes['other']); // Attribute node: other

页面加载时存在的所有内容都会合并到 DOM 中，但如果无效则不能作为属性使用。

// Inexistent but valid attributes
console.log(a.title); // Empty string
console.log(a.getAttribute('title')); // null
console.log(a.attributes['title']); // undefined

第一次调用返回属性默认值。然后我们看到 null 作为不存在属性的标记。最后我们得到了一个所谓的 NamedNodeMap，它类似于数组和对象的混合体。将其作为对象访问会给出 undefined 值。

// Creating attributes
a.setAttribute('title', 'test title');
console.log(a.title); // String: test title
console.log(a.getAttribute('title')); // String: test title
console.log(a.attributes['title']); // Attribute node: title

属性也可以作为属性使用。

// Creating "attributes" by using property
a.rel = 'test rel';
console.log(a.rel); // String: test rel
console.log(a.getAttribute('rel')); // String: test rel
console.log(a.attributes['rel']); // Attribute node: rel

设置有效属性的属性还会在 attributes 映射中创建一个条目。

// Inexistent invalid attributes
console.log(a.dummyInvention); // undefined
console.log(a.getAttribute('dummyInvention')); // null
console.log(a.attributes['dummyInvention']); // undefined

a 上的属性访问、标记返回值和节点映射上的索引访问。

// Creating invalid attributes via setAttribute
a.setAttribute('title2', 'test title2');
console.log(a.title2); // undefined
console.log(a.getAttribute('title2')); // String: test title2
console.log(a.attributes['title2']); // Attribute node: title2

即使属性的存在无效，也会创建属性，但它不能作为属性使用。

// Creating invalid "attributes" via property
a.title3 = 'test title3';
console.log(a.title3); // String: test title3
console.log(a.getAttribute('title3')); // null
console.log(a.attributes['title3']); // undefined

对象 a 已扩展，但 DOM 未受影响。

// NamedNodeMap of length 4 and indexes other, href, title, rel, title2 (valid attributes or result of setAttribute in order of creation except those from parsing)
console.log(a.attributes);

节点图仅反映 DOM 的当前状态。它不知道我们通过 getElementsByTagName 接收到的对象 a 的扩展。

需要注意的是，操作 JavaScript 对象并不一定会影响 DOM。 DOM 仅反映通过 DOM 方法进行解析和修改或属性修改（即预定义属性）可用的内容。我希望我没有错过任何重要的案例，并且评论已经足够详细，可以看到会发生什么。

我希望对最终的 NamedNodeMap 发表评论，因为我想知道 Firefox 的行为是否正确，即丢弃解析中的属性顺序。

Answer 3

从功能上来说，它们是平等的。

就性能而言，前两者要优越得多——尽管它们都非常快。请参阅此 JSPerf 测试。

实际上，前两个更容易阅读，我个人更喜欢第二个。 （这也快了一根头发。）

Answer 4

前两个选项是相同的。您可以使用其中任何一个。我个人更喜欢 .media 版本，因为我认为它读起来更容易。

最后两个选项依赖于 getAttribute() 和 setAttribute()，它们在 IE 中并不总是可靠的。您可以在