ドキュメントの制御

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

概要

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

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

ID による選択

getElementById("id_name") を使う。

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

役に立つプロパティ

document オブジェクトのプロパティで役に立つものはいろいろある。

便利なものは、document.documentElement.lang だ。このプロパティには、 WEB ページで、<html lang="language_code"> で指定される言語コードが入っている。私の場合は、<html lang="ja"> （日本語）のほか、<html lang="eo"> （エスペラント）や、<html lang="en"> （英語）をよく使う。多言語対応のページを作る際は必須である。

列挙

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 要素のうち、閉じタグの直後に挿入することを指示している。 afterend を含めて取りうる文字列を列挙する。https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML からの引用に多少手を加えた。

position

文字列で、要素の相対的な位置を表します。以下のいずれかでなければならない。

"beforebegin": 要素の前。要素が DOM ツリー内にあり、親要素がある場合にのみ有効。
"afterbegin": 要素のすぐ内側、最初の子の前。
"beforeend": 要素のすぐ内側、最後の子の後。
"afterend": 要素の後。要素が DOM ツリー内にあり、親要素がある場合にのみ有効。

このコードは動作する。すなわち、水平線は表示される。では、スクリプトを 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 でオブジェクトのプロパティを列挙する方法(http://dangerous-animal141.hatenablog.com/)
JavaScript のオブジェクトのプロパティ一覧を取得する方法とオブジェクトが指定の名前のプロパティをもっているか検査する方法 (vividcode.hatenablog.com)