脱jQuery .attr()

属性値を取得したり変更したり出来る .attr() のネイティブ書き換えです。これまでにも何度か書き換えの記事で既に登場してるので再登場となります。

詳しくは 脱jQuery その1 を御覧ください。

without-jquery

.attr()（属性を取得）

jQuery

$("#myimage").attr("src")

書き換え JavaScript

document.getElementById("myimage").getAttribute("src")

attribute の省略版が attr ということになります。使い方は単純で getAttribute() のカッコ内に取得したい属性値を入れることで取得できます。

JavaScript の属性取得には別の方法を使える属性もあり、そちらのほうがメジャーなのですが、その方法は取得できない属性もあります。全て属性値を万能に取得できる方法は上記の方法となります。

他の方法も知りたい方は下記ページをご参照ください。

参考：属性値取得

.attr()（属性を変更）

jQuery

$("#myimage").attr("src", "/image2.png")

書き換え JavaScript

document.getElementById("myimage").setAttribute("src", "/image2.png")

get が取得なので set とすることで設定できます。

.attr() の使い方と似ているので特に難しさはないと思います。こちらも別の方法もあるのですが getAttribute() と同じく万能な方法はこれです。

まとめ

jQueryJavaScript
A.attr("B")A.getAttribute("B")
A.attr("B", "C")A.setAttribute("B", "C")