「JavaScript/DOM」の版間の差分
削除された内容 追加された内容
M {{Nav}} |
標準へのリンク |
||
1 行
{{Nav}}
'''[[w:DOM|DOM]]'''(ドム、'''''D'''ocument '''O'''bject '''M'''odel''、ドキュメント・オブジェクト・モデル)とは、プログラミング言語から[[HTML]]ドキュメントなどを扱うために標準化された仕様です<ref>かつてはW3CがDOMの標準化を行っていましたが、2021年6月現在では[[w:WHATWG|WHATWG]]の策定する DOM
Living Standard が標準です。 https://dom.spec.whatwg.org/</ref>。そのため、基本的にウェブブラウザ上でだけ DOM は動作します<ref> 山田祥寛『改訂新版 JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで~ 』、技術評論社、2019年8月17日 初版 第6刷、280ページ </ref>。ブラウザ以外では普通は動作しないのが普通なので、注意してください。ウェブブラウザ上のJavaScriptにはDOM関連のプロパティやメソッドが組み込まれています。たとえばウェブブラウザ上に警告ダイアログを表示する<code>window.alert</code>メソッドもDOMの一部です。 == 概要 ==
HTMLの<code>script</code>要素を用いると、JavaScriptのプログラムをHTMLドキュメントの中に埋め込むことができます。
<syntaxhighlight lang="
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Web Page</title>
</head>
<body>
<div id="output"></div>
<
output.innerHTML = "Hello, world!";
</script>
23 ⟶ 25行目:
このHTMLドキュメントをJavaScriptに対応したウェブブラウザで表示すると、ウェブページ上に "Hello, world!" という文字列が表示されます。<code>script</code>要素の中に書かれているJavaScriptプログラムのソースコードに注目してください。
<code>document.getElementById</code>メソッドはDOMの一部で<ref>https://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid</ref>、
<code>output.innerHTML</code>プロパティを使用すると<code>div</code>要素の中身を取得したり、設定したりすることができます。ここでは<code>output.innerHTML</code>に <code>"Hello, world!"</code> という文字列を代入しているので、<code>div</code>要素の中身は "Hello, world!" という文字列になります。
29 ⟶ 31行目:
== 動的なWebページの操作 ==
JavaScriptを学びたいと言う人間の多くは、おそらくよりダイナミックなWebページを
そこで、この項ではWebページの操作を行うための方法であるDOMプログラミングを解説する。
64 ⟶ 66行目:
</div>
<script>
alert(document.getElementsByTagName("body")
</script>
</body>
104 ⟶ 106行目:
; Element(要素)
: すべての要素オブジェクトが継承する基底オブジェクト
: head要素へのインターフェース HTMLHeadElement, body要素へのインターフェース HTMLBodyElement など
; Attr(属性)
: DOM 要素の属性へのインターフェース
125 ⟶ 127行目:
とする事で、sampleとidを打ったHTML要素の内部のテキスト表示を置き換える事が出来る。
=== document.body ===
133 行
<syntaxhighlight lang="js">
document.getElementsByTagName("body")
</syntaxhighlight>
と
*ノードの概念
178 行
{{コラム|メモリ内部でのDOMデータ|
DOMを正しく使おうと思えば最終的には何故DOMのオブジェクトシステムはこの様に出来ているのか?
ということを理解する必要がある。DOMはXML文書を解析してその内容をメモリ上に展開するときコレクション同士がツリー状に繋がっている。既にJava等でデザインパターンを修得している上級者には[[w:Composite パターン|Composite パターン]]を取っていると言えば分かっていただけるであろう(
}}
|