JavaScript ドキュメント型の解説
出典: フリー教科書『ウィキブックス（Wikibooks）』
目次 |
[編集] ドキュメント型
ドキュメント型はDOM(Document Object Model)という構造体で、ウエブページをすべて定義している。
ドキュメント構造体は、ブラウザーに用意されている、基本、オブジェクトといえる。
オブジェクトは、
プロパティ・属性 と、
メソッド・処理関数で、作られている、オブジェクト・構造体だといえる。
プロパティと、メソッドを使うと、ウエブページを完全に操作できるので、ドキュメント構造体は
ウエブページとのインターフェースとなっている。 なお、ブラウザーにより拡張された機能があり、共通に使えない部分がある。
[編集] ドキュメント構造体の、全部の要素・エレメントの表示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!-- 文字セットに注意、UTF-8 に統一する。したがって、シフトジスなどのメタタグは消す。
（コメントでは処理・読まれることがある、？_？ 想像です ）
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="Java Script ジャバスクリプト 検索エンジン 作り方 メニューページ ">
<title>Look into DOM structure 1</title>
このサンプルでできること、<br>
１、オンロードのとき、自分のページの構造体を、読み出し、、別ウインドーを開いて、定義されているすべての要素・エレメントを表示。<br>
<br><br>
<br><br>
----- 検索文字列、入力 関数（ファンクション）-----<br>
<script type="text/javascript">
var sg ="" ;
var tx2="" ;
var tx1="in-Head 変数を渡すテスト" ;
//最初に宣言した変数が、広域、変数となる。ファンクションのなかで宣言すると外では使えない
// --></script>
----- ウインドーオープン 関数（ファンクション）-----<br>
<script type="text/javascript"><!--
//サブウインドーに出力するには、ハンドルを取得して、ハンドル。ドキュメント。ライト（） 関数形式を使う。
//ニューウインどーの名前は、メニュー画面からは使えない。（ようだ、）
//クローズしなくても書き込み表示できる。 終端ボディタグは無視されて、追加書き込みできる。
//function t2_win() {
function onLoad2() {
// サブウィンドウの内容を表示する
AHwin = window.open('', 'AH_Odata','top=400,height=300,width=1000,menubar=no,toolbar=no,scrollbars=yes');
// サブウィンドーに、AH_Odata の名前をつけているが、今のところ使っていない。
// サブウィンドウに、書き込み 表示する
AHwin.document.open();
AHwin.document.write('<html><body>');
AHwin.document.write('サブウィンドウ<br>');
AHwin.document.write('</body></html>');
Ah_el();
// AHwin.document.write('<br> タグレングス ');
// AHwin.document.write( AllTags.length );
// AHwin.document.write(' ＝ 」 <br>');
// AHwin.document.write( tx1 );
// AHwin.document.write('<br> end 0Txt 2 <br>');
AHwin.document.write( sg );
AHwin.document.write('2 - サブウィンドウ <br>');
AHwin.document.write('<br> IE Allタグレングス ');
AHwin.document.write( document.all.length );
AHwin.document.write(' ＝ 」 <br>');
AHwin.document.write( taglist );
AHwin.document.close();
}
// --></script>
------------- 以下、表示されるものが多いほうがいいので、残しておく。 ------------
<br>
----- For ( in ) 構文のテストと、コマンド、ドキュメントの勉強 -----<br>
<script><!--
function onLoad()
{
var result = "";
var pCollection = document.getElementsByTagName('p');
for( var index in pCollection )
{
result += " [" + index + "]=[" + pCollection[index] + "]<br>";
}
document.getElementById('result').innerHTML = result;
}
// --></script>
----- オンロード、読み込み終了時、動作する。サブオープンして、内容表示。 -----<br>
<script><!--
function onLoad3()
{
var result = "";
var pCollection = document.getElementsByTagName('*');
for( var index in pCollection ) {
result += " [No " + index + "]=[" + pCollection[index] + "] <br>";
}
document.getElementById('result').innerHTML = result;
}
// --></script>
----- オンロード、読み込み終了時、動作する。同じ画面に、内容表示。 -----<br>
-------- documentのオブジェクト・プロパティを全て表示する方法 -----<br>
<script><!--
function Ah_el()
{
var key ="" ; キーは文字型で、連想リストになっている
var n =0 ; Nは、ファンクションプロパティを読み出す、順番で、使い方の順番ではない。
for ( key in document){
//document.write( i +"="+document[i] + "<BR>") ;
sg += "No- " + n + "="+document[key] + " *Key is -"+ key + " <BR>" ;
n++ ;
// dbg.innerHTML += i + " : " + document[i] + "";
// dbg.innerHTML += k + " : " + obj[k] + "";
}
// document.write( sg ) ;
}
// --></script>
</head>
//<body>
<body onload="onLoad2()">
<p>line1</p>
<p>line2</p>
<p>line3</p>
<div id="result">
</div>
----- エレメント読み出し、 スクリプト -----<br>
<script type="text/javascript"><!--
taglist = "";
for (i = 0; i < document.all.length; i++) {
taglist += i+" "+ document.all(i).tagName;
taglist += " ";
}
taglist += " ==XXXX Ene of This.Html <br>";
// var leng = document.getElements.ByTagName.length; //(タグの文字列)
// tx1=" "+leng +" <br>" ;
// window.onload=function(){
//if(document.all){
//AllTags=document.all;
//}else{
AllTags=document.getElementsByTagName("*");
//}
//alert(AllTags.length);
//}
tx1="" ;
for (i = 0; i < AllTags.length ; i++) {
tx1 += i+" ";
tx1 += AllTags.item(i) ;
// tx1 += document.getElementsByTagName("*");
// tx2 += document.getElementsByTagName(i);
}
// --></script>
----- 何もせずに、For( ｉｎ ) 構文とドキュメントプロパティの表示 -----<br>
----- ここから、メニュー No1 ページ 邪魔ではないので残しておく-----<br>
<h1> メニュー つくり </h1>
<form name="AH_F1" >
<input type="text" name="Ah_T1">
＋
<input type="text" name="Ah_T2">
<input type="button" value="Look to ＞" onclick="AHin_func()">
<input type="text" name="Ah_T3" value ="捜す言葉">
<br>//検索文字、入力すると、それが表示される。<
<br>//検索文字列が、ない。場合、ファンクションが実行されないので、初期値のインヘッド文字列が表示される
<br>
</form>
-----表示用 ウインドーのテスト -----<br>
<script type="text/javascript"><!--
// tx1="at＿Body 変数を渡すテスト";
// この位置で、変数定義すると、あっとボディが表示される。
// --></script>
<a href="" onclick="t2_win()"クリック ＞ウィンドウオープンしてテスト結果を表示</a>
AHwin.document.write( ボディ エンドたぐ - サブウィンドウ <br>');
？ このサブウインドーメッセージが、表示される ？？
-----上の行まで(copy)-----<br>
</body>
<h2> ボディエンド です</h2>
</body>
</html>
[編集] 表示形式の解説
DOM(Document Object Model)の構造を理解すれば、使えるようになる。 要素読み出しプログラムの、
var key ="" ; キーは文字型で、連想リストになっている
var n =0 ; Nは、ファンクションプロパティを読み出す、順番で、使い方の順番ではない。
[編集] サブページを作って、さぶぺーじのDOMを メインページから、サブへ表示 する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!-- 文字セットに注意、UTF-8 に統一する。したがって、シフトジスなどのメタタグは消す。
（コメントでは処理・読まれることがある、？_？ 想像です ）
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="Java Script ジャバスクリプト 検索エンジン サブウインドーのDOM エレメント読み出し ">
<title>Look into SUB DOM's structure 1</title>
このサンプルの、動作の 説明。 <br>
１、別(サブ)ウインドーを開いて、html ページを書き込む。<br>
２、 メインページから、サブの、 定義されているすべての要素・エレメントを読み出し、サブウィンドーに書き込み、クローズする。 <br>
<br><br>
<br><br><br>
----- 検索文字列、入力 関数（ファンクション）-----<br>
<script type="text/javascript">
var sg ="" ;
var tx2="" ;
var tx1="in-Head 変数を渡すテスト" ;
//最初に宣言した変数が、広域、変数となる。ファンクションのなかで宣言すると外では使えない
//テスト用 マイセルフ ドキュメントオープン
// this.document.open(); // ディス、オープンすると、新しいページを開いてしまう、ので、自分のページの変更には使えない。。
// --></script>
----- ウインドーオープン 関数（ファンクション）-----<br>
<script type="text/javascript"><!--
//サブウインドーに出力するには、ハンドルを取得して、ハンドル。ドキュメント。ライト（） 関数形式を使う。
//ニューウインどーの名前は、メニュー画面からは使えない。（ようだ、）
//クローズしなくても書き込み表示できる。 終端ボディタグは無視されて、追加書き込みできる。
function onLoad2() {
// サブウィンドウの内容を表示する
AHwin = window.open('', 'AH_Odata','top=400,height=300,width=1000,menubar=no,toolbar=no,scrollbars=yes');
// サブウィンドーに、AH_Odata の名前をつけているが、今のところ使っていない。
// サブウィンドウに、HTHML タグを、書き込み 表示する
AHwin.document.open();
AHwin.document.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">');
AHwin.document.write('<html>');
AHwin.document.write('<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
AHwin.document.write(' <meta content="Java Script ジャバスクリプト 検索エンジン 読み出すための、サブウインドーのDOM エレメント">');
AHwin.document.write('</head>');
AHwin.document.write('<body><p>line1</p><p>line2</p><p>line3</p>');
AHwin.document.write( sg );
//AHwin.document.write('<html><body>');
AHwin.document.write('サブウィンドウ<br>');
AHwin.document.write('</body></html>');
// Ah ウインドーの Domを読み出せれるのか？ 実験。
var key ="" ; // キーは文字列、連想配列の、見出しになっている。
var n =0 ;// ｎは、文字列キーを読み出す順番、 コマンドに 数値指定、が使えるかどうか不明。
for ( key in AHwin.document){
//AHwin.document.write( i +"="+AHwin.document[i] + "<BR>") ;
sg = "No- " + n + "="+AHwin.document[key] + " *Key is --"+ key + " <BR>" ;
n++ ;
AHwin.document.write( sg ) ;
// document.write( sg ) ;
// dbg.innerHTML += i + " : " + AHwin.document[i] + "";
// dbg.innerHTML += k + " : " + obj[k] + "";
}
AHwin.document.close();
}
// --></script>
----- For ( in ) 構文のテストと、コマンド、ドキュメントの勉強 -----<br>
----- オンロード、読み込み終了時、動作する。サブオープンして、内容表示。 -----<br>
----- オンロード、読み込み終了時、動作する。同じ画面に、内容表示。 -----<br>
-------- documentのオブジェクト・プロパティを全て表示する方法 -----<br>
</head>
//<body>
<body onload="onLoad2()">
<p>line1</p>
<p>line2</p>
<p>line3</p>
<div id="result">
</div>
----- エレメント読み出し、 スクリプト -----<br>
----- 何もせずに、For( ｉｎ ) 構文とドキュメントプロパティの表示 -----<br>
----- ここから、メニュー No1 ページ 邪魔ではないので残しておく-----<br>
<h1> メニュー つくり </h1>
<form name="AH_F1" >
<input type="text" name="Ah_T1">
＋
<input type="text" name="Ah_T2">
<input type="button" value="Look to ＞" onclick="AHin_func()">
<input type="text" name="Ah_T3" value ="捜す言葉">
<br>//検索文字、入力すると、それが表示される。<
<br>//検索文字列が、ない。場合、ファンクションが実行されないので、初期値のインヘッド文字列が表示される
<br>
</form>
-----表示用 ウインドーのテスト -----<br>
-----上の行まで(copy)-----<br>
</body>
<h2> ボディエンド です</h2>
</body>
</html>
[編集] ドキュメント構造体の、プロパティ・属性と、メソッド・処理関数の、名前、表示結果。
テキストは、一行にまとまっているのか? それとも、テキストという、ハッシュキーなのか? プロパティは、読み出したときは属性値が得られる。書き込んだときは、属性値を変える事ができる。(らしい) 使い方のサンプルプログラム、から、この構造体の使い方を、勉強していきます。
構造体の使い方は、プログラミングの勉強で、解説・勉強します。
サブウィンドウ
No- 0=file://localhost/C:/Documents%20and%20Settings/Administrator/デスクトップ/LookSUBDOM1.html *Key is --URL
No- 1=null *Key is --activeElement
No- 2= *Key is --alinkColor
No- 3=[object HTMLCollection] *Key is --all
No- 4=[object HTMLCollection] *Key is --anchors
No- 5=[object HTMLCollection] *Key is --applets
No- 6=false *Key is --async
No- 7=null *Key is --attributes
No- 8= *Key is --bgColor
No- 9=[object HTMLBodyElement] *Key is --body
No- 10= *Key is --characterSet
No- 11= *Key is --charset
No- 12=[object NodeList] *Key is --childNodes
No- 13=CSS1Compat *Key is --compatMode
No- 14= *Key is --cookie
No- 15=[object Window] *Key is --defaultView
No- 16=off *Key is --designMode
No- 17= *Key is --dir
No- 18=[object DocumentType] *Key is --doctype
No- 19=[object HTMLDocument] *Key is --document
No- 20=[object HTMLHtmlElement] *Key is --documentElement
No- 21=file://localhost/C:/Documents%20and%20Settings/Administrator/デスクトップ/LookSUBDOM1.html *Key is --documentURI
No- 22=localhost *Key is --domain
No- 23=[object HTMLCollection] *Key is --embeds
No- 24= *Key is --fgColor
No- 25=[object HTMLHtmlElement] *Key is --firstChild
No- 26=[object HTMLCollection] *Key is --forms
No- 27=[object WindowCollection] *Key is --frames
No- 28=[object HTMLCollection] *Key is --images
No- 29=[object DOMImplementation] *Key is --implementation
No- 30=[object HTMLHtmlElement] *Key is --lastChild
No- 31=January 1, 1970 GMT *Key is --lastModified
No- 32= *Key is --linkColor
No- 33=[object HTMLCollection] *Key is --links
No- 34=null *Key is --localName
No- 35=file://localhost/C:/Documents%20and%20Settings/Administrator/デスクトップ/LookSUBDOM1.html *Key is --location
No- 36=null *Key is --namespaceURI
No- 37=null *Key is --nextSibling
No- 38=#document *Key is --nodeName
No- 39=9 *Key is --nodeType
No- 40=null *Key is --nodeValue
No- 41=null *Key is --ownerDocument
No- 42=null *Key is --parentNode
No- 43=[object Window] *Key is --parentWindow
No- 44=[object HTMLCollection] *Key is --plugins
No- 45=null *Key is --prefix
No- 46=null *Key is --previousSibling
No- 47=interactive *Key is --readyState
No- 48= *Key is --referrer
No- 49=[object HTMLCollection] *Key is --scripts
No- 50=[object Selection] *Key is --selection
No- 51=[object StyleSheetList] *Key is --styleSheets
No- 52= line1line2line3サブウィンドウNo- 0=file://localhost/C:/Documents%20and%20Settings/Administrator/デスクトップ/LookSUBDOM1.html *Key is --URL No- 1=null *Key is --activeElement No- 2= *Key is --alinkColor No- 3=[object HTMLCollection] *Key is --all No- 4=[object HTMLCollection] *Key is --anchors No- 5=[object HTMLCollection] *Key is --applets No- 6=false *Key is --async No- 7=null *Key is --attributes No- 8= *Key is --bgColor No- 9=[object HTMLBodyElement] *Key is --body No- 10= *Key is --characterSet No- 11= *Key is --charset No- 12=[object NodeList] *Key is --childNodes No- 13=CSS1Compat *Key is --compatMode No- 14= *Key is --cookie No- 15=[object Window] *Key is --defaultView No- 16=off *Key is --designMode No- 17= *Key is --dir No- 18=[object DocumentType] *Key is --doctype No- 19=[object HTMLDocument] *Key is --document No- 20=[object HTMLHtmlElement] *Key is --documentElement No- 21=file://localhost/C:/Documents%20and%20Settings/Administrator/デスクトップ/LookSUBDOM1.html *Key is --documentURI No- 22=localhost *Key is --domain No- 23=[object HTMLCollection] *Key is --embeds No- 24= *Key is --fgColor No- 25=[object HTMLHtmlElement] *Key is --firstChild No- 26=[object HTMLCollection] *Key is --forms No- 27=[object WindowCollection] *Key is --frames No- 28=[object HTMLCollection] *Key is --images No- 29=[object DOMImplementation] *Key is --implementation No- 30=[object HTMLHtmlElement] *Key is --lastChild No- 31=January 1, 1970 GMT *Key is --lastModified No- 32= *Key is --linkColor No- 33=[object HTMLCollection] *Key is --links No- 34=null *Key is --localName No- 35=file://localhost/C:/Documents%20and%20Settings/Administrator/デスクトップ/LookSUBDOM1.html *Key is --location No- 36=null *Key is --namespaceURI No- 37=null *Key is --nextSibling No- 38=#document *Key is --nodeName No- 39=9 *Key is --nodeType No- 40=null *Key is --nodeValue No- 41=null *Key is --ownerDocument No- 42=null *Key is --parentNode No- 43=[object Window] *Key is --parentWindow No- 44=[object HTMLCollection] *Key is --plugins No- 45=null *Key is --prefix No- 46=null *Key is --previousSibling No- 47=interactive *Key is --readyState No- 48= *Key is --referrer No- 49=[object HTMLCollection] *Key is --scripts No- 50=[object Selection] *Key is --selection No- 51=[object StyleSheetList] *Key is --styleSheets *Key is --text
No- 53=null *Key is --textContent
No- 54= *Key is --title
No- 55= *Key is --vlinkColor
No- 56=0 *Key is --length
No- 57=null *Key is --onload
No- 58=null *Key is --onunload
No- 59= function getElementsByName() { [native code] } *Key is --getElementsByName
No- 60= function elementFromPoint() { [native code] } *Key is --elementFromPoint
No- 61= function captureEvents() { [native code] } *Key is --captureEvents
No- 62= function releaseEvents() { [native code] } *Key is --releaseEvents
No- 63= function getSelection() { [native code] } *Key is --getSelection
No- 64= function createDocumentFragment() { [native code] } *Key is --createDocumentFragment
No- 65= function createEvent() { [native code] } *Key is --createEvent
No- 66= function createRange() { [native code] } *Key is --createRange
No- 67= function createProcessingInstruction() { [native code] } *Key is --createProcessingInstruction
No- 68= function importNode() { [native code] } *Key is --importNode
No- 69= function adoptNode() { [native code] } *Key is --adoptNode
No- 70= function getElementById() { [native code] } *Key is --getElementById
No- 71= function createNSResolver() { [native code] } *Key is --createNSResolver
No- 72= function load() { [native code] } *Key is --load
No- 73= function createElement() { [native code] } *Key is --createElement
No- 74= function createElementNS() { [native code] } *Key is --createElementNS
No- 75= function createAttribute() { [native code] } *Key is --createAttribute
No- 76= function createAttributeNS() { [native code] } *Key is --createAttributeNS
No- 77= function createTextNode() { [native code] } *Key is --createTextNode
No- 78= function createComment() { [native code] } *Key is --createComment
No- 79= function createCDATASection() { [native code] } *Key is --createCDATASection
No- 80= function createNodeIterator() { [native code] } *Key is --createNodeIterator
No- 81= function createTreeWalker() { [native code] } *Key is --createTreeWalker
No- 82= function getElementsByTagName() { [native code] } *Key is --getElementsByTagName
No- 83= function getElementsByTagNameNS() { [native code] } *Key is --getElementsByTagNameNS
No- 84= function createExpression() { [native code] } *Key is --createExpression
No- 85= function evaluate() { [native code] } *Key is --evaluate
No- 86= function dispatchEvent() { [native code] } *Key is --dispatchEvent
No- 87= function insertBefore() { [native code] } *Key is --insertBefore
No- 88= function replaceChild() { [native code] } *Key is --replaceChild
No- 89= function removeChild() { [native code] } *Key is --removeChild
No- 90= function appendChild() { [native code] } *Key is --appendChild
No- 91= function hasChildNodes() { [native code] } *Key is --hasChildNodes
No- 92= function cloneNode() { [native code] } *Key is --cloneNode
No- 93= function normalize() { [native code] } *Key is --normalize
No- 94= function isSupported() { [native code] } *Key is --isSupported
No- 95= function hasAttributes() { [native code] } *Key is --hasAttributes
No- 96= function getFeature() { [native code] } *Key is --getFeature
No- 97= function addEventListener() { [native code] } *Key is --addEventListener
No- 98= function removeEventListener() { [native code] } *Key is --removeEventListener
No- 99= function attachEvent() { [native code] } *Key is --attachEvent
No- 100= function detachEvent() { [native code] } *Key is --detachEvent
No- 101= function lookupPrefix() { [native code] } *Key is --lookupPrefix
No- 102= function isDefaultNamespace() { [native code] } *Key is --isDefaultNamespace
No- 103= function lookupNamespaceURI() { [native code] } *Key is --lookupNamespaceURI
No- 104= function selectNodes() { [native code] } *Key is --selectNodes
No- 105= function selectSingleNode() { [native code] } *Key is --selectSingleNode
[編集] URLを指定して開いた、ドキュメント構造体を、読み出してみる。
他の、URLをオープンした、ドキュメントと構造体の指定、方法がわからないので、うまくいかない
ウィンドー。ドキュメント。メソッド という構造だと思うのだが、？？
