Web Design Leaves

ダイアログ表示・タイマー

Window オブジェクトは、ウィンドウ操作の機能の他にダイアログ表示やタイマー設定などの機能を提供します。

ダイアログ表示

Window オブジェクトでは、ダイアログを表示する alert, confirm, prompt というメソッドがあります。

これらのメソッドでダイアログを表示すると、ユーザは邪魔をされたと感じるので、現在ではこれらのメソッドが使われるのはデバッグのとき等です。

ダイアログボックスに表示される文字列は、HTML形式ではなくプレーンテキストで、レイアウトに使用できるのは、空白、改行、句読点記号のみになります。

これらのメソッドは、ダイアログボックスにユーザが応答するまでブロックされます。つまり、ダイアログボックスが表示された時点で、 JavaScript のコードは中断され、ユーザが応答すると、処理が再開されます。

alert()

メッセージを表示してユーザーに知らせ、ユーザがダイアログを閉じるまで待ちます。

confirm()

ユーザに確認を求め、ユーザは自分の操作を確認する場合は「OKボタン」を、取り消す場合は「Cancelボタン」をクリックします。confirm() は、以下の戻り値を返します。

• 「OKボタン」をクリックした場合： true
• 「Cancelボタン」をクリックした場合： false

<form onSubmit="return confirm('送信してもよろしいですか？');">
  <input type="submit" value="送信">
</form>

prompt()

ユーザに文字列の入力を求めます。入力された文字列は戻り値として返されます。キャンセルされた場合は、null が返ります。

<input type="button" id="prompt_btn" value="入力ダイアログ表示" >
<script type="text/javascript">
window.onload = function() {
  document.getElementById('prompt_btn').onclick = function() {
    var input = prompt("文字を入力してください。");
    alert("入力文字： " + input);
  } 
}
</script> 

タイマー機能

「タイマー」を参照ください。

Screen オブジェクト

Window オブジェクトの screen プロパティには、Screen オブジェクトへの参照が格納されています。Screen オブジェクトには、画面サイズや色数など の情報を提供するプロパティがあります。

width, height プロパティ

画面の表示サイズをピクセル単位で取得できます。

var screenWidth = screen.width;
var screenHeight = screen.height;

availWidth, availHeight プロパティ

利用可能な表示サイズを取得できます。利用可能な表示サイズとは、デスクトップのタスクバーなどの機能で 使用されるスペースを除いたサイズ。

var availWidth = screen.availWidth;
var availHeight = screen.availHeight;

availLeft, availTop プロパティ

Firefox 系のブラウザでは、Screen オブジェクトに availLeft と availTop プロパティを定義しています。（IEではされていない） 画面上で利用可能な領域の左上隅の座標を表す。

var availLeft = screen.availLeft;
var availTop = screen.availTop;

以下は実際に値を取得した例ですが、ブラウザにより値が異なっていることがわかります。

console.log(screen.width);
//IE & FF:  1920, Chrome: 1739

console.log(screen.height);
//IE & FF:  1080, Chrome: 979

console.log(screen.availWidth);
//IE & FF:  1920, Chrome: 1739

console.log(screen.availHeight);
//IE & FF:  1050, Chrome: 951

console.log(screen.availLeft);
//IE:  undefined, Chrome & FF: 0

console.log(screen.availTop);
//IE:  undefined, Chrome & FF: 0

console.log(screen.colorDepth);
//24  （モニタの色数）  

Navigator オブジェクト

ブラウザのバージョンやブラウザの表示可能なデータ形式など、ブラウザ全体に関する情報が Navigator オブジェクトに格納されていて、 Window オブジェクトの navigator プロパティで参照できます。

以前は、Navigator オブジェクトでブラウザを判定（ブラウザテスト）して、動作を変えるという方法が取られていましたが、 現在では機能テストのほうがよく使われています。以下はイベントハンドラ登録メソッドに対して機能テストを使った例です。

if(window.addEventListener){
  //addEventListener()メソッドがサポートされていればこれを使う。
  //Firefoxなどの標準準拠のブラウザ用のコードを記述
}
else if(window.attachEvent){
  //attachEvent()メソッドが存在すれば、これを使う。
  //IE用のコードをここに記述
}
else {
  //両方のメソッドが利用できない場合のコードをここに記述。
}

但し、あるブラウザの特定のバージョンだけに存在するバグに対処しなければならない場合などにはブラウザテストが使えます。 以下は Navigator オブジェクトのプロパティです。

appName

ブラウザの名前。IEでは「Microsoft Internet Explorer」、FirefoxなどNetscapeベースのブラウザは「Netscape」になります。

appVersion

ブラウザのバージョン番号またはバージョン情報。ここで言うバージョン番号はブラウザ内部で管理しているバージョン番号。 ユーザに提示しているバージョン番号とは一致しません。

userAgent

ブラウザが HTTPのUSER-AGENT ヘッダで送る文字列。appName と appVersion の両方の情報が含まれているのが普通。

appCodeName

ブラウザのコード名。Navigator の場合はコード名として「Mozilla」が使われます。互換性のために IE でも同じ文字列が格納されている。

platform

ブラウザが実行されるハードウェア情報。

※Navigatorオブジェクトのプロパティは、ブラウザを正確に表していないので注意が必要です。

以下は、Navigator オブジェクトの各プロパティを表示するコードの例です。

var browser = "BROWSER INFORMATION: \n";
for(var propname in navigator){
  browser += propname + ": " + navigator[propname] + "\n";
}
console.log(browser);

以下は出力例です。（Firefox）

BROWSER INFORMATION: 
getBattery: function getBattery() {
    [native code]
}
vibrate: function vibrate() {
    [native code]
}
javaEnabled: function javaEnabled() {
    [native code]
}
getGamepads: function getGamepads() {
    [native code]
}
mozGetUserMedia: function mozGetUserMedia() {
    [native code]
}
sendBeacon: function sendBeacon() {
    [native code]
}
requestMediaKeySystemAccess: function requestMediaKeySystemAccess() {
    [native code]
}
registerProtocolHandler: function registerProtocolHandler() {
    [native code]
}
registerContentHandler: function registerContentHandler() {
    [native code]
}
taintEnabled: function taintEnabled() {
    [native code]
}
permissions: [object Permissions]
mimeTypes: [object MimeTypeArray]
plugins: [object PluginArray]
doNotTrack: unspecified
oscpu: Windows NT 6.1; WOW64
vendor: 
vendorSub: 
productSub: 20100101
cookieEnabled: true
buildID: 20170125094131
mediaDevices: [object MediaDevices]
serviceWorker: [object ServiceWorkerContainer]
hardwareConcurrency: 8
geolocation: [object Geolocation]
appCodeName: Mozilla
appName: Netscape
appVersion: 5.0 (Windows)
platform: Win32
userAgent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0
product: Gecko
language: ja
languages: ja,en-US,en
onLine: true

以下は、Navigator オブジェクトから必要な情報だけを取り出し、browser というオブジェクトに格納するコード（クライアントスニファ）の例です。

var browser = {
  version: parseInt(navigator.appVersion),
  isNetscape: navigator.appName.indexOf("Netscape") != -1,
  isMicrosoft: navigator.appName.indexOf("Microsoft") != -1,
  userAgent: navigator.userAgent
};
var info = "BROWSER INFORMATION: \n";
for(var propname in browser){
  info += propname + ": " + browser[propname]+ "\n";
}
console.log(info);

以下は出力例です。（Firefox）

BROWSER INFORMATION: 
version: 5
isNetscape: true
isMicrosoft: false
userAgent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0

Location オブジェクト

