JavaScriptでのDOM要素のタイプのテスト


98

JavaScriptで要素のタイプをテストする方法はありますか?

答えはプロトタイプライブラリを必要とする場合と必要としない場合がありますが、次のセットアップではライブラリを使用します。

function(event) {
  var element = event.element();
  // if the element is an anchor
  ...
  // if the element is a td
  ...
}

回答:


125

を使用typeof(N)して実際のオブジェクトタイプを取得できますが、行うべきことは、DOM要素のタイプではなく、タグを確認することです。

その場合は、elem.tagNameor elem.nodeNameプロパティを使用します。

本当にクリエイティブになりたい場合は、スイッチまたはif / elseの代わりに、タグ名と匿名のクロージャーの辞書を使用できます。


68
if (element.nodeName == "A") {
 ...
} else if (element.nodeName == "TD") {
 ...
}

1
時々そうです。とにかく、いつでも使用することができelement.nodeName.match(/\bTBODY\b/i)たりelement.nodeName.toLowerCase() == 'tbody'など
ロブスト

9
@Robustoは正しくありません。ドキュメントがHTMLであり、DOM実装が正しい場合は、常に大文字になります。よる:w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815(要素nodeNameの== tagNameをするための)「tagNameを」セクションの下「HTML DOMは、HTML要素のtagNameを内を返しますソースHTMLドキュメントの大文字小文字に関係なく、正規の大文字のフォーム。」
bobwienholt 2014年

19

おそらくあなたもノードタイプをチェックする必要があるでしょう:

if(element.nodeType == 1){//element of type html-object/tag
  if(element.tagName=="a"){
    //this is an a-element
  }
  if(element.tagName=="div"){
    //this is a div-element
  }
}

編集:nodeType-valueを修正しました


3
tagNameのケースに注意してください。
まぶたがない2008年

@Casey:HTMLページになります。XHTMLページではタグの大文字と小文字が保持されます(したがって、「a」はHTMLページでは「A」、XHTMLページでは「a」になります):w3.org/TR/2000/REC-DOM-Level-2- Core-20001113 /…(XHTMLページが正しく配信され、として配信されていないと想定text/html
TJ Crowder '25

2
@TJCrowderなので、最適なオプションは次のようになりますelement.tagName.toLowerCase() === 'a'
p3drosola

@Ped:はい、または実際には要素にならないelement.nodeName.toLowerCase()可能性があるelement場合(たとえば、nodeType == 1上記のチェックを行っていない場合)。NodeインターフェースはありnodeName。たとえばElement、と同じtagNameです。他の種類のノードでは、"#text"またはのようなもの"#document"です。でも、私はいつもnodeType小切手を使うと思います。
TJクラウダー

2019更新:少なくとも最新のChromium(v79.0.3945.79)では、タグ名文字列は大文字です。 「HTMLドキュメントを表すDOMツリーの場合、返されるタグ名は常に大文字の大文字の形式になります。たとえば、<div>要素で呼び出されたtagNameは「DIV」を返します https://developer.mozilla.org/en-米国/ドキュメント/ウェブ/ API /エレメント/ tagNameを 比較するための正しい方法は次のようになりますnode.tagName == 'DIV'
marcs


2

通常は、toString()の戻り値から取得します。アクセス方法が異なるDOM要素で機能します。

var a = document.querySelector('a');

var img = document.createElement('img');

document.body.innerHTML += '<div id="newthing"></div>';
var div = document.getElementById('newthing');

Object.prototype.toString.call(a);    // "[object HTMLAnchorElement]"
Object.prototype.toString.call(img);  // "[object HTMLImageElement]"
Object.prototype.toString.call(div);  // "[object HTMLDivElement]"

次に、関連する部分:

Object.prototype.toString.call(...).split(' ')[1].slice(0, -1);

Chrome、FF、Opera、Edge、IE9 +で動作します(以前のIEでは「[オブジェクトオブジェクト]」を返します)。


2

以前の答えは完全に機能しますが、要素を実装したインターフェイスを使用して要素を分類できる別の方法を追加します。

利用可能なインターフェースについてはW3 Orgを参照してください

console.log(document.querySelector("#anchorelem") instanceof HTMLAnchorElement);
console.log(document.querySelector("#divelem") instanceof HTMLDivElement);
console.log(document.querySelector("#buttonelem") instanceof HTMLButtonElement);
console.log(document.querySelector("#inputelem") instanceof HTMLInputElement);
<a id="anchorelem" href="">Anchor element</a>
<div id="divelem">Div Element</div>
<button id="buttonelem">Button Element</button>
<br><input id="inputelem">

インターフェースチェックは、elem instanceof HTMLAnchorElementまたはの2つの方法で行うことができelem.constructor.name == "HTMLAnchorElement"ます。true


0

同じことをテストする別の方法があります。

Element.prototype.typeof = "element";
var element = document.body; // any dom element
if (element && element.typeof == "element"){
   return true; 
   // this is a dom element
}
else{
  return false; 
  // this isn't a dom element
}

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.