| ポイント |
<![CDATA[var linkID = "yahoo"; // リンクを設定するタグのID
var linkURL = "http://www.yahoo.co.jp/";
var baseTag = document.getElementById(linkID);
var link1 = baseTag.firstChild.nodeValue;
var aTag = document.createElement("a");
aTag.href = linkURL;
aTag.appendChild(document.createTextNode(link1));
baseTag.replaceChild(aTag, baseTag.firstChild);
<span id="yahoo">Yahoo JAPAN</span>
]]>
|
| 説 明 |
HTMLのaタグを使わずに、テキストや画像にリンクするには、あらかじめspanタグやimgタグにID名を指定します。このIDを目印にしてdocument.getElementById()で内容（最初のノード）を読み出します。サンプルではこの読み出した文字は「Yahoo JAPAN」になります。次にリンクはdocument.createElement("a")を使ってタグを生成します。このタグ（オブジェクト／ノード）にhref属性値などを設定します。後は、spanタグとaタグを置換します。これでリンクが設定されます。
|
| サンプル |
<![CDATA[
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>aタグをページ内に記述せず、JavaScriptでリンクを設定する (DOM Scriptingの場合)</title>
<script type="text/javascript"><!--
window.onload = function(){
var linkID = "yahoo"; // リンクを設定するタグのID
var linkURL = "http://www.yahoo.co.jp/";
var baseTag = document.getElementById(linkID);
var link1 = baseTag.firstChild.nodeValue;
var aTag = document.createElement("a");
aTag.href = linkURL;
aTag.appendChild(document.createTextNode(link1));
baseTag.replaceChild(aTag, baseTag.firstChild);
}
// --></script>
</head>
<body>
<h1>aタグをページ内に記述せず、JavaScriptでリンクを設定する (DOM Scriptingの場合)</h1>
<p>
このスクリプトでは後付けで<span id="yahoo">Yahoo JAPAN</span>にリンクできます。
</p>
</body>
</html>
]]>
|
| 補足説明 |
なし
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
aタグをページ内に記述せず、JavaScriptでリンクを設定する (DOM Scriptingの場合)