ウィンドウやフレームの location プロパティには Location オブジェクトへの参照が格納されています。 Location オブジェクトは、ウィンドウに現在表示されているドキュメントの URL を表すプロパティ（ URL についての情報）を持ち、 また、URL を変更するためのメソッドを提供をします 。

以下は、Location オブジェクトのプロパティです。戻り値の例は、現在の URL が以下の場合の結果です。

https://www.webdesignleaves.com:80/wp/?s=jquery#test

https://www.webdesignleaves.com/jquery/jq_basic_12.html?s=jquery#test の場合の例

console.log(window.location.hash);
//出力：#test 

console.log(window.location.host);
//出力：www.webdesignleaves.com

console.log(window.location.hostname);
//出力：www.webdesignleaves.com 

console.log(window.location.href);
//出力："https://www.webdesignleaves.com/jquery/jq_basic_12.html?s=jquery#test" 

console.log(window.location.pathname);
//出力：/jquery/jq_basic_12.html

console.log(window.location.port);
//出力なし（デフォルト）

console.log(window.location.protocol);
//出力："http:"  

console.log(window.location.search);
//出力：?s=jquery

以下は現在の URL のプロパティをコンソールに表示する関数の例です。

function showLocaction()
 {
   var x = window.location;
   var t = ['プロパティ - データ型 - 値',
            'window.location - ' + (typeof x) + ' - ' + x ];
   for (var prop in x){
     t.push(prop + ' - ' + (typeof x[prop]) + ' - ' +  (x[prop] || 'n/a'));
   }
   console.log(t.join('\n'));
 }

showLocaction();

以下は表示例です。

"プロパティ - データ型 - 値
window.location - object - https://www.webdesignleaves.com/jquery/jq_basic_12.html?s=jquery#test
href - string - https://www.webdesignleaves.com/jquery/jq_basic_12.html?s=jquery#test
origin - string - https://www.webdesignleaves.com
protocol - string - http:
host - string - www.webdesignleaves.com
hostname - string - www.webdesignleaves.com
port - string - n/a
pathname - string - /jquery/jq_basic_12.html
search - string - ?s=jquery
hash - string - #test
assign - function - function assign() {
    [native code]
}
replace - function - function replace() {
    [native code]
}
reload - function - function reload() {
    [native code]
}
toString - function - function toString() {
    [native code]
}
valueOf - function - function valueOf() {
    [native code]
}
toJSON - undefined - n/a"

参考：MDN window.location

location.href

現在アクセスしている完全な URL を取得します。location オブジェクトの toString() メソッドは href プロパティの値を返すので、URL の文字を取得するのに location.href の代わりに location と記述することもできます。

また、指定した URL に遷移します。

location.href = 'http://google.com';
//http://google.com に移動

location.hash にアンカーを指定することもできます。

location.hash = "#test";
//#test にスクロール

ファイル名の取得

以下のような方法でファイル名を取得することができます。

var url = window.location.href;

// 拡張子付き
var filename = url.match(".+/(.+?)([\?#;].*)?$")[1];

// 拡張子無し
var filename_no_ext = url.match(".+/(.+?)\.[a-z]+([\?#;].*)?$")[1];

または以下のように window.location.pathname でホスト以下のパスを取得し、それを split('/') で「/」区切りで配列に入れ、pop() で配列の最後の値を取得する方法もあります。

var file_name = location.pathname.split('/').pop();
var filename_no_ext = location.pathname.split('/').pop().replace(/\..+/, ""); 

window.location.pathname の代わりに、window.location.href を使うとアンカーや ? 記号に続く URL の部分があれば、それらも取得してしまいます。

var file_name_query = location.href.split('/').pop();

ディレクトリの取得

window.location.pathname を「/」で区切り、配列（dir_array）に格納します。さらに配列「dir_array」の、最後から数えて2番目のものを変数「dir_name」に格納します。

dir_array[dir_array.length -2] の「-2」を「-3」「-4」と変えることで任意の階層のフォルダパスを取得することができます。

var dir_array = window.location.pathname.split('/');
var dir_name = dir_array[dir_array.length -2];
console.log(dir_name);

また、以下のようにすると、ディレクトリのパスを取得できます。

var dir_array = window.location.pathname.split('/');

var dir_path = "";
for (var i = 0; i < dir_array.length -1; i++) { 
  dir_path += dir_array[i] + '/';
}

console.log(dir_path);

クエリ情報の取得

クエリ情報とは URL の末尾の ? 記号に続く部分で「キー名=値」で記述されています。この部分は、location.search で取得できます。以下は「キー：値」の形式で取得する関数の例です。また、値はエンコードされている可能性があるので、デコードします。

function getArgs(){
  var args = new Object();
  var query = location.search.substring(1); //検索文字列（疑問符以外）を取得
  var pairs = query.split("&");	    //&で分割
  for(var i=0; i<pairs.length; i++){
    var pos = pairs[i].indexOf('=');
    if(pos == -1)continue;	    //=がなければ飛ばす
    var argname = pairs[i].substring(0, pos);	  //名前を取り出す
    var value = pairs[i].substring(pos+1);	  //値を取り出す
    value = decodeURIComponent(value);	  //値をデコードする
    args[argname] = value;
  }
  return args;
}
var args = getArgs();
for(arg in args){
  console.log(arg + " : " + args[arg], "");
}

//URLがhttp://www.example.com/sample.html?name=Mike&age=32&country=USAの場合
//name : Mike  
//age : 32   
//country : USA

以下は、Location オブジェクトのメソッドです。

新しいドキュメントのロード

ウィンドウの location プロパティは、Location オブジェクトの参照を格納していますが、文字列を設定することもできます。 文字列を設定すると、ブラウザは文字列を URL として解釈し、その URL からドキュメントをロードして表示します。

if(!document.getElementById) location = "static.html";
//ブラウザが document.getElementById 関数をサポートしなければ、静的なページ(static.html)へ移動

Window オブジェクトにはブラウザに新しいページをロードして表示させるメソッドは存在しません。 新しいページをロードするには、ウィンドウの location プロパティに URL を設定します。また、Location オブジェクトにはこの機能に関連した reload(), replace() という２つのメソッドがあります。

reload()

現在表示されているページを Web サーバから再び読み込みます。

replace()

指定された URL をロードして表示します。但し、履歴リストに新しい項目を作成せずに、指定されたURLで現在の URL を置き換えます。 このため、「戻る」ボタンで戻れません。これに対して、location プロパティに URL を直接書き込む場合は、「戻る」ボタンで戻ることができます。

location プロパティは Window オブジェクトの location プロパティと Document オブジェクトの location プロパティの２種類あります。

Window オブジェクトの location プロパティ

Location オブジェクトへの参照が格納されています

Document オブジェクトの location プロパティ

読み出し専用の文字列で、特別の機能はありません。document.location は document.URL と同じもの。 また通常、document.location は location.href と同じ値になりますが、ただし、サーバでリダイレクトされた場合、 document.location には実際にロードした URL が格納されますが、location.href には最初に要求した URL が格納されます。

History オブジェクト

Window オブジェクトの hisotry プロパティには、対応するウィンドウのページ履歴を管理する History オブジェクトが格納されています。 History オブジェクトで利用可能なメソッドは、back(), forward(), go() の３つがあります。

back(), forward() メソッド

ウィンドウやフレームの履歴上を戻ったり進んだりして、現在表示しているドキュメントを変更します。 （ブラウザの「戻る（Back）」ボタンや「進む（Forward）」ボタンと同じような動作）

go()メソッド

整数値を引数として渡し、正の値の場合は進む方向に移動し、負の値の場合は戻る方向に移動します。

