Search
  1. ドキュメントの出力〔open、clear、closeメソッド〕
  2. 文字列の出力〔writeメソッド/writeInメソッド〕
  3. 特定のID名のオブジェクトにアクセスする〔getElementByIdメソッド〕
  4. 特定のname属性のオブジェクト全てにアクセスする〔getElementsByNameメソッド〕
  5. 特定の要素名のオブジェクト全てにアクセスする〔getElementsByTagNameメソッド〕

ドキュメントの出力
open、clear、closeメソッド

unknown

document.open()
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

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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop