JavaScriptでHTML要素のタイプを判別するにはどうすればよいですか？

189

JavaScriptでHTML要素のタイプを判別する方法が必要です。これにはIDがありますが、要素自体は<div>、<form>フィールド<fieldset>、、などにすることができます。これを実現するにはどうすればよいですか？

javascript dom

— アダムザハット
ソース

290

nodeNameあなたが探している属性です。例えば：

var elt = document.getElementById('foo');
console.log(elt.nodeName);

nodeName大文字の要素名を山括弧なしで返すことに注意してください。つまり、要素が要素であるかどうかを確認する場合は、<div>次のように実行できます。

elt.nodeName == "DIV"

これは期待した結果を与えませんが：

elt.nodeName == "<div>"

— pkaeding
ソース

29

次のようにすることをお勧めします。変更する必要はなく、このコードは正常に動作します。

— TheCuBeMan 2014年

6

@TheCuBeManへの応答として、toLowerCase（）を使用することは、nodeNameが存在することも確認する必要があることを意味します（それが実際に可能な要素が実際には要素でない場合）：if (elt.nodeName && elt.nodeName.toLowerCase() === 'div') { ... }

— Erik Koopmans

どうlocalNameですか？

— ボンバ2018

46

どうelement.tagNameですか？

tagNameMDNのドキュメントも参照してください。

— ブライアンクライン
ソース

4

タイムスタンプによると、1秒未満で私を倒しました！

— まぶたがない2008年

27

QuirksModeから：私のアドバイスはtagNameをまったく使用しないことです。nodeNameには、tagNameのすべての機能に加えて、いくつかの機能が含まれています。したがって、nodeNameは常により良い選択です。

— bdukes

7

たまに欲しい element.constructor.name

document.createElement('div').constructor.name
// HTMLDivElement

document.createElement('a').constructor.name
// HTMLAnchorElement

document.createElement('foo').constructor.name
// HTMLUnknownElement

— ゴロポット
ソース

6

次の方法で汎用コードインスペクションを使用できますinstanceof。

var e = document.getElementById('#my-element');
if (e instanceof HTMLInputElement) {}         // <input>
elseif (e instanceof HTMLSelectElement) {}    // <select>
elseif (e instanceof HTMLTextAreaElement) {}  // <textarea>
elseif (  ... ) {}                            // any interface

インターフェースの完全なリストについては、こちらをご覧ください。

— Code4R7
ソース