1

.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/

4

2 に答える 2

4

(複数形の sgetElementsbyTagNameに注意してください) は、 (のように)ではなくa を返すことに注意してください。必ず使用する必要があります。nodeListElementgetElementByIdel[0].tagName

Corrected Fiddle

于 2013-11-09T22:23:27.970 に答える
1

これにより、未定義の値が得られます。どうしてこれなの？

getElementsByTagName が返す NodeList には tagname プロパティがないためです。

誰にも解決策がありますか？

NodeList に含まれる要素にインデックスでel[0].tagNameアクセスする必要があります。この場合、最初の (または唯一の) div 要素にのみアクセスしたい場合です。

于 2013-11-09T22:23:49.050 に答える