<script type="text/javascript">
<!--
document.write(document.title);
// -->
</script>
タイトルバーに表示されている名前を取得します。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function changeTitle() {
document.title = "こんにちは";
}
// -->
</script>
</head>
<body>
<a href="javascript:changeTitle();">タイトル変更</a>
</body>
</html>
タイトル変更（クリックするとタイトルバーのタイトルが変わります）
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function tooltip() {
if (document.getElementById) {
document.getElementById("image").title = "変わりましたか？";
}
}
// -->
</script>
</head>
<body>
<img src="./image.jpg" border="0" alt="" onclick="tooltip();" title="クリックすると？" id="image">
</body>
</html>
通常、document.title はタイトルバーに表示するのに対して、とあるエレメントに指定するとツールチップ表示されます。これはタグに title 属性をつけるのと同等の効果があります。
この例では、通常時はタグ内の title 属性に指定した文字がツールチップ表示されて、画像をクリックすると変化します。
<script type="text/javascript">
<!--
window.onload = function() {
var img = document.images;
for (var i = 0; i < img.length; i++) {
img[i].title = "クリックすると拡大します";
}
}
// -->
</script>
ページの読み込みが完了後、ページ内の全ての画像を取得します。画像の取得には document.images を使用します。これを、img.length とするとページ内の画像の個数を取得することができますので、for 文を使用して全ての画像を参照して title 値として代入されるため、ツールチップとして表示されます。
この例では、「クリックすると拡大します」がページ内の全ての画像のツールチップに適用されます。
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
window.onload = function() {
var anc = document.links;
for (var i = 0; i < anc.length; i++) {
anc[i].title = anc[i].href;
}
}
// -->
</script>
</head>
<body>
<a href="http://www.yahoo.co.jp/">Yahoo</a>
<a href="http://www.google.com/intl/ja/">Google</a>
<a href="http://www.lycos.co.jp/">Lycos</a>
<a href="http://www.infoseek.co.jp/">Infoseek</a>
<a href="http://www.goo.ne.jp/">goo</a>
<a href="http://www.excite.co.jp/">Excite</a>
<a href="http://fresheye.com/">fresheye</a>
</body>
</html>
ページの読み込みが完了後、ページ内の全てのリンクを取得します。リンクの取得には document.links を使用します。これを、anc.length とするとリンクの個数を取得することができますので、それを for 文を使用して全てのリンクを参照して、href の値 (URL) が title に代入されるため、ツールチップとして表示されます。
別の方法を用いてのアンカータグを取得するには document.getElementsByTagName("タグの名前") を使います。リンクを生成するタグは「a」なので、document.getElementsByTagName("a") となります。また、Internet Explorer 限定ならば document.all.tags("a") とすることもできます。
この例では、ページ内の全てのリンクにおいて、リンクに触れるとそのリンク先の URL がツールチップに表示されます。