attr()メソッド応用編

前回attr()メソッドの基本編として、

attr()メソッドを使って属性値の取り出し、属性値の変更、複数の属性値の変更ができるようになりました。

 

そこで今日はattr()メソッドの応用編として、

属性の削除方法、attr()とprop()の違いを勉強していきたいと思います。

 

属性の削除

属性自体を削除したいときは、

attr()メソッドの派生型「removeAttr()」を使いましょう。

 

removeAttrの書き方

f:id:lilybelly:20181014195955p:plain

例えば1行目のようなaタグがあるとすると、

3行目のようにremoveAttr(削除したい属性名)と書くことで、

属性自体を削除できます。

 

今回はaタグのclass属性を削除できました。

 

attr()とprop()の違い

prop()とはなにか

「prop()」はHTML要素に付与されている「id・class・name」…などの属性や、「checked・selected」…などのプロパティを取得できます。

 

特定のhtml要素の属性を取り出すには、どちらも同じように使えそうです。...が、物によっては取り出した値が変わってくる場合があるみたい。

 

 

例えば、どちらも同じようなinputタグにクリックする度に、

属性の値を取り出そうとしています。

 

f:id:lilybelly:20181014202047p:plainこの例では、input要素にあらかじめ「checked」プロパティが付与されているのが分かります。

input要素に対して「prop(‘checked’)」と記述するか「attr('checked')」と記述するかでことで取得した値が変わってきてます、

左のattr()は true が、右の prop()では checked が返されています。

 

これは2つのコードの認識方法が違うことから起きています。

 

attrは純粋に 属性における値 を取得する

 checkされてる
  ↓
 checkedという『属性』がある
  ↓
 checked

 

一方でpropは、checkedという プロパティの真偽 を取得してくれる

 

 checkされてる
     ↓
    checkedという『プロパティ』はtrue
     ↓
    true

 

というように同じコードでもどのような返り値をだしてくれるかは

メソッドによってかわってくるので、

気をつけて使い分けをした方がよさそうですね!!!

 

また勉強になりました