これらのメソッドを利用することで、ページ履歴上の前後のページに移動することができます。

<a href="JavaScript:history.back()">戻る</a>
<a href="JavaScript:history.forward()">進む</a>  
<a href="JavaScript:history.go(-2)">2つ戻る</a>

戻る | 進む | 2つ戻る

上記は JavaScript 疑似プロトコル（JavaScript:～) を利用して記述していますが、onclick イベントハンドラを使って以下のようにも記述できます。

<a href="JavaScript:void(0)" onclick="history.back()">戻る</a>

onclick イベントハンドラを利用する場合、アンカータグのデフォルトの動作を抑止するために、void 演算子を使っています。（void 演算子は何も返さない演算子で、アンカータグの機能を抑止する場合等に使用します）

ウィンドウのオープンと制御

ウィンドウのオープン

新たにブラウザウィンドウをオープン（生成）するには Window オブジェクトの open() メソッドを使います。

open() メソッドを実行すると、新たにオープンされたウィンドウを表す Window オブジェクトが返されます。open() メソッドは引数を４つ指定できます。

var w = window.open(url, name, features);

url

新しいウィンドウに表示する URL。新しいウィンドウにおいてフェッチしロードする URL を指定します。url が空文字列の場合は、メインウィンドウのデフォルトツールバーを持った新しい空白の空のウィンドウ（URL は about:blank がロードされます）が生成されます。 (省略可)

name

新しいウィンドウの名前。名前には英数字と下線が使用可能。この名前は<form> HTML タグと<a> HTML タグの target 属性値として使われます。文字列の引数には一切空白を含むべきではありません。name は新しいウィンドウのタイトルを指定するものではありません。すでに存在しているウィンドウの名前を指定した場合、open() メソッドは新たにウィンドウを作らずに、指定されたウィンドウへの参照を返します。その場合、features 属性は無視されます。window.open() の全ての呼びだしで新しいウィンドウを開きたい場合、name に _blank という特別な値を用います。

features

ウィンドウのサイズや GUI の詳細情報を指定。省略するとデフォルトのサイズで、メニューバー、ステータス行、ツールバーなどが有効になった状態のウィンドウ（標準機能がすべて存在するウィンドウ）が表示されます。引数に値を指定すれば、どの機能を有効にするかを明示的に指定できます。 但し、その場合、明示的に指定されなかった機能は使われません。（下記参照）

features オプション

features オプションは「オプション名 = 値, ...」の形式で指定します。以下は指定可能なオプションの一部です。

open() メソッドは、新たに生成されたウィンドウを表す Window オブジェクトを返すので、この Window オブジェクトを使って、新たに生成されたウィンドウを参照できます。

また、新たに生成されたウィンドウの JavaScript コードから、自分をオープンしたウィンドウを参照するには Window オブジェクトの opener プロパティを使います。なお、JavaScript コードでオープンしたのではなく、ユーザがウィンドウを オープンした場合、opener プロパティの値は null になります。

以下はボタンをクリックすると、新しいウィンドウをオープンする例です。

<button onclick="open_test_window()">Open</button>

function open_test_window() {
  w = window.open("http://webdesignleaves.com","test_window", "width=400,height=350,status=yes,resizable=yes");
}

第1引数の url に、JavaScript：擬似プロトコルを記述することもできます。

<button onclick="open_test_window2()">Open2</button>

function open_test_window2() {
  w = window.open("javascript:'<h1>Test Window</h1>'","test_window2", "width=400,height=350,status=yes,resizable=yes");
}

ウィンドウのクローズ

ウィンドウをクローズするには、close() メソッドを使用します。

生成したWindowオブジェクト（w）をクローズするにはw.close()とします。

var w = window.open(url, name, features, replace);
w.close();

このウィンドウ内で実行されている JavaScript コードの場合、window.close(); のようにも記述できます。明示的に window を指定することで、 Document オブジェクトの close() メソッドではなく、Window オブジェクトの close() メソッドが呼び出されます。

通常、自動敵にウィンドウをクローズできるのは、JavaScriptコードで生成したウィンドウだけに限られます。これ以外のウィンドウを クローズしようとするとダイアログボックスが表示され、ユーザに確認が求められます。

ウィンドウがクローズした後でも Window オブジェクトはそのまま残りますが closed プロパティ以外のプロパティもメソッドも使えません。 closed プロパティはウィンドウがクローズされたときに true になります。closed プロパティを調べることで、そのウィンドウが閉じられているかどうかを確認することができます。

ウィンドウの移動とサイズの変更

Window オブジェクトにはウィンドウを移動したり、サイズを変更するメソッドが定義されています。但し、これらに関してはユーザ自身が制御したいはずだから一般的にはこれらのメソッドは使わないほうが無難かも知れません。

キーボードフォーカスとウィンドウ表示

ウィンドウにキーボードフォーカスを与えるには、focus() メソッドを使い、キーボードフォーカスを外すには blur() メソッドを使用します。

focus() メソッドを使うと、ウィンドウがほかのウィンドウの下に隠れているような場合でもウィンドウが前面に表示され、 ユーザから見えるようになります。Window.open() を使って新しいウィンドウをオープンするときは、ブラウザが自動的にこのウィンドウを最前面に表示しますが、2番目の引数に既存のウィンドウ名を指定した場合、open() メソッドは自動的にユーザから見えるようにはしないので、open() でオープンした後に focus() で呼び出します。

スクロール

Windows オブジェクトには、ドキュメントをスクロールするメソッドがいくつかあります。

最近のブラウザでは、ドキュメントの HTML 要素が offsetLeft と offsetTop というプロパティを持っています。このプロパティには、要素の X,Y 座標が 格納されいるので、要素の位置がわかれば、scrollTo() を使ってある要素がウィンドウの左上隅に表示されるようにスクロールできます。但し、offsetLeft と offsetTop の値はブラウザにより異なるので、実用的には難しいかも知れません。

var target = document.getElementById("window_close");
scrollTo(target.offsetLeft, target.offsetTop); 

scrollIntoView()

最近のブラウザは、scrollIntoView()というメソッドをサポート。任意のHTML要素に対して scrollIntoView() を呼び出すと、 要素が見える位置にスクロールされる。

scrollIntoView() は focus() ほど多くのブラウザでサポートされているわけではありませんが、 focus() とは異なり、キーボードフォーカスを受け付ける要素だけでなく、任意の HTML 要素に対して利用できます。

element.scrollIntoView(alignWithTop);

パラメータ　alignWithTop Optional：

• true を指定した場合、要素が上端に来るようにスクロールする（デフォルト）
• false を指定した場合、下端に来るようにスクロールする。

function showIt(elID) {
    var el = document.getElementById(elID);
    el.scrollIntoView(true);
}

ドキュメント中のスクロールしたい場所に <a name= > タグを使ってアンカーを定義してウィンドウをスクロールする方法もあります。 定義したアンカー名を Location オブジェクトの hash プロパティに指定すれば、その場所にスクロールすることができます。

ドキュメントの先頭に「top」という名前のアンカーを定義しておくと、次のようなスクリプトで先頭に戻ることができます。

window.location.hash = "#top";

この場合、ブラウザのロケーションバーにドキュメントの現在位置が表示され、ブックマークすることも可能です。また、Backボタンを使って直前の位置に戻ることができます。

ブラウザ履歴に残したくない場合は replace() を使って以下のようにすれば、ブラウザ履歴を残すことなくアンカーにスクロールできます。

window.location.replace("#top");

Window オブジェクトのメソッドの使用例

以下は、O'Reilly JavaScritp（第5版）に紹介されているサンプルです。

