attr()メソッド応用編
前回attr()メソッドの基本編として、
attr()メソッドを使って属性値の取り出し、属性値の変更、複数の属性値の変更ができるようになりました。
そこで今日はattr()メソッドの応用編として、
属性の削除方法、attr()とprop()の違いを勉強していきたいと思います。
属性の削除
属性自体を削除したいときは、
attr()メソッドの派生型「removeAttr()」を使いましょう。
removeAttrの書き方
例えば1行目のようなaタグがあるとすると、
3行目のようにremoveAttr(削除したい属性名)と書くことで、
属性自体を削除できます。
今回はaタグのclass属性を削除できました。
attr()とprop()の違い
prop()とはなにか
「prop()」はHTML要素に付与されている「id・class・name」…などの属性や、「checked・selected」…などのプロパティを取得できます。
特定のhtml要素の属性を取り出すには、どちらも同じように使えそうです。...が、物によっては取り出した値が変わってくる場合があるみたい。
例えば、どちらも同じようなinputタグにクリックする度に、
属性の値を取り出そうとしています。
この例では、input要素にあらかじめ「checked」プロパティが付与されているのが分かります。
input要素に対して「prop(‘checked’)」と記述するか「attr('checked')」と記述するかでことで取得した値が変わってきてます、
左のattr()は true が、右の prop()では checked が返されています。
これは2つのコードの認識方法が違うことから起きています。
attrは純粋に 属性における値 を取得する
checkされてる
↓
checkedという『属性』がある
↓
checked
一方でpropは、checkedという プロパティの真偽 を取得してくれる
checkされてる
↓
checkedという『プロパティ』はtrue
↓
true
というように同じコードでもどのような返り値をだしてくれるかは
メソッドによってかわってくるので、
気をつけて使い分けをした方がよさそうですね!!!
また勉強になりました