5

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

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

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

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

2 件の回答 2

8

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

Javascript isDOM — How do you check if a Javascript Object is a DOM Object?

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

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");
  }
}

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

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

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

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

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

たとえばChromeで、

<div id="hoge"></div>

があったとして

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

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

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

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

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

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

5

Angular.jsisElement があったなと思ったので、そっちのソースを追ってみました。

function isElement(node) {
  return !!(node &&
    (node.nodeName  // we are a direct element
    || (node.prop && node.attr && node.find)));  // we have an on and find method part of jQuery API
}
  • Element であるか → nodeName を持つか
  • jQuery でラップされた要素であるか → prop/attr/find を持つか

ぐらいしか見ていないですね。これで十分なのでしょう。(ただ {nodeName:"monkey"} で騙せそう・・・)

一方、 jQuery の方は Node.nodeType を見ているだけのようでした。まとめると、こんな感じ:

function isNodeQ(obj) { // jQuery 式
    return obj && obj.nodeType && obj.nodeType === 1;
}

function isNodeA(obj) { // Angular 式
    return obj && obj.nodeName;
}

一方、StackOverflow 英語版には多く質問がありました。様々なのでどれとっていいかわかりませんねこれ。
あえてピックアップすると、

この質問の mcmlxxxiii からの回答にあるコード isNode, isElement がなかなか興味深いパラノイドなチェックをしています。ブラウザが最新の物であれば、 NodeHTMLElement のインスタンスであるかのチェックが有効なんですね。まあ実際は、プロパティを1つ2つ存在チェックすれば、考えなくても良いぐらいのことだと。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。