2014年9月27日土曜日

documentオブジェクト(windowオブジェクト内の一つ)

documentオブジェクトはJavaScriptのコードが書かれているファイル内にあるHTMLからオブジェクトや値を取り出したり、HTMLに値を挿入する時に使用します。document.write()を利用することで直接文字列を表示することも可能です。

JavaScriptで書いた文字列を直接表示したい場合は、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>

<script>
var text = "JavaScriptで書いた文字列です。";
document.write(text);
</script>

</body>
</html>

この様に<body>タグ内で<script>タグを挿入して、その中でdocument.write()をすることで、JavaScriptの処理内容を表示することができます。
(<!DOCTYPE html>から始まるHTMLの記述無しの<script>タグのみの記述の場合でもdocument.write()の処理結果は表示されます。)

表示する他にHTML側に記載されているタグをdocument.querySelector()でオブジェクトとして取得することもできます。 

<!DOCTYPE html>
<html>
<head>
<title>sample</title>
</head>
<body>

<input type="text" id="form1" value="">

<script>
//id=”form1”のinputタグをオブジェクトとして取得する
var form = document.querySelector("#form1");
console.log(form);
</script>

</body>
</html>

console.log(form)の結果は

form = {
    type: "text",
    id: "form1",
    value: ""
};

こんなイメージのオブジェクトが表示されます。
(オブジェクトの操作に関しては、document.querySelectorの説明に記載)

documentオブジェクトでは、HTML側にあるタグをオブジェクトとして取得するだけでなく、HTMLタグを作成して、任意の箇所に挿入することも可能です。その時にはdocument.createElement("タグ名");で作成します。

<div id="area"></div>

<script>
//<div id="area"></div>を取得
var area = document.querySelector("#area");

//<input>タグを生成
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", "form");
input.value = "test";

//生成したinputタグを<div id="area">{ここに入れる}</div>
area.appendChild(input);
</script>

このコードで、<input type="text" id="form" value="test">というタグを生成し、areaで囲まれた箇所にappendChild()でタグ内に作成したinputタグを挿入して表示することができます。

他にdocumentオブジェクトでは今開いているページのURL等の情報を調べることもできます。URLを調べる場合はdocument.documentURI;というプロパティを指定します。

//今開いているファイルのURLを表示する
console.log(document.documentURI);

documentについての詳細な説明(MDN)
document | Mozilla Developer Network
投稿者 時刻:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)