[JavaScript] attributeについての調査

2015年12月19日

Javascript テクノロジー プログラミング

javascriptを使ってプログラムをしていると、不思議と感じる事が多々あります。 今回はアトリビュートと言われるタグ属性での不思議だった箇所を調査してみたので、結果をメモしておきます。

不思議ポイント

# http://hogehoge.com/index.html <a href="demo.html">Demo</a> サンプルとして上記のようなURLを開いて、AリンクのHTMLがあった場合、href属性を取得する場合、以下の様に取得すると、 var link = document.getElementsByTagName("a"); console.log(link.href); > http://hogehoge.com/demo.html URLのフルパスが返ってきます。 これをgetAttributeで行うと var link = document.getElementsByTagName("a"); console.log(link.getAttribute("href")); > demo.html 記述してある文字列が返ってきます。

フルパスはどんな時に役立つのか?

おそらくJavaScriptの仕様なんでしょうが、確かにフルパスURLで返ってくれると、ローカルパスで書かれていた時に、URLに変換するのが難しいパターンがあるので、そういった時には便利だと思います。 # http://hogehoge.com/contents/test/index.html <a href="../../demo.html">Demo</a> このように階層を移動するような記述がされていた時など、表示しているURLを階層分解してフルパスを取得するのは人手間かかりますが、フルパスが返るとらくな場合もありますね。 var link = document.getElementsByTagName("a"); console.log(link.href); > http://hogehoge.com/demo.html console.log(link.getAttribute("href")); > ../../demo.html

他の属性も調査

Imageのsrc属性

# http://hogehoge.com/index.html <img src="img.jpg" /> var elm = document.getElementsByTagName("img"); console.log(elm.src); > http://hogehoge.com/img.jpg console.log(elm.getAttribute("src")); > img.jpg imageタグのsrc属性も通常はフルパスで返ってきます。 画像URLの一覧を取得する場合は.srcで取得するのがいいでしょう。

イベント関数など

# http://hogehoge.com/index.html <div onclick="alert(1)">alert</div> var elm = document.getElementsByTagName("div"); console.log(elm.onclick); > function onclick(event) { > alert(1) > } console.log(elm.getAttribute("onclick")); > alert(1) functionで返ってくる事が便利なパターンとしては、このまま実行するような使い方はできるかもしれませんね。 例えば elm.onclick(); とすると、確かに関数は実行されますが、EVENTという引き渡し値を受け渡すのは結構困難かもしれない。