DOMオブジェクトとjQuery オブジェクトで取得できる属性の違い。

Question

###疑問
画面上のあるボタンをクリックし、クリックイベント中にボタンの属性を取得する際に、
DOMオブジェクトから属性を取得する場合と、
jQueryオブジェクトから属性を取得する場合とで、
挙動が異なるように見える。

なぜ、DOMオブジェクトのプロパティを直接取得しようとした場合、取得できないのでしょうか?

DOMオブジェクトとjQueryオブジェクトの関係を理解していないことが原因の疑問かと思います。
DOMオブジェクトとjQueryオブジェクトの関係などくわしく解説しているサイトや、書籍など合わせてご教示いただけると幸いです。

###該当のソースコード

(前略)
    <input type="button" name="selectButton" onclick="" value="選択"  href="http://hoge/huga">
(攻略)

function(e){

  e.target.href; // 結果:undefined (これは、DOMオブジェクトのプロパティにドットアクセスしているんですよね?)

  let $target = $(e.target);
  $target.attr("href"); // 結果:http://hoge/huga (これは、jQueryオブジェクトのプロパティを取得しているんですよね?)

}

Answer 1

e.target.href;
はDOMオブジェクトのhref「プロパティ」を参照しています。

それに対して

$target.attr("href");
はjQueryオブジェクトを経由して、DOMオブジェクトのhref「属性」を参照しています。

HTMLのタグに対して正しい属性を設定した場合は、その属性の値もプロパティの値も参照することができます。例えばaタグに対してはhref属性を設定することが可能なので、aタグに対しては上記のいずれの書き方をしても参照できるはずです。

しかしinputタグには本来、href属性を設定することができません。このような場合、設定した属性そのものは参照できても、プロパティは参照できません。よってe.taget.hrefの結果がundefinedになるのです。

ご質問のコードの場合、
e.target.getAttribute('href');
と記述すればhref「属性」を参照することになるため、属性値が取得できます。

同様にjQueryでも
$target.prop('href');
と記述すればhref「プロパティ」を参照することになるため、undefinedになります。

但し、そもそもタグに対して不正な属性を設定すべきではありません。

Comments

[usukuti_hanako]

ご回答、ありがとうございます。
ご指摘の通り、
e.target.getAttribute('href');
で取得できました。

href「プロパティ」とhref「属性」は別物なのですね...。
不正な属性でも、指定してあるものはプロパティとして、DOMオブジェクトに取り込まれているものと思っておりました。
プロパティと属性の違いについて調べてみます。
ありがとうございました。

Answer 2

e.target.getAttribute("href")
などで参照すればよいのではないでしょうか？
ただしあまりユーザーが勝手に拡張するのはどうかと思いますので
data-hrefなど工夫が必要になると思います

Comments

[usukuti_hanako]

ご回答、ありがとうございます。
ご指摘の通り
e.target.getAttribute('href');
で取得できました。

不正な属性を設定しているのは分かっていたのですが、なぜプロパティへのアクセスでは取得できないのかが気になっておりました。
実際の実装時には、data-hrefなどを使用するように検討してみます。
ありがとうございました。