var bounce = {
  x:0, y:0, w:300, h:300,  //ウィンドウの位置とサイズ
  dx:10, dy:10,  //移動距離
  interval:200,  //更新間隔（ミリ秒）
  win: null,  //生成するウィンドウ
  timer:null,  //setInterval() の戻り値
  //アニメーション開始の関数
  start: function(){
    //ウィンドウの初期位置を画面中央に
    bounce.x = (screen.width - bounce.w)/2;
    bounce.y = (screen.height - bounce.h)/2;
    //画面を移動するウィンドウを生成
    bounce.win = window.open('javascript:"<h1>Bounce!</h1>"',"",
                "left=" + bounce.x + ", top=" + bounce.y + 
                ",width=" + bounce.w + ",height=" + bounce.h + 
                ",status = yes");
    bounce.timer = setInterval(bounce.nextFrame, bounce.interval);
  },
  //アニメーション停止の関数
  stop: function() {
    clearInterval(bounce.timer);
    if(!bounce.win.closed) bounce.win.close();
  },
  //アニメーションの動き方
  nextFrame: function(){
    //closed プロパティが true であれば（ウィンドウが閉じられていれば）停止
    if(bounce.win.closed){  
      clearInterval(bounce.timer);
      return;
    }
    //画面の左右の端に達したら方向を逆転
    if((bounce.x + bounce.dx > (screen.availWidth - bounce.w)) ||
            (bounce.x + bounce.dx < 0))bounce.dx = -bounce.dx;
     
    //画面の上下の端に達したら方向を逆転 
    if((bounce.y + bounce.dy > (screen.availHeight - bounce.h)) ||
            (bounce.y + bounce.dy < 0)) bounce.dy = - bounce.dy;
    
    bounce.x += bounce.dx;
    bounce.y += bounce.dy;
    bounce.win.moveTo(bounce.x, bounce.y);
    bounce.win.defaultStatus = "(" + bounce.x + "," + bounce.y + ")";
  }
}

ドキュメントコンテンツの動的な生成

Document オブジェクトの write() メソッド（または writeln() メソッド：改行付きの書き出し）を使うと、ドキュメントにコンテンツを記述できます。write() メソッドはレガシー DOM にも含まれていて、JavaScript のリリース当初から使われてきています。

write()メソッドを使って現在のドキュメントにHTMLを出力できるのは、ドキュメントが解析中の間だけです。document.write( )の呼び出しを行った <script> タグの場所にテキストが挿入されます。

関数中で document.write() を 呼び出すように定義し、イベントハンドラからこの関数を呼び出した場合、現在のドキュメントが消去され、このドキュメントに含まれていた スクリプト自体も消去されるので注意が必要です。

これは、ページ出力が完了した状態で write()/writeln() メソッドを呼び出すと、新しいドキュメントをオープンするため、元々出力されていたドキュメントがクリアされてしまうためです。

<script type="text/javascript">
var today = new Date();
document.write("<p>Document accessed on : " + today.toString() + "</p>");
</script>

write()メソッドをDocument オブジェクトの open(), close() と組み合わせる方法

write() メソッドを open(), close() と組み合わせると、他のウィンドウやフレームに新しいドキュメントを作成することができます。

<button onclick="hello_window()">新しいウィンドウを表示</button>

function hello_window() {
  var w = window.open();  //コンテンツがない新しいウィンドウを生成
  var d = w.document;  //このウィンドウのDocumentオブジェクトを取得
  d.open();  //新しいドキュメントをオープン（省略可）
  d.write("<h1>Hello world!</h1><p>New Window</p>");  //ドキュメントのコンテンツを出力
  d.close();  //ドキュメントを閉じる（ドキュメントの作成を完了）
}

close() メソッドは必須です。close() メソッドを呼び出してドキュメントを明示的に完了して初めて、バッファされたコンテンツが画面に表示されます。 （忘れた場合、ブラウザのドキュメントロード中のアニメーションが止まらず、また記述した HTML もバッファ中に保存されているだけになります。）

これに対し、open() メソッドは省略可能です。すでにクローズされたドキュメントに対して write() メソッドを呼び出せば、open() メソッドを 呼び出したときと同じように、JavaScript が新しい HTML ドキュメントをオープンします。

イベントハンドラから document.write() を 呼び出した場合にも、同じことが行われ JavaScript が新しい HTML ドキュメントをオープンします。しかし、この処理の中で、 現在のドキュメントは、コンテンツやスクリプト、イベントハンドラも含めて全て捨てられるのでイベントハンドラから自分自身の ドキュメントに対して write() メソッドを呼び出さないようにします。

write()メソッドに複数の引数を渡す

write()/writeln() メソッドには複数の引数（文字列）を渡すことができます。カンマ演算子で指定された文字列は、記述した順に出力されます。以下は同じことになります。

var greeting = "Hello ";
var welcome = "Welcome to my Web!";
document.writeln(greeting, welcome);
document.writeln(greeting + welcome);

Document オブジェクト（DOM Level 0）のプロパティ

以下は Document オブジェクト（DOM Level 0）のレガシーなプロパティです。

これらのプロパティは、ドキュメントに関する情報を提供します。以下はドキュメントのタイトル、URL、最終更新日時を表示する例です。

<i>Document:<script>document.write(document.title);</script></i><br>
<i>URL: <script>document.write(document.URL);</script></i><br>
<i>Last Update:<script>document.write(document.lastModified);</script></i>

関連ページ：ページの最終更新日を表示

レガシーDOM：Documentオブジェクトの配列プロパティ

以下はレガシー DOM の、オブジェクトの配列を値として持つプロパティです。これらのプロパティを使うことで、ドキュメントの要素にアクセスすることができます。これらのプロパティは、ドキュメントに現れるリンクや画像、フォームなどの配列を表します。

各配列の要素は、ドキュメントのソースコード中に現れるのと同じ順序で格納されます。これらのレガシー DOM の配列に含まれるオブジェクトは、 スクリプトから操作できます（リンクの飛び先を取得したり変更したり、フォーム要素の値を読み書きしたりできる）。しかし、ドキュメントのテキストは変更できません。（ドキュメントの構造自体は変更できない）

anchors[]

ドキュメントのアンカーを示す Anchor オブジェクトの配列。（アンカーは、<a>タグで href 属性の代わりに name 属性を指定することで作成される。ハイパーテキストとは異なる。）Anchor オブジェクトの name プロパティに name 属性の値が格納される。

applets[]

Javaアプレットを表す Applet オブジェクトの配列。

forms[]

<form>要素に対応する Form オブジェクトの配列。各 Form オブジェクトには、elements[] という、フォーム要素に対応するオブジェクトが格納されている配列プロパティを持つ。フォームが送信される前に onsubmit イベントハンドラが呼び出される。false を返せば、ブラウザはフォームの送信を取りやめる。このイベントハンドラを使って、クライアントサイドでのフォームの検証が行える。

images[]

<img>要素に対応する Image オブジェクトの配列。Image オブジェクトの src プロパティは読み書きが可能。このプロパティに URL を設定すると、ブラウザは新しい画像をロードして表示する。（古いブラウザでは新しい画像は元の画像と同じサイズでなければならない。）Imgae オブジェクトの src 属性を制御すればロールオーバーや簡単なアニメーションが実現できる。

links[]

