HTMLでのid とnameの違い

HTMLとJavaScriptを使ってWebページを作っていますが、 id と name の使い分け方がよくわかりません。 id は各エレメントに個別に与える識別子と認識していて、getElementById() メソッドなどでよく使うのですが、それと name プロパティーはどう違うのでしょうか？
あるサンプルコードに次のようなものがありました。

<a href="http://www.google.com" name="google_link">
<img src="google.gif" id="engine-1" alt="google graphic">
</a>
というHTML部分があり、しばらく後に

function show_attribs()
{
var attribs="";
attribs += "Link name: " + window.document.getElementById("engine-1").name;
.....
alert(attribs);
}
というJavaScriptの関数があり、結果としてアラートボックスに　
Link name: google_link と表示されるものです。

よくわからないのは、"engine-1" という　id で取得した　<img> エレメントが、 <a> エレメントに設定したはずの name　プロパティー とその値を持っているということです。なんだか二つのエレメントが一体になったように扱われていますが、なぜそうなるのかわかりません。

どなたかよく説明していただけないでしょうか。お願いします。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/10/12 17:07

Link_nameを呼び出せば当然のことながら、親であるA要素のname属性の値が参照されます。

nameプロパティではなく、attrですからattribute(属性)です。
idは文書中に一箇所しかありえませんからjavascriptのターゲットとして使用するのが簡単です。
HTMLの属性のnameは、通常は一箇所ですがFORMの内部などでは複数存在し得ます。
<form>
　<input type="radio" name="ABC" value="123">
　<input type="radio" name="ABC" value="234">
　<input type="radio" name="ABC" value="456">
とか・・
　気をつけないとならないのは、リンクに関しては、name属性とid属性は同じ名前空間を持つことです。
BUTTON, TEXTAREA, APPLET
, SELECT, FORM, FRAME, IFRAME, IMG, A, INPUT, OBJECT, MAP, PARAM, META要素がname属性を持ちえますが、そのうちA、APPLET、FORM、FRAME、 IFRAME、IMG、MAP要素に関しては、idと同じ必要があります。それ以外(BUTTON, TEXTAREA, SELECT, INPUT, OBJECT, PARAM)は、id属性値とname属性値は異なっても良いです。nameは一意である必要は、条件がありますが)ありません。

この回答へのお礼

早速詳しい回答を頂き、有難うございます。
名前空間とか、なんだか難しそうなものが出て来ましたが、まだよくわからないので自分でも研究してみようと思います。
とりあえず、id は一意の識別子で name は複数要素を持つタグの中で共通に使えるということを覚えておきたいと思います。

お礼日時：2012/10/13 15:16