web-dev-qa-db-ja.com

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

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

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

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

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

その場合は、elem.tagName または elem.nodeNameプロパティ。

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

121
FlySwat
if (element.nodeName == "A")
{
}
else if (element.nodeName == "TD")
{
}
65
bobwienholt

おそらく、ノードタイプもチェックする必要があります：

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を修正しました

19
roenving

roenvingは正しいですが、テストを次のように変更する必要があります。

 if（element.nodeType == 1）{
 // code 
}

nodeType 3は実際にはテキストノードであり、nodeType 1はHTML要素であるためです。 http://www.w3schools.com/Dom/dom_nodetype.asp を参照してください

6
Eric Wendelin

通常、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では[[object Object]]を返します））。

2
Herbertusz

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

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

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 または elem.constructor.name == "HTMLAnchorElement"、両方ともtrueを返します

1
Vignesh Raja

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

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
}
0
nicolsondsouza