ドキュメント内のハイパーテキストリンクを表す Link オブジェクト。ハイパーテキストリンクは<a>タグを使って作成される。（<area>タグを使って作成される場合もある。）Link オブジェクトの href プロパティは<a>タグの href 属性に対応し、リンクの URL が格納される。また、Link オブジェクトでは、protocol や hostname、pathname などのプロパティを使って URL の各部を取り出せる。（location オブジェクトに似ている。）また、マウスカーソルがリンク上に移動した場合、onmouseover イベントハンドラが呼び出され、リンクから外れたら onmouseout イベントハンドラが呼び出される。このイベントハンドラが false を返した場合、ブラウザはリンクをたどらない。

ドキュメントのオブジェクトへの名前付け

数値でインデックス付けされたオブジェクトの配列で問題になるのは、ドキュメント要素の順番を少し変更しただけで、その順序に依存したコードは動かなくなってしまうことです。もっと確実なコードを書くには、ドキュメント要素に名前を付けて、この名前を使って要素を参照するようにします。レガシー DOM で名前をつけるには、要素の name 属性を使います。

次のようなフォームが指定されている場合、この<form>がドキュメントの最初のものだとすると、Formオブジェクトにアクセスするには以下のの３つの方法があります。

<form name ="fm1">
  <input type="button" value="Send">
</form>

• document.forms[0] //フォームのドキュメント中の順序で参照
• document.forms.fm1 //プロパティとしてフォームの名前で参照
• document.forms["fm1"] //配列のインデックスとしてフォームの名前で参照

また、<form>、<img>、<applet>、タグに name 属性を指定した場合は、ドキュメントオブジェクト自身に name 属性で指定した名前のプロパティができ、対応する Form、Imgae、Applet オブジェクトが格納されます。（但し<a>タグの場合はこのようにならない）

つまり、先ほどのフォームには次のように記述してもアクセスできます。

document.fm1

また、フォーム中の要素にも名前が付けられます。フォーム要素に name 属性を指定すると、Form オブジェクトに name 属性に指定した名前でプロパティができ、フォーム要素を表すオブジェクトを参照できます。

<form name="shipping">
<input type="text" name="zip">
</form>

上記の場合、このフォームのテキスト入力要素へは次のような書式で参照できます。

document.shipping.zip

２つのドキュメントの要素の name 属性に同じ値を設定すると、その名前のプロパティは配列となり、両方の要素を表すオブジェクトの参照が格納されます。HTML のフォームでは、関連するラジオボタンやチェックボックスには同じ名前が付けられます。このような場合、Form オブジェクトにはその名前のプロパティが作成され、その値は配列になり、各オブジェクトへの参照が格納されます。

レガシー DOM の例

以下は、新しいウィンドウをオープンして、document.write() を使って画像のリストを出力する例です。関数の中で window.open() を使っていますが、ポップアップウィンドウは、ユーザーの操作で作成されたものでなければ、ブラウザによってブロックされます。そのため、この関数はリンクやボタンをクリックした時に呼び出すようにします。

<button onClick="list_images();">画像リストの表示</button>


<script type="text/javascript">
function list_images() {
  //現在のウィンドウのドキュメント
  var d = window.document;
  //新規ウィンドウをオープン
  var nw = window.open(
      "",  "_blank",
      "menubar=yes,scrollbars=yes,location=yes,resizable=yes, toolbar=yes, width=500, height=300"
  );
  //新規ウィンドウ（のドキュメント）にタイトルを表示
  nw.document.write("<h1>List of images: " + d.title + "</h1>");
  //全ての画像のソース属性と alt 属性を使ってリンクを作成
  for(var i = 0; i < d.images.length; i++) {
    var img = d.images[i];
    nw.document.write('<a href="' + img.src + '" >' + (i + 1) + "番目の画像： "+ img.alt + '</a><br>'); 
  }
  //close() メソッドでドキュメントを明示的に完了
  nw.document.close();
}
</script>    

W3C DOM

W3C DOM はレガシー DOM より機能が拡張されていて、標準化もされています。

DOM は HTML や XML などのマークアップ言語で書かれたドキュメントにアクセスするための標準的な仕組みです。

HTML ドキュメントは入れ子になったタグによる階層構造を持ちます。DOM はドキュメントをドキュメントツリー（文書ツリー）として扱います。

<html>
  <head>
    <title>Sample Document</title>
  </head>
  <body>
    <h1>An HTML Document</h1>
    <p>This is a <i>simple</i> document</p>
  </body> 	
</html>	

上記 HTML ドキュメントを DOM で表現するとノードで構成される次のようなツリー構造になります。 （文書ツリーの解釈はブラウザやそのバージョンによって微妙に異なります）

              Document
                 |
               <html>
                 |
   --------------------------------
   |                               |
<head>                           <body> 
   |                               |
<title>                        ------------------------
   |                           |                        |
"Sample Document"             <h1>                     <p> 
                               |                        |
                       "An HTML Document"       --------------------
                                                |       |           |
                                          "This is a"  <i>   "document"
                                                        |
                                                      "simple"

文書を構成する要素や属性、テキストと言ったオブジェクトのことをノードと呼びます。オブジェクトの種類により、要素ノード、属性ノード、テキストノードなどと呼びます。

DOM はこれらのノードを抽出、追加、削除、置換するための手段を提供する API (Application Programming Interface) です。

ノードの検索・取得

ドキュメントからテキストを取得したり、特定の要素を操作したりするには、目的の要素を取得する必要があります。その方法としては大きく分けると以下の３つがあります。

1. ID やタグ名から目的の要素を取得する方法（ダイレクトアクセス）
   • getElementByID() : id 属性による検索
   • getElementsByTagName() : タグ名による検索
   • getElementsByName() : name 属性による検索
   • getElementsByClassName() : class 属性による検索
2. CSS のセレクタの書式で指定された要素を取得する方法
   • querySelector() : セレクタで指定された要素を１つだけを取得
   • querySelectorAll() : セレクタで指定された要素の配列を取得
3. ある要素を基点にその子要素、親要素、兄弟要素などの相対的な位置関係から取得する方法（ノードウォーキング）

getElementByID()

getElementByID() は指定された ID を持つ要素を返します。id 属性の値は一意なので、getElementByID() は id 属性が一致した要素を１つだけ返します（要素の配列は返さない）。

element = document.getElementById(id);

element

Element オブジェクト。
もし与えられた ID を持つ要素がなければ、この関数は null を返します。

id

検索する要素の一意の ID を表す文字列

ドキュメントのある特定の要素を操作する場合は、その要素の id 属性にドキュメント内で一意な名前（id 名）を設定しておきます。

以下は、id 属性が「element_id」の要素を変数 elem に取得して、そのタグの内容をアラートで表示する例です。innerHTML は、要素の内容を取得・設定するためのプロパティです。

<p id="element_id">この内容を表示</p>

<script type="text/javascript">
var elem = document.getElementById('element_id');
alert(elem.innerHTML);
</script>

また、単純に要素を生成して id 属性を設定しただけでは、getElementById によって要素にアクセスすることはできません。その前に、Node.insertBefore() や同種のメソッドを使って、文書ツリー内に要素を挿入する必要があります。

var elm = document.createElement("div"); // 要素を生成
elm.id = 'test_elem'; // 生成した div 要素の id を設定

alert( document.getElementById('test_elem') ); // null

document.body.appendChild(elm);
alert( document.getElementById('test_elem') ); // [object HTMLDivElement]

getElementsByTagName()

document.getElementsByTagName() は指定したタグ名の要素を全て取得して返します。ルートノードを含めたドキュメント全体が検索されます。

また、Element オブジェクトにも getElementsByTagName() メソッドが定義されています（後述）。

elements = document.getElementsByTagName(name)

elements

ドキュメントに現れる順に並べられた、見つかった要素の配列（正確には、NodeList オブジェクト：配列のようなオブジェクト）

