直接元素的.tagName属性？

Question

.tagName属性是否适用于直接元素？我一直在让它工作，使用子元素作为跳转点，但是我不能让它工作在即时元素上。

下面是一个有用的例子：

<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文档中添加不必要的标记。下面是一个有效的示例，但依赖于标识符。

<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()来针对这个元素吗？”

<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返回的getElementsByTagName没有标签名属性。

有人找到解决办法了吗？

如果只想访问第一个(或仅) div元素，则必须通过index - el[0].tagName访问el[0].tagName所包含的元素。