Webブラウザのオブジェクト

オブジェクトの階層構造

  • Webブラウザ上の主なオブジェクトには、windowオブジェクトを頂点とする階層構造があります



f:id:web-css-design:20160926005914p:plain

windowオブジェクト

  • 新規ウィンドウを開く
  • windowオブジェクトのopenメソッドを使用します
  • その戻り値は、生成されたwindowオブジェクトになります
  • windowオブジェクトは、Webブラウザが自動的に生成するオブジェクトです
  • プログラム内で開いた「windowオブジェクト」の記述は省略できません
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>別ウィンドウを開く</title>
<script>
function openWin() {
var win = window.open('', '', 'width=520, height=400'); //windowを開く
  win.document.open(); //documentオブジェクトを開く
  win.document.write('<p><button ');
  win.document.write('onclick="window.close()">'); //イベントハンドラ
  win.document.write('閉じる</button><p>'); //[閉じる]ボタンを表示
  win.document.close(); //documentオブジェクトを閉じる
}
</script>
</head>
<body>
<p>
<button onclick="openWin()">開く</button>
</p>
</body>
</html>
既存のWebページをロードする
var win = window.open('http://google.co.jp', '', 'resizable=yes', 'width=600, height=400');
  • 引数１：URL
  • 引数２：ウィンドウ名を指定しますが、通常は空
  • 引数３：サイズ変更
  • 引数４：幅（ピクセル指定）
  • 引数５：高さ（ピクセル指定）


openメソッドの主なオプション
オプション 設定値 説明
menubar yes または no メニューバーを表示するかどうか
resizable yes または no ウィンドウサイズを可変にするかどうか
scrollbars yes または no スクロールバーを表示するかどうか
status yes または no ステータスバーを表示するかどうか
toolbar yes または no ツールバーを表示するかどうか
width ピクセル値 ウィンドウの幅
height ピクセル値 ウィンドウの高さ

プログラムでHTML要素を出力
  1. 最初の引数を空文字列「' '」にwindowオブジェクトのopenメソッドを実行する
  2. documentオブジェクトのopenメソッドを実行する
  3. documentオブジェクトのwriteメソッドでHTML要素を書き出す
  4. documentオブジェクトのcloseメソッドを実行する


ダイアログボックス内の表示を改行

  • エスケープシーケンス「\n」で改行
まとめ
  • 新規ウィンドウを開くには、windowオブジェクトのopenメソッドを使用する
  • 新規ウィンドウにHTMLを出力するには、documentオブジェクトのopenメソッド、writeメソッド、closeメソッドの順に実行する

documentオブジェクト

  • documentオブジェクトは、windowオブジェクトのdocumentプロパティの中にあるオブジェクトです
  • ブラウザで表示されているHTML文書やCSSの内容を取得したり操作したりするために使うプロパティやメソッドが用意されています


プロパティ名 内容
title HTML文書のtitle要素の内容
URL HTML文書のURL
referrer HTML文書へリンクしている文書のURL
lastModified HTML文書の最終更新
links linkオブジェクト（文書内のすべてのa要素とarea要素）
forms formオブジェクト（文書内のすべてのform要素）
images imageオブジェクト（文書内のすべてのimg 要素）




メソッド名 機能
open() 新しい文書の出力を開始する
close() 新しい文書の出力を終了する
write() 文書内に文字列を出力する
writeIn() 文書内に文字列を出力して、改行する
getElementsByTagName() 要素を取得する
getElementById() id名にマッチする要素取得する
getElementsByClassName() class名にマッチする要素を取得する
querySelector() CSSのセレクタ名にマッチする要素を取得する