name

要素の名前を表す文字列。特殊な文字列 "*" は全ての要素を表します。HTML は大文字・小文字を区別しないので、ここで指定する文字列も大文字・小文字を区別しません。

以下やドキュメント中の全ての table 要素を取得して、その数を表示する例です。

var tables = document.getElementsByTagName('table');
alert("表の総数： " + tables.length);

HTMLDocument の body プロパティ（document.body）は、<body>タグを参照しますが、このプロパティが存在しない場合に、<body>タグを参照するには以下のようなコードを使用します。

document.getElementsByTagName("body")[0];	
//bodyは１つしか存在しないので最初の要素を使用。

以下はドキュメント内の全ての a 要素を取得して、そのリンク先（href 属性）を表示する例です。

<button onClick="show_all_href();">表示</button>

<script type="text/javascript">
function show_all_href() {
  var a = document.getElementsByTagName("a");
  var links = [];
  for (var i = 0 ; i < a.length; i ++) {
    links.push(a.item(i).href);
  }
  alert(links.join("\n"));  
}
</script>

Element オブジェクトの getElementsByTagName() は、Document オブジェクトのものと同じような働きをしますが、呼び出した要素の子要素だけを返します。ドキュメント全体から検索するのではなく、ある要素の中から検索します。

以下は、getElementByID() で特定の要素を検索し、次に Element オブジェクトの getElementsByTagName() でその要素の子孫の中からある種類の要素を全て検索する例です。

window.onload = function() {
  //id 属性が「foo」という要素を取得
  var foo = document.getElementById('foo');
  //「foo」という要素の子孫の中から全ての a 要素を取得
  var links = foo.getElementsByTagName('a');
  alert(links.length);
}

getElementsByName()

getElementsByName() は、ドキュメント内の指定した name 属性値を持つノードリストを返します。name 属性はドキュメント内で一意とは限らないので（フォームのラジオボタンやチェックボックス等）、getElementsByName() は要素の配列（NodeList オブジェクト）を返します。

elements = document.getElementsByName(name)

elements

NodeList オブジェクト

name

要素の name 属性の値

<form name="form1"><input type="text"></form>

<script>
var form1 = document.getElementsByName("form1");
console.log(form1[0].tagName); // FORM
</script>

getElementsByName() は、与えた name 属性の値を持つすべての要素を含む、現在の NodeList コレクションを返します。<meta> や <object>、または name 属性を要素内に置くことがサポートされていないものも name 属性が付いていれば含まれます。

getElementsByName() メソッドは、ブラウザごとに動作が異なります。IE や Opera では、getElementsByName() メソッドは、指定した値の id 属性を持つ要素も返します。そのため、name と ID に同じ文字列を使用しないように、よく注意する必要があります。

getElementsByClassName()

getElementsByClassName() は、指定されたクラス名で得られる要素の集合を返します。document オブジェクトで呼び出されたときは、ルートノードを含む、完全な文書が検索されます。任意の要素で getElementsByClassName を呼び出すこともできます。その場合は、与えられたクラス名を持つ指定された要素下の要素だけが返ります。

elements = document.getElementsByClassName(name) 
// または elements = rootElement.getElementsByClassName(name)

elements

現在の NodeList で、要素は、それらがその文書ツリーに現れる順番に得られます。

name

要素のクラス名を表す文字列。複数のクラス名を指定する場合は、空白区切りでクラス名を指定します。

getElementsByClassName() は、document だけでなく、任意の要素で呼び出すことができます。呼び出した要素が検索のルートとして使われます。

以下は、'foo' クラスを持っている全ての要素を取得する例です。

document.getElementsByClassName('foo')

以下は、'foo' クラスと 'bar' クラスを持っている全ての要素を取得する例です。

document.getElementsByClassName('foo bar')

以下は、'foo' ID を持っている要素内で、'bar' クラスを持っている全ての要素を取得する例です。

document.getElementById('foo').getElementsByClassName('bar')

querySelector()

querySelector() は CSS のセレクタの書式で指定された要素中の文書内で一番初めにある要素１つを取得します。CSS のセレクタの書式で指定できるので、jQuery に少し似た感じで操作できます。

querySelector() は指定された要素を1つ見つけるとそこで検索処理を終了します。そのため対象の要素が複数あっても最初の1つしか取得しません。

一致するものが見つからない場合は null を返します。document.getElementById() や document.getElementsByClassName() と比べると処理速度は遅くなります。

IE は 8から対応しています（完全対応は9から）。 caniuse querySelector

以下のような HTML がある場合をみてみます。

<div id="foo">
  <ul>
    <li>abc</li>
    <li class="bar">def</li>
    <li>ghi</li>
    <li>jkl</li>
  </ul>
  <ul>
    <li>mno</li>
    <li>pqr</li>
    <li>stu</li>
    <li class="bar">vwx</li>
  </ul>
</div>

以下のように指定すると、クラスが bar の最初の li 要素のみが取得され、style.color = "red" で文字色が赤になります。

var el = document.querySelector('#foo li.bar');
el.style.color = "red";

querySelectorAll()

querySelectorAll() はセレクタで指定された要素の全てを配列として取得します。文書内で該当する要素を検出した順に配列（正確には静的な NodeList）に格納して返します。querySelector() と同様に、CSS のセレクタの書式で指定できます。

戻り値の配列が空である（length プロパティが 0 である）場合は、該当する要素が無かったということになります。document.getElementById() や document.getElementsByClassName() と比べると処理速度は遅くなります。

IE は 8から対応しています（完全対応は9から）。 caniuse querySelectorAll

以下のような HTML がある場合をみてみます。

<div id="foo">
  <ul>
    <li>abc</li>
    <li>def</li>
    <li class="bar">ghi</li>
    <li>jkl</li>
  </ul>
  <ul>
    <li>mno</li>
    <li>pqr</li>
    <li class="bar">stu</li>
    <li>vwx</li>
  </ul>
</div>

以下のように指定すると、クラスが bar の li 要素全てが取得されます。配列なので for 文などを使って処理をします。この例の場合、2つの li 要素が style.color = "green" で文字色が緑になります。

var els = document.querySelectorAll('#foo li.bar');
for(var i=0; i<els.length; i++) {
  els[i].style.color = "green";
}

相対的な位置関係でのノードの取得

ノードはプロパティとして、以下のような他のノードへの参照を持っています。

相対的な位置関係でノードを取得する場合に注意する必要があるのは、空白や改行もテキストノードとして扱われる点です。HTML を記述する際は、通常可読性を考えてタグごとに改行を入れますが、その場合改行の箇所にテキストノードが存在することになります。

以下はノードを参照するためのプロパティの使用例です。HTML を改行なしで記述した場合は、異なる結果になります。

<div id="foo">
  <p id="first_p">first paragraph</p>
  <p id="second_p">second paragraph</p>
  <div id="bar">
    <p id="third_p">third paragraph</p>
    <p id="fourth_p">fourth paragraph</p>
  </div>
</div>

<script type="text/javascript">
var bar = document.getElementById("bar");
var elem;

elem = bar.parentNode;
console.log(elem.id);  //foo

elem = bar.firstChild;
console.log(elem.id);   //undefined

elem = bar.firstChild.nextSibling;
console.log(elem.id);  //third_p

elem = bar.lastChild;
console.log(elem.id);   //undefined

elem = bar.lastChild.previousSibling;
console.log(elem.id);   //fourth_p

var children = bar.childNodes;
console.log(children[0].id);   //undefined 
console.log(children[1].id);   //third_p
console.log(children[2].id);   //undefined
console.log(children[3].id);   //fourth_p
console.log(children[4].id);   //undefined
</script>

