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>