とりあえず経緯から
「JavaScriptでアンカータグにrel=”nofollow”をつけたい」
それは、パシのSEOブログのパシさんがTwitterで発言したこの一言から始まりました。
それに対して、私がした返答は、
target.rel = "nofollow"
という、そっけない一言。
しかし実際のところ、パシさんがしたかったことは、
document.write("<a href="url" rel="nofollow" target="_blank">テキスト</a>");
というものでした。
ここは向上心の人一倍強いパシさん。
target.rel = "nofollow";
は「どうやって使うのか」と、興味を持ってしまったようです。
こうしてまた１人、JavaScriptの世界へ踏み入ることになってしまいました。
両者は何が違うの？
そもそも、
target.rel = "nofollow";
と、
document.write("<a href="'+url+'" rel="nofollow" target="_blank">テキスト</a>");
の違いとはなんなのでしょう。
実は、rel=”nofollow”を付けるという言葉にすると同じような結果でも、全く別物なのです。
前者（記述Aとします）は“オブジェクト”に対してrel=”nofollow”を付け、
後者（記述Bとします）は“文字列”に対してrel=”nofollow”を付けているのです。
では、文字列とオブジェクトとはどういったものなのでしょうか？
文字列とは
文字列というものは、日本語ですしなんとなくわかると思います。そう、ただの文字です。
記述Bは
document.write(任意の文字列);
というもので、
「この文書（document）に任意の文字列を書け（write）」という命令です。
この文書（document）というのは、JavaScriptが記述されているHTMLのことです。
JavaScriptが書いてある箇所に任意の文字列が書き出されます。
ですので、この文字列を編集することで、望みどおりの結果を得ることができます。
パシさんのやりたかった「リンクにrel=”nofollow”を付ける」ということは、
document.write("<a href="'+url+'" target="_blank">テキスト</a>");
の記述を
document.write("<a href="'+url+'" rel="nofollow" target="_blank">テキスト</a>");
に変更することで実現することができました。
オブジェクトとは
そして記述Bに対して、記述Aはというと、
target.rel = 値;
「対象のオブジェクト（target）のrel属性に値を代入しろ」
という命令です。
オブジェクトに対してrel属性を設定しています。
そもそもこのオブジェクトとは何なのでしょうか？
オブジェクトは、慣れていないと、存在しているのか存在していないのか分からないような、空を掴むような存在ですので、今はぼんやりと頭に浮かんでるような感じでも構いません。
JavaScriptはこのオブジェクトというもの対して属性をつけたりして動作していきます。
記述Bのdocument.writeの“document”も実はオブジェクトなのです。
documentというオブジェクトに対して書くという動作をしています。
そして記述Aのtarget.relも、”target”というオブジェクトに対してrel属性を代入するという動作をしています。
名前をつけられたオブジェクト
documentは前述した通りJavaScriptを記述してあるHTMLのことです。
これはJavaScriptが元々documentという名前を定めているものです。
しかし、targetというのは私が勝手にオブジェクトにつけた名前で、“任意の対象のオブジェクト”という意味を込めてで“target”と名づけました。
var target = new Object();
という記述で、targetという名前のオブジェクトを作ることができます。
この記述は、新規のオブジェクト（new Object()）をtargetという名前にしろ
という命令です。
このようにJavaScriptでは、自由に名前のついたオブジェクトを作ることができます。
ただ、この自由につけられる名前は、documentのような元々から定められている名前は使うことができません。
なので、
target.rel = 値;
だけでは、“targetが何なのか”という記述が抜けています。
targetが何かわからないのに、いきなりtargetに対して動作させようとしているので、
「targetってなんだよボケ！！」
ってJavaScript君に怒られてしまいます。
記述Aを動かす
それでは、記述Aが正しく動くようにしましょう。
あ、やっと本題の“記述Aの使い方”になりましたね。
ほんとにざっくりと書いたので、伝わっているかどうか怖いですが…(´Д｀;
ではまぁ、記述Aを動かしてみましょう。
var target = document.getElementById("link1");
arget.rel = 値;
これで動きます。
「targetは…この文書のlink1というidを持っているヤツだ。」
と、決め付けるのです。
※varとかの記述はここでは割合(´Д｀;)
ただ、HTMLに
<a href="url" id="link1">text</a>
なり、
<div id="link1">text</div>
といったid=”link1″をもったタグがないと、
「idがlink1のやつなんていねぇよ！」ってJavaScript君は怒ってしまいます。
と、まぁJavaScript君は結構シビアで怒りん坊です。
私が最初に返答した
target.rel = "nofollow";
という記述では、targetが何か書かれていないので、
パシさんがJavaScript君に怒られてしまうことになります。
それはアカン。
そこで私はきちんとJavaScript君が動いてくれるように、以下の記述に変えました。
var element = document.getElementsByTagName("a");
var mx = element.length;
for( var i = 0; i < max; i++) {
element[i].rel = "nofollow";
}
これは、ページ上の全てのaタグに、rel=”nofollow”を記述していくという恐ろしいJavaScriptです。
詳しく書くと、
/*
1. この文書のタグ名がa（aタグ）を全てelementへ代入（elementはオブジェクトに）
elementの中に全てのaタグ（0～複数）入った状態に
elementの中の１つ１つもオブジェクトになります。
*/
var element = document.getElementsByTagName("a");
/*
2. elementにいくつのオブジェクトがあるか数えます
*/
var mx = element.length;
/*
3. forで条件式が満たされている限り繰り返す
for(初期値;条件;初期値を増加)
iという数値（初期値 : 0）がmx（オブジェクトの数）より低ければ、繰り返しし続ける
繰り返す度にi++（iに+1）する
*/
for( var i = 0; i < mx; i++) {
/*
4. elementというオブジェクトのi番目のオブジェクトにrel="nofollow"を設定する
*/
element[i].rel = "nofollow";
}
このように、
target.rel = "nofollow";
というのは、何らかの方法でtargetとは何かを記述することでこのJavaScriptを使うことができます。
以下 後日追記
HTMLはオブジェクトとして取得できる
先ほどのJavaScriptの
// idをもとにオブジェクトとして取得する
var target = document.getElementById("link1");</p>
// タグ名をもとにオブジェクトとして取得する
var element = document.getElementsByTagName("a");
の部分のように、
JavaScriptはHTMLで記述されている要素を、オブジェクトとして取得できます。
そして、オブジェクトでは様々な属性をつけていくことができ、
この属性をつけることでrelだけではなく、styleの変更や画像（src）の変更、href（リンク先）の変更、classをつけたり、idを変えたりなどなど、HTMLで記述できることは全て書き換えるすることができます。
// name属性を元にオブジェクトとして取得する
var element = document.getElementsByName("a");
// クラス名を元にオブジェクトとして取得する
//（これは最近になってようやく主要ブラウザを中心に使えるようになりました）
var element = document.getElementsByClassName("a");
オブジェクトとして取得したものは、スタイルシートも変えることがでるので、
// スタイルシートを設定する target.style.position = "absolute"; target.style.top = 0;t arget.style.left = 0;
こうすれば、左上に固定することができますし。
これを、topを+1しながら繰り返し続ければ、targetは上から下に移動していくアニメーションになります。
フォローボタンなどで、スクロールしても同じ位置にくっついてくるものがありますが、
最近はスタイルシートのposition: fixed;に対応したブラウザが増えたので、これで対応することが多いですが、
一昔前は、前述のようなjavascriptで”スクロールバーの現在の位置を取得”して、その位置をtarget.style.topに代入していくことで、
常に同じ位置に表示できるようにしていました。
という、結構身近なところでJavaScriptは動いています。
追記 終わり
まとめ
と、まぁざっくりとかなーり砕いた感じで説明しました。
が、私自身にわかですし文才というものも皆無なので、
オブジェクトとはどういう存在なのかと聞かれると説明がムズカシイです(´Д｀;)
今回の一件で、hatenaの人気エントリーを表示するブログパーツにnofollowをつけるJavaScriptを書いたりしたので、
これを機にJavaScriptに興味を持つ方が増えたら嬉しいです（ものすごい厚かましいですけども）
FirefoxやGoogle Chromeのアドオン（拡張機能）もJavaScriptで作られているので、
JavaScriptが使えるようになればSEOに使えるアドオンとかも作れるように…。
それに、簡単なJavaScriptなら最近の検索エンジンは解析できるようなので、
SEOとJavaScriptももっと仲良くならないかなぁ、、、と思う次第です。