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

Answer 2

这给我一个未定义的值。这是为什么？

因为getElementsByTagName返回的NodeList没有tagname属性。

任何人都有解决方案吗？

如果您只想访问第一个（或唯一的）div元素，则必须通过索引访问NodeList包含的元素 - el[0].tagName。

直接元素的.tagName属性？

2 个答案: