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という引き渡し値を受け渡すのは結構困難かもしれない。
