javascript - 直接元素的 .tagName 属性？

Question

.tagName 属性是否适用于直接元素？我一直在使用子元素作为起点让它工作，但我无法让它在直接元素上工作。

---

这是一个有效的例子:

HTML

<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<div>
    <p id="foo">This is paragraph 5.</p>
</div>

JavaScript

(function(){

var el = document.getElementById("foo");

    var name = el.parentNode.tagName;

    alert(name);

}());

这让我得到了 div 元素的名称，这就是我想要实现的，但是有没有更短的方法？

我不想向元素添加标识符并以此方式定位它，这是因为我不想向我的 HTML 文档添加不必要的标记。这是一个有效的示例，但依赖于标识符。

---

HTML

<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<div id="bar">
   <p id="foo">This is paragraph 5.</p>
</div>

JavaScript

(function(){

var el = document.getElementById("bar");

    var name = el.tagName;

    alert(name);

}());

如您所见，这获得了预期的效果，但依赖于标识符。所以我想:“我不能在元素本身上使用 .tagName 属性并使用 .getElementsByTagName() 定位元素吗？”

---

HTML

<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<div>
    <p id="foo">This is paragraph 5.</p>
</div>

JavaScript

(function(){

var el = document.getElementsByTagName("div");

    var name = el.tagName;

    alert(name);

}());

答案是否定的。这为我提供了 undefined 的值。为什么是这样？谁有解决办法？
链接到 jsFiddle:http://jsfiddle.net/BV5EP/

Answer 1

请记住，getElementsbyTagName(注意复数 s)返回的是 nodeList 而不是 Element(就像 getElementById 一样)。您需要确保使用 el[0].tagName!

Corrected Fiddle