「JavaScript/DOM」の版間の差分
削除された内容 追加された内容
→余談:メモリ内部でのDOMデータ: Use {{コラム}} |
getElementsByTagName()が返すのはリストではなくHTMLCollection。innerHTMLはメソッドではなくプロパティ。ほか |
||
1 行
'''[[w:DOM|DOM]]'''（ドム、'''''D'''ocument '''O'''bject '''M'''odel''、ドキュメント・オブジェクト・モデル）とは、プログラミング言語から[[HTML]]ドキュメントなどを扱うために標準化された仕様です。そのため、基本的にウェブブラウザ上でだけ DOM は動作します<ref> 山田祥寛『改訂新版 JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで～ 』、技術評論社、2019年8月17日 初版 第6刷、280ページ </ref>。ブラウザ以外では普通は動作しないのが普通なので、注意してください。ウェブブラウザ上のJavaScriptにはDOM関連のプロパティやメソッドが組み込まれています。たとえばウェブブラウザ上に警告ダイアログを表示する<code>window.alert</code>メソッドもDOMの一部です。
== 概要 ==
24 行
<code>document.getElementById</code>メソッドはDOMの一部で、HTMLドキュメントから指定したIDを持つ要素を抽出します。ここでは "stdout" というIDを持つ要素、すなわち<code><nowiki><div id="stdout"></div></nowiki></code>という<code>div</code>要素を参照し、要素オブジェクトを<code>stdout</code>という変数に代入しています。
<code>stdout.innerHTML</code>
== 動的なWebページの操作 ==
81 行
ここまでくればあとの動作は簡単なので、同じようにdivタグ、pタグの中身をgetElementsByTagNameメソッドを使って手繰って行き、最後にpタグの中身の最初の中身、つまりは「DOM TEST」のテキストを取得している。
それぞれのメソッドとプロパティの解説を行うと、
:
▲*item
▲:リストから番号を指定して要素を取り出す
: 最初の子要素を返す
▲*firstChild
:
▲*nodeValue
この様に、ツリーを上側から順番に手繰っていくことにより、目標の要素に辿り着いて、その後にそこの情報を読み出したり変更したりする。
| |||