「JavaScript/DOM」の版間の差分

削除された内容 追加された内容
Ef3 (トーク | 投稿記録)
M {{Nav}}
Ef3 (トーク | 投稿記録)
標準へのリンク
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="html4stricthtml5">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Web Page</title>
</head>
<body>
<div id="output"></div>
<script type="text/javascript"scrip>
varconst output = document.getElementById("output");
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>HTMLドキュメントかthis(この場合は document)の子孫の中でIDが与え指定しIDIdと一致する最初の要素持つツリー順に返し、位置する要素がない場合はnull抽出します。ここでは "output" というIDを持つ要素、すなわち<code><nowiki><div id="output"></div></nowiki></code>という<code>div</code>要素を参照し、要素に対応するElementオブジェクトを<code>output</code>という変数に代入しています。
 
<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").item([0)].getElementsByTagName("p").item([0)].firstChild.nodeValue);
</script>
</body>
104 ⟶ 106行目:
; Element(要素)
: すべての要素オブジェクトが継承する基底オブジェクト
: head要素へのインターフェース HTMLHeadElement, body要素へのインターフェース HTMLBodyElement など術との要素オブジェクトはElement要素のプロパティを持つ。
; Attr(属性)
: DOM 要素の属性へのインターフェース
125 ⟶ 127行目:
 
とする事で、sampleとidを打ったHTML要素の内部のテキスト表示を置き換える事が出来る。
 
ただし、ソースコードのその部分が置き換わるわけではない。あくまで、ブラウザなどでの表示に、内容が置き換わるだけである。
 
=== document.body ===
133 行
 
<syntaxhighlight lang="js">
document.getElementsByTagName("body").item([0)];
</syntaxhighlight>
 
まったく同じもので等価ある。
 
*ノードの概念
178 行
{{コラム|メモリ内部でのDOMデータ|
DOMを正しく使おうと思えば最終的には何故DOMのオブジェクトシステムはこの様に出来ているのか?
ということを理解する必要がある。DOMはXML文書を解析してその内容をメモリ上に展開するときコレクション同士がツリー状に繋がっている。既にJava等でデザインパターンを修得している上級者には[[w:Composite パターン|Composite パターン]]を取っていると言えば分かっていただけるであろう(より平易言葉で言うとデータがRoot(幹)から枝・葉の様につい方はここは飛ばして良い<!-- 初心者の理解がった[[w:木構造_(データ構造)|木構造]]でる次元ではありませんので -->)。DOMに存在する種々の「データ型」というのは、これの先にある様々な枝が何処でどう繋がれるのかを想像しながら使うものである。使っていく内に実感が追いついて慣れていくと思うが、初学者にはそこまでが単純ではないので頑張って欲しい。
<!--
DOMについての項に関しては、解説すべき項目が多く、とても扱いきれない部分があるので
http://www.doraneko.org/misc/dom10/19981001/cover.html
を参照のこと。-->
}}