ブログデザイン備忘録 ~ドキュメント制御

1. Documentへの書き込み
2. Document情報の参照
3. Document情報の取得と書き込み
4. まとめ

　今回はJavascript関数のうちDocumentに関するものについて紹介していく。なお実行サンプルについてはChromeでは確認済だがブラウザによっては動作しないものがあるかもしれない。

atatat.hatenablog.com

1. Documentへの書き込み

ドキュメント上に文字列を書き出すにはdocument.write("文字列")を用いる

<script>
document.write("テスト文字列表示");
</script>

またdocument.writeln("文字列")は文字列の書き出しと改行を実行する

<script>
document.writeln("テスト文字列表示+改行");
</script>

2. Document情報の参照

文字列を出力するためにわざわざ関数を用いるメリットがないように思えるが、ドキュメントに関する参照情報を出力する上で役に立つ。

ドキュメントのURLを参照するには、document.URLを用いる。上記のdocument.write()と組み合わせて使用すると

<script>
document.write("このページのURL：" + document.URL);
</script>

現在参照しているURLが表示される。あるいはdocument.locationでもほぼ同じ効果が得られる

<script>
document.write("このページのURL：" + document.location);
</script>

ドキュメントのドメインを参照するにはdocument.domainを用いる。

<script>
document.write("このページのドメイン：" + document.domain);
</script>

ドキュメントのタイトルを参照するにはdocument.titleを用いる。

<script>
document.write("このページのタイトル：" + document.title);
</script>

最終更新日を表示するには document.lastModifiedを用いる

<script>
document.write("最終更新日：" + document.lastModified);
</script>

3. Document情報の取得と書き込み

ducument.getSelection()はブラウザ中の選択された文字列を返す。以下は使用例でgetSelection()で取得した文字列をdocument.getElementById("tenki").textContentにより "tenki"というidをもつタグにテキストの内容として出力するようになっている。document.getElementById(id)は何度か現れているが、指定されたidの参照を返す関数で上書きすることもできる。今回はtextContentをducument.getSelection()で取得した文字列で上書きすることで<span id="tenki"> </span>に表示させるようにしている。

<script>
document.onselectionchange = function() {
    var selText = document.getSelection();
    document.getElementById("tenki").textContent = selText;
}
</script>
<p>選択したテキストを以下へ転記。</p>
<span id="tenki"> </span>

選択すると、選択したテキストを以下へ転記。