Documentオブジェクトドキュメント・文字列の出力
- ドキュメントの出力〔open、clear、closeメソッド〕
- 文字列の出力〔writeメソッド／writeInメソッド〕
- 特定のID名のオブジェクトにアクセスする〔getElementByIdメソッド〕
- 特定のname属性のオブジェクト全てにアクセスする〔getElementsByNameメソッド〕
- 特定の要素名のオブジェクト全てにアクセスする〔getElementsByTagNameメソッド〕
ドキュメントの出力
open、clear、closeメソッド
unknown
document.open()
document.clear()
document.close()
document.clear()
document.close()
| メソッド | 説明 |
|---|---|
| open() | ドキュメントを開き、書き出し可能な状態にする。 |
| close() | openメソッドで開かれたドキュメントを閉じる。 |
| clear() | ドキュメントの内容を消去。 |
documentオブジェクトのopen()メソッド、close()メソッド、clear()メソッドは、ウィンドウやフレームのドキュメントの内容を書き出したり、変更する場合に使用します。
例えば、フレームに名前をつける場合はフレーム名.document.open()、ウィンドウに名前をつける場合はウィンドウ名.document.open()のようにオブジェクトの名前を指定します。
openメソッドで開いたドキュメントは必ずclose()メソッドで閉じる必要があります。
※IE9から動作せず。
<script type="text/javascript">
document.clear();
document.open();
document.write("あいうえお");
document.close();
</script>
文字列の出力
writeメソッド／writeInメソッド
unknown
document.write('文字列')
document.writeln('文字列') ※'l'は小文字のL
document.writeln('文字列') ※'l'は小文字のL
writeメソッドは、指定した文字列を出力します。
writelnメソッドは、指定した文字列の末尾に改行文字（\n）を挿入して出力します。
改行要素<br />ではないため、表示上改行を有効にしたい場合はpre要素を使用します。
文字列には、HTMLタグや変数も指定できます。 複数の文字列をつなげる場合は、＋記号またはカンマで結合します。
<script type="text/javascript">
var now=new Date();
document.write("今日は<em>"+now.getDate()+"<\/em>日です<br \/>");
document.write("明日は<em>",(now.getDate()+1), "<\/em>日です<br \/>");
/* writeln は文字列の末尾に改行文字（\n）が挿入されます */
document.write("<pre>");
document.writeln("一昨日は<em>"+(now.getDate() - 2)+"<\/em>日です");
document.writeln("昨日は<em>",(now.getDate() - 1),"<\/em>日です");
document.write("<\/pre>");
</script>
ウィンドウに指定した画像ファイルを出力
※Windows 7では、ローカルパスが「C:\fakepath\～」になるため動作せず。
サンプルを見る
<script type="text/javascript">
/*
* ウィンドウに指定した画像ファイルを出力
* @param gazo 画像ファイルのパス
*/
function winOpenDocWrite(gazo){
if(gazo==""){
return alert("画像ファイルが指定されていません");
}
/* 画像ファイルかどうか拡張子チェック */
var type=gazo.toLowerCase().slice(-4);
if(type==".jpg" || type==".gif" || type==".bmp" || type==".png"){
}else{
return alert("画像ファイルではないファイルが指定されています。\n\n拡張子がjpg,gif,bmp,pngの画像ファイルを指定してください。");
}
/* ウィンドウを開く */
var win;
if(!win || win.closed){
win=window.open('/content/demo/test.php','test','');
}
win.focus();
/* ドキュメントを開く */
win.document.open();
/* ドキュメントクリア */
win.document.clear();
/* ドキュメントに文字列を出力 */
var htm='';
htm+='<!DOCTYPE html>';
htm+='<html>';
htm+='<head>';
htm+='<meta charset=utf-8">';
htm+='<title>タイトル<\/title>';
htm+='<\/head>';
htm+='<body>画像表示<br \/>';
htm+='<img src="'+gazo+'" alt="" border="0" \/>';
htm+='<p align=center><input type="button" value="閉じる" onclick="self.close()" \/>';
htm+='<\/bo'+'dy>';
htm+='<\/html>';
win.document.write(htm);
/* ドキュメントを閉じる */
win.document.close();
}
</script>
<form name="form1" enctype="multipart/form-data" action="#" method="post">
<input type="file" name="gazoPass" size="40" />
<input type="button" value="出力" onclick="winOpenDocWrite(this.form.gazoPass.value)" />
</form>
特定のID名のオブジェクトにアクセスする
getElementByIdメソッド
unknown
document.getElementById ( ID名 );
<style type="text/css">
p#copybox {
padding:10px;
background-color:#ccccff;
}
</style>
<form action="#">
<input type="text" value="今日はいい天気ですね～" id="motobox" />
<input type="button" value="テキストボックスの内容を表示" onclick="fGetElementById()" />
<p id="copybox">ボタンをクリックすると、テキストボックスの入力値がここに表示されます。</p>
</form>
<script type="text/javascript">
function fGetElementById(){
var motoObj=document.getElementById("motobox");
var copyObj=document.getElementById("copybox");
copyObj.innerHTML=motoObj.value;
}
</script>
特定のname属性のオブジェクト全てにアクセスする
getElementsByNameメソッド
unknown
document.getElementsByName ( 名前 );
<form action="#">
<p>
<input type="button" value="nameが'sex'の要素を取得" onclick="fGetElementsByName()" />
</p>
<p>
性別：
<label for="s1"><input type="radio" id="s1" name="sex" value="1" />男性</label>
<label for="s2"><input type="radio" id="s2" name="sex" value="2" />女性</label>
</p>
<p id="resGetElementsByName"></p>
</form>
<script type="text/javascript">
function fGetElementsByName(){
var s="";
var obj=document.getElementsByName("sex");
s+="name属性が'sex'の要素数は、"+obj.length+" つあります。<br>";
for(var i=0; i<obj.length; i++){
s+=obj[i].id+"="+obj[i].checked+"<br>";
}
document.getElementById("resGetElementsByName").innerHTML=s;
}
</script>
特定の要素名のオブジェクト全てにアクセスする
getElementsByTagNameメソッド
unknown
document.getElementsByTagName ( 要素名 );
<form action="#">
<input type="button" value="このページのDIV要素に使われているのID名を全て取得" onclick="fGetElementsByTagName()" />
<p id="resGetElementsByTagName"></p>
</form>
<script type="text/javascript">
function fGetElementsByTagName(){
var s="";
var divObj=document.getElementsByTagName("DIV");
s+="このページで使われているDIV要素数は "+divObj.length+" です。<br>";
s+="▼ そのうちID名があるものは以下のとおり<br>";
for(var i=0; i<divObj.length; i++){
if(divObj[i].id!="") s+="div#"+divObj[i].id+"<br>";
}
document.getElementById("resGetElementsByTagName").innerHTML=s;
}
</script>