質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

3950閲覧

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

koikuti

総合スコア50

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2017/04/13 06:03

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

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

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

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

HTML

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

Javascript

1function(e){ 2 3 e.target.href; // 結果:undefined (これは、DOMオブジェクトのプロパティにドットアクセスしているんですよね?) 4 5 let $target = $(e.target); 6 $target.attr("href"); // 結果:http://hoge/huga (これは、jQueryオブジェクトのプロパティを取得しているんですよね?) 7 8}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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になります。

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

投稿2017/04/13 06:27

KuninoriTanaka

総合スコア93

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koikuti

2017/04/13 06:34

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

0

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

投稿2017/04/13 06:14

yambejp

総合スコア115275

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koikuti

2017/04/13 06:36

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問