DOMの構造は、windowオブジェクトをトップにした階層構造の下に、Webページで使うオブジェクトが配置されている。
window
l l-- textarea
l l-- text
l--frame l-- layer l-- fileUpload
l l-- link l-- password
l l-- image l-- hidden
l--document--l-- area l-- submit
l l-- anchor l-- reset
l l-- applet l-- radio
l--location l-- plugin l-- checkbox
l l-- form -----l-- button
l l--select ---- option
l--history
navigator
l
l--plugin
l--mimeType
このような階層構造になっているのは、Webページ内に散在している各種オブジェクトに容易にアクセスできるようにするため。この構造がわからないと、JavaScriptからオブジェクトを指定することができずに操作できないことになる。
たとえば次のようなHTMLがある。
<html>
<title>DOM</title>
<body>
<h3>sample></h3>
<hr />
<img src="image1.gif">
<form id="myForm">
<input type="button" value="click1" />
<input type="button" value="click2" />
</form>
</body>
</html>
このDOM構造は下記。
window --------- document------------ image
l------- form ----------button
l-----button
このように、HTMLは必ずDOMで表現できる。JavaScriptなどのスクリプト言語でHTML内のオブジェクトを操作するときには、この構造を必ず意識しなければならない。
逆に言えば、DOMを利用するには、HTMLを構造的に記述する必要がある。
l l-- textarea
l l-- text
l--frame l-- layer l-- fileUpload
l l-- link l-- password
l l-- image l-- hidden
l--document--l-- area l-- submit
l l-- anchor l-- reset
l l-- applet l-- radio
l--location l-- plugin l-- checkbox
l l-- form -----l-- button
l l--select ---- option
l--history
navigator
l
l--plugin
l--mimeType
このような階層構造になっているのは、Webページ内に散在している各種オブジェクトに容易にアクセスできるようにするため。この構造がわからないと、JavaScriptからオブジェクトを指定することができずに操作できないことになる。
たとえば次のようなHTMLがある。
<html>
<title>DOM</title>
<body>
<h3>sample></h3>
<hr />
<img src="image1.gif">
<form id="myForm">
<input type="button" value="click1" />
<input type="button" value="click2" />
</form>
</body>
</html>
このDOM構造は下記。
window --------- document------------ image
l------- form ----------button
l-----button
このように、HTMLは必ずDOMで表現できる。JavaScriptなどのスクリプト言語でHTML内のオブジェクトを操作するときには、この構造を必ず意識しなければならない。
逆に言えば、DOMを利用するには、HTMLを構造的に記述する必要がある。
コメントする