変数がDOM要素かどうかを判定する方法


event.target には click などのイベント発生時にイベント発生元のDOM要素がセットされていると思いますが、jQuery の ajax()
を非同期で実行した場合は XMLHttpRequest オブジェクトが入っていました。

変数の値がDOM要素の場合だけ特定の処理を行いたいです。

event.target に限らず、変数・プロパティに設定されている値がDOM要素かどうかはどのようにしたら判定できるでしょうか？

ちなみに、`typeof(event.target)` はclickイベントの時も、ajax()の時も`object` でした。




同じ質問が本家にありますね。  
大分古いですが。

[Javascript isDOM — How do you check if a Javascript Object is a DOM
Object?](https://stackoverflow.com/a/384380/2513010)

完全な回答はリンク先を参照していただくとして（回答そのものはそんなに長くありません）、前半だけ引用します

[code]

    function isElement(obj) {
      try {
        //Using W3 DOM2 (works for FF, Opera and Chrom)
        return obj instanceof HTMLElement;
      }
      catch(e){
        //Browsers not supporting W3 DOM2 don't have HTMLElement and
        //an exception is thrown and we end up here. Testing some
        //properties that all elements have. (works on IE7)
        return (typeof obj==="object") &&
          (obj.nodeType===1) && (typeof obj.style === "object") &&
          (typeof obj.ownerDocument ==="object");
      }
    }
    
[/code]

`obj instanceof HTMLElement` で確認できる場合はそれを利用し、  
そうでない場合は、

  * そのオブジェクトのデータ型が "object"
  * nodeTypeが 1 (`ELEMENT_NODE`)
  * styleプロパティのデータ型が "object "
  * ownerDocumentプロパティのデータ型が "object"

以上すべてを満たせば、関係性からHTMLElementでしょうと判断しています。

別の回答でフレームワークの機能を使って確認するというのもあるようです。

ただ気を付けて欲しいのが、たとえばjQueryなどフレームワークがラップしているオブジェクトは条件にあてはめられるとは限りません(多くの場合当てはまりません)。

たとえばChromeで、

[code]

    <div id="hoge"></div>
    
[/code]

があったとして

[code]

    var x = document.getElementById("hoge");
    if(x instanceof HTMLElement) Console.log("true");
    if(typeof x.style === "object") Console.log("true");
    
[/code]

どちらもtrueと出力されますが、

[code]

    var jqx = $("#hoge");
    if (jqx instanceof HTMLElement) Console.log("true");
    if (typeof jqx.style === "object") Console.log("true");
    
[/code]

はどちらも出力されません。  
以下ならtrueと出力されます。

[code]

    if (jqx[0] instanceof HTMLElement) Console.log("true");
    if (typeof jqx[0].style === "object") Console.log("true");
    
[/code]

`DOM要素`という言葉でどの範囲を想像しているかわかりませんが、フレームワークを使っている場合は気を付けてください。




同じ質問が本家にありますね。  
大分古いですが。

[Javascript isDOM — How do you check if a Javascript Object is a DOM
Object?](https://stackoverflow.com/a/384380/2513010)

完全な回答はリンク先を参照していただくとして（回答そのものはそんなに長くありません）、前半だけ引用します

[code]

    function isElement(obj) {
      try {
        //Using W3 DOM2 (works for FF, Opera and Chrom)
        return obj instanceof HTMLElement;
      }
      catch(e){
        //Browsers not supporting W3 DOM2 don't have HTMLElement and
        //an exception is thrown and we end up here. Testing some
        //properties that all elements have. (works on IE7)
        return (typeof obj==="object") &&
          (obj.nodeType===1) && (typeof obj.style === "object") &&
          (typeof obj.ownerDocument ==="object");
      }
    }
    
[/code]

`obj instanceof HTMLElement` で確認できる場合はそれを利用し、  
そうでない場合は、

  * そのオブジェクトのデータ型が "object"
  * nodeTypeが 1 (`ELEMENT_NODE`)
  * styleプロパティのデータ型が "object "
  * ownerDocumentプロパティのデータ型が "object"

以上すべてを満たせば、関係性からHTMLElementでしょうと判断しています。

別の回答でフレームワークの機能を使って確認するというのもあるようです。

ただ気を付けて欲しいのが、たとえばjQueryなどフレームワークがラップしているオブジェクトは条件にあてはめられるとは限りません(多くの場合当てはまりません)。

たとえばChromeで、

[code]

    <div id="hoge"></div>
    
[/code]

があったとして

[code]

    var x = document.getElementById("hoge");
    if(x instanceof HTMLElement) Console.log("true");
    if(typeof x.style === "object") Console.log("true");
    
[/code]

どちらもtrueと出力されますが、

[code]

    var jqx = $("#hoge");
    if (jqx instanceof HTMLElement) Console.log("true");
    if (typeof jqx.style === "object") Console.log("true");
    
[/code]

はどちらも出力されません。  
以下ならtrueと出力されます。

[code]

    if (jqx[0] instanceof HTMLElement) Console.log("true");
    if (typeof jqx[0].style === "object") Console.log("true");
    
[/code]

`DOM要素`という言葉でどの範囲を想像しているかわかりませんが、フレームワークを使っている場合は気を付けてください。

