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 で述べられている。しかし、innerHTML プロパティを使う方法は、
プロパティの書き換えを伴うのでオーバーヘッドがある。書き換えを伴わない場合は、
element.insertAdjacentHTML() メソッドを使うのがよいと Mozilla にはある。
そこで、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 にスクリプトの内容を代入する。
リンク
まりんきょ学問所 >
JavaScript 手習い >
ドキュメントの制御
MARUYAMA Satosi