「JavaScript/DOM」の版間の差分
削除された内容 追加された内容
getElementsByTagName()が返すのはリストではなくHTMLCollection。innerHTMLはメソッドではなくプロパティ。ほか |
DOM XMLcore の拡張HTMLモジュールの事を表している記述から HTML5の一部 DOM ECMAScript API に緩やかに編集。実際HTML5のXML構文は、この本に見つけることが出来ない。 |
||
11 行
</head>
<body>
<div id="
<script type="text/javascript">
var
</script>
</body>
22 行
このHTMLドキュメントをJavaScriptに対応したウェブブラウザで表示すると、ウェブページ上に "Hello, world!" という文字列が表示されます。<code>script</code>要素の中に書かれているJavaScriptプログラムのソースコードに注目してください。
<code>document.getElementById</code>メソッドはDOMの一部で、HTMLドキュメントから指定したIDを持つ要素を抽出します。ここでは "
<code>
== 動的なWebページの操作 ==
34 行
=== Document Object Model の解説 ===
Document Object Model (以下、DOM)とは、HTML文書やXML文書を
黎明期はJavaで実装・規格化されたため、XMLを扱うならJava一択という認識があった時期もあったが、現在ではほとんどの言語でDOMのプログラムインターフェースが整備されておりどの言語を選んだとしてもHTML文書やXML文書を扱えるようになっている（代表的な言語でDOMが標準でバンドルされていないものはRubyくらいであるが、こちらはREXMLという、よりリッチなライブラリを積んでいる）。
DOMは、基本的にはオブジェクト指向的な扱いを考えながらも、Java以外にも多くの言語で動作することを期待して規格化されており、文法的には堅くやや面倒くさい記述法をしているが、Webブラウザ側でHTML文書やXML文書を扱うための、ほぼ唯一の方法なので慣れる様努力して欲しい。
なお、DOMは現在では主流のブラウザほとんどで利用が出来るが、古いブラウザに関しては動かないものが多くある事を注意しておく（例としてはMicrosoftのInternetExplolerでは5.0以降で対応している）。
44 行
=== サンプル ===
HTML文書やXML文書は、文書を
そして、複数の
DOMとはXML文書がツリー構造になる事を強く意識して作成されているライブラリ群である。
DOMは内部の動作原理が最初は想像をしにくいライブラリであるので、これを習得する際には実際にHTML文書やXML文書を読み込んで、それを操作しながら、動作とプログラムとの対応関係を頭の中に焼き付けてしまうのが一番良い方法だと思われる。
まずは、次のサンプルを打ち込んでほしい。
<syntaxhighlight lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DOMでのデータ取り出しテスト</title>
</head>
<body>
<div>
</div>
<script>
▲ alert(document.getElementsByTagName("body").item(0).getElementsByTagName("p").item(0).firstChild.nodeValue);
</script>
</body>
</html>
</syntaxhighlight>
この文書では、
ここから「DOM TEST」の文字列を読み出したい場合には、サンプルコードの様に記述をすればよい。
何故この様にするのかを逐次解説していく。
まず最初のdocumentを解説する。
documentはDocumentインターフェイスのオブジェクトで、特別に宣言を行わなくても存在し、
これにはwebページでのhtml要素をrootとする木構造として文書本体が格納されている。
文書への操作は、ツリーの枝葉に当たる要素に降下することで行われる。
html要素の下にはhead要素とbody要素があるので、まずbody要素を取得するためにgetElementsByTagNameメソッドでbody
そしてbody要素は1つしか存在しないので、取得できたbody要素のHTMLCollectionの最初の要素を取得する。
ここまでくればあとの動作は簡単なので、同じようにdiv それぞれのメソッドとプロパティの解説を行うと、
92 行
: 要素内のデータを取り出す
この様に、ツリーを
そのため、DOMプログラムでは、自分が
=== 基本的単語の解説 ===
99 行
DOMはその名の中にある「ドキュメント」「オブジェクト」「モデル」の名の通り、XMLの各部分をオブジェクト（モノ）として分割して、それぞれを参照して扱える様にする方法である。XML内部には、タグで区切られた数々のデータがあり、それぞれを種類分けしてプログラムで扱っている。その中でも特によく使うDOMのデータ型は次の3種類である。
: 木構造の「節」。要素だけでなく属性 Attr を示す事もある。
: すべての要素オブジェクトが継承する基底オブジェクト
▲*Element（要素）
: head要素へのインターフェース HTMLHeadElement, body要素へのインターフェース HTMLBodyElement など術との要素オブジェクトはElement要素のプロパティを持つ。
: DOM 要素の属性へのインターフェース
▲*Attribute（属性）
最終的には、これらのデータのある、場所まで辿りついて、その部分のデータを加工する事を続けるのがJavaScriptによるWebプログラミングになる。
116 ⟶ 113行目:
DOMは、XMLを広くカバーする仕様となっているが、特にHTMLに関しての特別の拡張が行われており、簡潔な書式でHTMLの機能を呼び出せるようになっている。この拡張の中でよく使うのが次の2つである。
=== document.getElementById ===
document.getElementByIdはDOMプログラミングを実際に行う際に最もよく使う機能で、指定したIDのHTML要素を参照することが出来る。
141 ⟶ 138行目:
*ノードの概念
**DOMに関するオブジェクト<br>
Attr
CDATASection
CharacterData
Comment
CustomEvent
Document
DocumentFragment
DocumentType
DOMException
DOMImplementation
DOMString
DOMTimeStamp
DOMStringList
DOMTokenList
Element
Event
EventTarget
HTMLCollection
MutationObserver
MutationRecord
NamedNodeMap (en-US)
Node
NodeFilter (en-US)
NodeIterator
NodeList
NonDocumentTypeChildNode
ParentNode
ProcessingInstruction (en-US)
Range
Text
TimeRanges
TreeWalker
URL
Window
Worker
{{コラム|メモリ内部でのDOMデータ|
DOMを正しく使おうと思えば
ということを理解する必要がある。DOMはXML文書を解析して
<!--
DOMについての項に関しては、解説すべき項目が多く、とても扱いきれない部分があるので
| |||