改行や空白のテキストノードを除く必要がある場合は、取り出したノードが要素ノードかどうかを調べる必要があります。ノードの種類を判定するには、nodeType プロパティを調べます。

<ul id="foo">
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
</ul>

<script type="text/javascript">
var result = [];
var children = document.getElementById("foo").childNodes;
for(var i = 0; i < children.length; i++) {
  var child = children[i];
  //nodeType が要素かどうかを判定
  if(child.nodeType == 1) {
    result.push(children[i].innerHTML);
  }
}
alert(result.join(","));
</script>

上記のコードの部分は、while ループと firstChild, nextSibling を使って以下のように書き換えることができます。

<script type="text/javascript">
var result = [];
var child = document.getElementById("foo").firstChild;
while(child) {
  //nodeType が要素かどうかを判定
  if(child.nodeType == 1) {
    result.push(child.innerHTML);
  }
  child = child.nextSibling;
}
alert(result.join(","));
</script>

［追記］以下の情報は古くなっています。
Element Traversal API は削除される予定で、代わりに ChildNode と ParentNode のインターフェースに分割されています。但し、使い方に変わりはありません。

また、空白ノードやコメントノードを除外して要素だけを取得するための API（Element Traversal API） が規定されていて、最近のブラウザには実装されているのでそれを使用することもできます。children は Element Traversal API ではありませんが、主要なブラウザで実装されています。但し、IE の children は空白ノードを含んだ NodeList を返すので注意が必要です。

<div id="foo">
  <p id="first_p">first paragraph</p>
  <p id="second_p">second paragraph</p>
  <div id="bar">
    <p id="third_p">third paragraph</p>
    <p id="fourth_p">fourth paragraph</p>
  </div>
</div>

<script type="text/javascript">
var bar = document.getElementById("bar");
var elem;

elem = bar.parentNode;
console.log(elem.id);  //foo

elem = bar.firstElementChild;
console.log(elem.id);   //third_p

elem = elem.nextElementSibling;
console.log(elem.id);  //fourth_p

elem = bar.lastElementChild;
console.log(elem.id);   //fourth_p

elem = elem.previousElementSibling;
console.log(elem.id);   //third_p

var children = bar.children;
console.log(children[0].id);   //third_p
console.log(children[1].id);   //fourth_p
</script>

for (var i = 0; i < myNodeList.length; ++i) {
  var item = myNodeList[i];  //または myNodeList.item(i)
} 

<ul id="foo">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ul>

var nodeList = document.getElementById("foo").getElementsByTagName("li");
var result ="";
for(var i in nodeList) {
  var node = nodeList.item(i);
  result +=  i + "番目: nodeType: " + node.nodeType + " nodeName: " + node.nodeName + "\n";
}
alert("【for in 文の結果】 \n" + result);
/*
【for in 文の結果】 
0番目: nodeType: 1 nodeName: LI
1番目: nodeType: 1 nodeName: LI
2番目: nodeType: 1 nodeName: LI
3番目: nodeType: 1 nodeName: LI
item番目: nodeType: 1 nodeName: LI
namedItem番目: nodeType: 1 nodeName: LI
length番目: nodeType: 1 nodeName: LI
*/

var nodeList = document.getElementById("foo").getElementsByTagName("li");
var result ="";
for(var i = 0; i < nodeList.length; i++) {
  var node = nodeList.item(i);
　 result +=  i + "番目: nodeType: " + node.nodeType + " nodeName: " + node.nodeName + "\n";
}
alert("【for 文の結果】 \n" + result);
/*
【for 文の結果】 
0番目: nodeType: 1 nodeName: LI
1番目: nodeType: 1 nodeName: LI
2番目: nodeType: 1 nodeName: LI
3番目: nodeType: 1 nodeName: LI
*/

<div id="foo">
  <p>paragraph 1 </p>
  <p>paragraph 2 </p>
</div>

<script type="text/javascript">
var foo = document.getElementById("foo");
var elems = foo.getElementsByTagName("p");
alert(elems.length);  //2

//p 要素を生成
var p = document.createElement("p");
//生成した p 要素にテキストを追加
p.appendChild(document.createTextNode("paragraph 3"));
//foo に生成した p 要素を追加
foo.appendChild(p);
alert(elems.length);  //3
</script>

var divs = document.getElementsByTagName("div");
var newDiv;
for (var i = 0; i < divs.length; i ++) {
  newDiv = document.createElement("div");
  newDiv.appendChild(document.createTextNode("new div"));
  divs.item(i).appendChild(newDiv);  
}

var divs = document.getElementsByTagName("div");
var newDiv;
var len = divs.length;
//alert(divs.length);　（例）10

for (var i = 0; i < len; i ++) {
  newDiv = document.createElement("div");
  newDiv.appendChild(document.createTextNode("new div"));
  divs.item(i).appendChild(newDiv);  
}

//alert(divs.length); （例）20

var array = Array.prototype.slice.call(document.getElementsByTagName('li'));

var foo = document.getElementById('foo');
var nodeList_array = Array.prototype.slice.call(foo.getElementsByTagName('li'));
var result = "";
for(var i = 0; i < nodeList_array.length; i ++) {
  result += nodeList_array[i].innerHTML + "\n";
}
alert(result);

var foo = document.getElementById('foo');
var nodeList = foo.getElementsByTagName('li');
var nodeList_array = [];

for (var i = 0, l = nodeList.length; i < l; ++i) {
    //配列に変換
    nodeList_array.push(nodeList[i]);
}

var result = "";
for(var i = 0; i < nodeList_array.length; i ++) {
  result += nodeList_array[i].innerHTML + "\n";
}
alert(result);

addEventListener()

標準イベントモデル（DOM レベル2）で、ある特定の要素に対してイベントリスナ（イベントハンドラ）を登録するには、そのオブジェクトの addEventListener() メソッドを呼び出します。但し、このメソッドは IE 8 以前では使用できません（代わりに、attachEvent() メソッドが利用できます）。

target.addEventListener(type, listener [, useCapture]);

このメソッドには引数を３つ渡します。

type

イベントリスナを登録するイベントタイプ（イベント名）。イベントタイプは HTML のハンドラ属性の名前から「on」を取り除いた文字列で指定します。 全て小文字で記述します。

listener

指定した種類のイベントが発生したときに呼び出されるリスナ関数を指定。リスナ関数が呼び出されるときには、引数はただ１つで、Event オブジェクトが渡され、このオブジェクトにはイベントに関する詳細な情報（どのマウスボタンが押されたのか等）が格納されます。

useCapture

論理値。true の場合、イベント伝播のキャプチャリング段階で、指定されたイベントリスナがイベントをキャプチャします。 false の場合、イベントリスナは通常のイベントリスナとなり、イベントが直接そのオブジェクトで発生した場合と、要素の子孫要素で発生し、この要素までバブリングしてきた場合に、このイベントリスナが呼び出されます。

• true ： キャプチャリングフェーズ (捕捉フェーズ)で処理
• false ： ターゲットフェーズとバブリングフェーズで処理

var btn = document.getElementById("foo");
 
function sayHello() {
  alert("Hello");
}

btn.addEventListener('click', sayHello, false);

複数のリスナ（ハンドラ）の登録

DOM レベル2 では、同一オブジェクトの同一イベントに対して、複数のイベントリスナを登録することができます。

以下の場合、ボタン要素をクリックしたときには、「Hello 1」と「Hello 2」と言う２つのダイアログが表示されます。

var btn = document.getElementById("foo");

