ドキュメントの制御

作成日 : 2013-04-04
最終更新日：

オライリーの JavaScript 第6版 （以下本書）を図書館から借りて、 いろいろ調べている。 15 章の JavaScript のドキュメントの制御は知らないので、少し調べてみた。

概要

DOM (Document Object Model) は HTML や XML ドキュメントのコンテンツを表したり操作したりする API である。

12.1 ドキュメント要素の選択

ID による選択

getElementById("id_name") を使う。

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

列挙

document オブジェクトのプロパティはたくさんあって覚えきれない。 注意しておきたいことがある。 document オブジェクトに限らないが、DOM でオブジェクトのプロパティを得るためには 

for (let prop in document) {
	document.writeln(prop);
}

という方法をとる。

なお、親クラスのプロパティ（組み込みのプロパティも含む）ではなく、 自分のみの固有のプロパティを知るには、hasOwnProperty メソッドを使って判別する。

またObject.keys(document) とする方法もある。自分のみの固有のプロパティが配列で帰ってくる。

Object.getOwnPropertyNames(document) を使う方法もある。

判定

演算子 in を使う方法

let upper = { usotuki: 0.003 };
let lower = Object.create( upper ); // lower はプロトタイプに upper をもつオブジェクト
"usotuki" in upper; // => true
"usotuki" in lower; // => true

Object.prototype.hasOwnProperty メソッドを使う方法

let upper = { usotuki: 0.003 };
let lower = Object.create( upper ); // lower はプロトタイプに upper をもつオブジェクト
upper.hasOwnProperty("usotuki") //=> true
lower.hasOwnProperty("usotuki") //=> false

document.write() メソッドを書き換える方法

本書の 15.10.2 項では、document.write() メソッドについて詳述されている。ここでは、 document.write() メソッドについて、新たにコードを書くときには、もはや必要ありません。とある。そして、 具体的に他のコードで置き変える方法については、p.444 の例 15-10 にある通り、 innerHTML 用のストリーム API で述べられている。mozilla の例は下記にある。
Element: innerHTML() メソッド(developer.mozilla.org)
しかし、innerHTML プロパティを使う方法はプロパティの書き換えを伴うのでオーバーヘッドがあるため、 書き換えを伴わない場合は element.insertAdjacentHTML() メソッドを使うのがよいと Mozilla にはある。
Element: insertAdjacentHTML() メソッド(developer.mozilla.org)
そこで、element.insertAdjacentHTML() メソッドを使って書き換える方法を述べる。 併せて、単なる書き換えだけでは書き出しに失敗することがあるので、その原因と対応方法も述べる。

単純に、次のコードを書き換えることを考える。 

<body>
    ...
    <script>
    document.write("<hr>");
    </script>
    ...
<body>

まず考えるのは、element.insertAdjacentHTML() メソッドを使うために、 element を指定することである。element オブジェクトにはいろいろなものがあるが、 ここでは getElementById() メソッドで得られるオブジェクトを使う。getElementById() メソッドは、 たとえば、<div id="foo"></div> という HTML 要素の id 属性と結び付く。だから、 上記のコードは次のように置き換えられるはずだ。 

<body>
    ...
    <div id="hr"></div>
    <script>
        let d = document.getElementById("hr");
        d.insertAdjacentHTML('afterend',"<hr>")
    </script>
	...
</body>

エレメントを div とともに導入したり、エレメントのオブジェクトの変数を導入したりするので、 多少タイピング量が増えるが、JavaScript の読み込みのタイミングにかかわる諸問題を解決するため、 必要な手間だと考えよう。なお、element.insertAdjacentHTML の第1引数の 'afterend' とは、指定された HTML 要素のうち、閉じタグの直後に挿入することを指示している。

このコードは動作する。すなわち、水平線は表示される。 では、スクリプトを body 要素ではなく head 要素に書いたらどうか。

<head>
	...
    <script>
	let d = document.getElementById("hr");
	d.insertAdjacentHTML('afterend',"<hr>")
    </script>
</head>
<body>
    ...
    <div id="hr"></div>
    ...
</body>

このコードは動作しない。すなわち、水平線が表示されない。これは、head 部にスクリプトを書いたために、 スクリプトが実行された時点でエレメントが取得できていないからだ。 エレメント取得に失敗したので、コードは動作しない。エレメントが取得できない問題を解消するには、 エレメントが確実に取得できたあとでこのスクリプトを実行するようにすればいい。 エレメントが確実に取得できたあととは、ページのロードが終わった後のことである。 具体的には、 window.onload にスクリプトの内容を代入する。

なお、動的にオブジェクトを生成する方法として、createElement などが使える。

リンク

まりんきょ学問所 ＞ JavaScript 手習い ＞ ドキュメントの制御

MARUYAMA Satosi