btn.addEventListener('click', function() { alert("Hello 1"); }, false);
btn.addEventListener('click', function() { alert("Hello 2"); }, false);

但し、同一イベントに同一のイベントリスナを重複して設定すると、後の設定は無視されます。以下の場合、ボタン要素をクリックすると、ダイアログが1度だけ表示されます。

var btn = document.getElementById("foo");
function sayHello() {
  alert("Hello");
}

btn.addEventListener('click', sayHello, false);
btn.addEventListener('click', sayHello, false);

addEventListener() と this キーワード

レベル0 イベントモデルでは、関数がドキュメント要素のイベントハンドラとして登録されると、そのドキュメント要素のメソッドになります。イベントハンドラが呼び出されると、その要素のメソッドとして呼び出され、関数中では、this キーワードはイベントが発生した要素を参照します。

DOM レベル2 ではイベントリスナ（ハンドラ）関数がどのように呼び出されるかや、this キーワードの値については何も規定されていません。現在の実装では addEventListener() で登録されたリスナはターゲット要素のメソッドとして呼び出され、リスナが呼び出されると、this キーワードはリスナが登録されたオブジェクトを参照します。

仕様で規定されていない動作を使いたくない場合は、リスナ関数に渡される Event オブジェクトの currentTarget プロパティを使います。currentTarget プロパティはイベントリスナが 登録されたオブジェクトを参照します。

イベントハンドラと this キーワード

以下はクラス属性が foo の要素をクリックするとその文字色を赤に変える例です。

<p class="foo">foo1</p>
<p class="foo">foo2</p>
<p class="foo">foo3</p>

<script>
var foo = document.getElementsByClassName("foo");

for(var i = 0; i < foo.length; ++i){ // 取得した HTML 要素の数だけループ
  foo[i].addEventListener("click", function(){ // クリックイベントを登録
    this.style.color = "red"; // この this はクリックされた要素自身
  }, false);
}
</script>    

または（繰り返し回数が多い場合はこちらの方がメモリの消費が抑えられるので効率的です）

<p class="foo">foo1</p>
<p class="foo">foo2</p>
<p class="foo">foo3</p>

<script>
var foo = document.getElementsByClassName("foo");

function changeColor() {
  this.style.color = "red";
}

for(var i = 0; i < foo.length; ++i){ // 取得した HTML 要素の数だけループ
  foo[i].addEventListener("click", changeColor, false);
}
</script>    

this の参照先を他のローカル関数などでも使用したい場合は、メソッド内で別の変数を定義し、その中にthis の値を代入すれば、内部関数ではその変数を通じて this の値にアクセスできるようになります（変数の名前は that や self とするのが通例）。ローカル関数の中の this は windows オブジェクトになりますが、定義した変数を使用することで操作することができます。

以下はローカル関数 changeBlue を定義して、id 属性が bar の要素は文字色を青にする例です。

<p class="foo">foo1</p>
<p class="foo" id="bar">foo2</p>
<p class="foo">foo3</p>

<script>
var foo = document.getElementsByClassName("foo");

for(var i = 0; i < foo.length; ++i){ 
  foo[i].addEventListener("click", function(){ 
    var that = this;
    var changeBlue = function() {
      if(that) that.style.color = "blue"; 
    }
     if(that.id === "bar") {//this.id でもここはOK
       changeBlue();
     }else{
       this.style.color = "red"; 
     }
    
  }, false);
}
</script>

イベントリスナの削除

ハンドラを削除するには、removeEventListener() を使います。

element.removeEventListener(type,listener,useCapture)

type

登録されたイベントを表す文字列。（リスナ登録時に addEventListener() で指定したイベント）

listener

登録時のハンドラ関数

useCapture

論理値。削除される EventListener がキャプチャリスナーとして登録されていたか否かを指定します。 指定されない場合、デフォルトの false が適用されます。

var btn = document.getElementById("foo");

function sayHello() {
  alert("Hello");
}

btn.addEventListener('click', sayHello, false);
btn.removeEventListener('click', sayHello, false);    

但し、登録時にリスナとして無名関数を使った場合、この方法では削除することができません。方法がないわけではありませんが、後から削除する必要がある場合は、リスナに名前を付けたほうが簡単です。

var btn = document.getElementById("foo");

btn.addEventListener('click', function() { alert("Hello 1"); }, false);

//無名関数を使った場合は、以下の方法では削除できない
btn.removeEventListener('click', function() { alert("Hello 1"); }, false);

イベントリスナオブジェクト

イベントリスナ（ハンドラ）としては、関数を指定するのが一般的ですが、ブラウザによっては、handleEvent() メソッドを実装したオブジェクトを指定することができます。

var btn = document.getElementById("foo");

var eventListener = {  //handleEvent() メソッドを実装したオブジェクト
  text : "Hello from object",
  handleEvent: function(e) {
    alert(this.text + " /Event: " + e);
  }
}

btn.addEventListener('click', eventListener, false);

//リスナの削除
btn.removeEventListener('click', eventListener, false);

上記の場合、ボタン要素をクリックすると Hello from object /Event: [object MouseEvent] とダイアログが表示されます。

attachEvent() IEでのイベントリスナの登録・削除

IE9より前は addEventListener() をサポートしていませんが attachEvent() とdetachEvent() メソッドが用意されています。このメソッドにより、あるオブジェクトの、あるイベントタイプに対して、複数のリスナ関数を登録することができます。但し、IE11 以降ではこのメソッドはサポートされていません（使用できません）。

attachEvent() を使って 登録されたイベントリスナには、イベントリスナ呼び出し時に、グローバルな window.event オブジェクトのコピーが引数として渡されます。 attachEvent() の書式は以下になります。

attached = target.attachEvent(eventNameWithOn, callback)

target

発行されたイベントを受け取る DOM 要素

eventNameWithOn

イベントハンドラの属性のような、接頭辞に"on"が付加されたイベントを受け取るためのイベント名。例えば、クリックイベントを受け取るためには "onclick" を指定。

callback

このイベントが発行されたときに呼ばれるコールバック関数。この関数は引数無しで呼ばれ、this の参照先は window オブジェクトです。

attached

イベントリスナの付加に成功したかどうかを判断するBoolean型の返り値

var btn = document.getElementById("foo");

function hello_ie() {
  alert("Hello IE");
}

btn.attachEvent('onclick', hello_ie);

イベントリスナを削除するには、detachEvent() を使います。

target.detachEvent(eventNameWithOn, callback)

eventNameWithOn

リスナ登録時に指定したイベント名（接頭辞に"on"が付加されたイベント名）。

callback

リスナ登録時に指定したコールバック関数。

クロスブラウザに対応

クロスブラウザに対応するには、以下のような関数を用意します。以下の addListener 関数では、addEventListener/attachEvent が利用できるかを確認（機能テスト）し、対応しているメソッドを使ってハンドラ（リスナ）を登録します。

function addListener(elem, ev, listener) {
  if(elem.addEventListener) {
    elem.addEventListener(ev, listener, false);
  }else if(elem.attachEvent) {
    elem.attachEvent('on' + ev, listener);
  }else {
    throw new Error("イベントリスナ未対応");
  }
}

var btn = document.getElementById("foo");

function sayHello() {
  alert("Hello");
}

addListener(btn, "click", sayHello);

リスナを削除するには、以下のような関数を用意します。

function removeListener(elem, ev, listener) {
  if(elem.removeEventListener) {
    elem.removeEventListener(ev, listener, false);
  }else if(elem.detachEvent) {
    elem.detachEvent('on' + ev, listener);
  }else {
    throw new Error("イベントリスナ未対応");
  }
}

removeListener(btn, "click", sayHello);