Es6-html-dom
ES6-HTML DOM
すべてのWebページは、ブラウザウィンドウ内にあり、オブジェクトと見なすことができます。
- ドキュメントオブジェクト*は、そのウィンドウに表示されるHTMLドキュメントを表します。 ドキュメントオブジェクトには、ドキュメントコンテンツへのアクセスと変更を許可する他のオブジェクトを参照するさまざまなプロパティがあります。
ドキュメントのコンテンツにアクセスして変更する方法は、ドキュメントオブジェクトモデル*または *DOM と呼ばれます。 オブジェクトは階層構造になっています。 この階層構造は、Webドキュメント内のオブジェクトの組織に適用されます。
以下は、いくつかの重要なオブジェクトの単純な階層です-
いくつかのDOMが存在します。 以下のセクションでは、これらの各DOMを詳細に説明し、それらを使用してドキュメントコンテンツにアクセスして変更する方法を説明します。
- *レガシーDOM *-これは、JavaScript言語の初期バージョンで導入されたモデルです。 すべてのブラウザで十分にサポートされていますが、フォーム、フォーム要素、画像など、ドキュメントの特定の重要な部分にのみアクセスできます。
- The W3C DOM -このドキュメントオブジェクトモデルは、すべてのドキュメントコンテンツへのアクセスと変更を可能にし、World Wide Web Consortium（W3C）によって標準化されています。 このモデルは、ほとんどすべての最新ブラウザーでサポートされています。
- IE4 DOM -このドキュメントオブジェクトモデルは、MicrosoftのInternet Explorerブラウザのバージョン4で導入されました。 IE 5以降のバージョンには、ほとんどの基本的なW3C DOM機能のサポートが含まれています。
レガシーDOM
これは、初期バージョンのJavaScript言語で導入されたモデルです。 すべてのブラウザで十分にサポートされていますが、フォーム、フォーム要素、画像など、ドキュメントの特定の重要な部分にのみアクセスできます。
このモデルは、タイトル、URL、lastModifiedなどのいくつかの読み取り専用プロパティを提供し、ドキュメント全体に関する情報を提供します。 それとは別に、ドキュメントのプロパティ値を設定および取得するために使用できるこのモデルによって提供されるさまざまなメソッドがあります。
レガシーDOMのドキュメントプロパティ
以下は、レガシーDOMを使用してアクセスできるドキュメントプロパティのリストです。
シニア
プロパティと説明
1
*alinkColor*非推奨-アクティブ化されたリンクの色を指定する文字列。
例：document.alinkColor
2
- アンカー[] *
アンカーオブジェクトの配列。ドキュメントに表示されるアンカーごとに1つ。
例：document.anchors [0]、document.anchors [1]など
3
*applets []*アプレットオブジェクトの配列。ドキュメントに表示されるアプレットごとに1つ。
例：document.applets [0]、document.applets [1]など
4
*bgColor*非推奨-ドキュメントの背景色を指定する文字列。
例：document.bgColor
5
クッキー
このドキュメントに関連付けられたCookieを照会および設定できる特別な動作を持つ文字列値のプロパティ。
例：document.cookie
6
ドメイン
ドキュメントのインターネットドメインを指定する文字列。 セキュリティ目的で使用されます。
例：document.domain
7
*embeds []*<embed>タグを使用してドキュメントに埋め込まれたデータを表すオブジェクトの配列。 プラグインの同義語[]。 一部のプラグインとActiveXコントロールは、JavaScriptコードで制御できます。
例：document.embeds [0]、document.embeds [1]など
8
*fgColor*ドキュメントのデフォルトのテキスト色を指定する文字列。
例：document.fgColor
9
- フォーム[] *
文書に表示される各HTMLフォームに1つずつあるフォームオブジェクトの配列。
例：document.forms [0]、document.forms [1]など
10
- 画像[] *
フォームオブジェクトの配列。HTML<img>タグでドキュメントに表示される各HTMLフォームに1つ。
例：document.forms [0]、document.forms [1]など
11
最終更新日
ドキュメントへの最新の変更の日付を指定する読み取り専用の文字列。
例：document.lastModified
12
*linkColor*非推奨-未訪問リンクの色を指定する文字列。
例：document.linkColor
13
- リンク[] *
これはドキュメントリンク配列です。
例：document.links [0]、document.links [1]など
14
ロケーション
ドキュメントのURL。 URLプロパティを支持して廃止されました。
例：document.location
15
- プラグイン[] *
埋め込みの同義語[]
例：document.plugins [0]、document.plugins [1]など
16
参照者
現在のドキュメントのリンク元のドキュメントがある場合は、そのURLを含む読み取り専用の文字列。
例：document.referrer
17
タイトル
<title>タグのテキストコンテンツ。
例：document.title
18
*URL*ドキュメントのURLを指定する読み取り専用の文字列。
例：document.URL
19
*vlinkColor*非推奨-訪問したリンクの色を指定する文字列。
例：document.vlinkColor
レガシーDOMのドキュメントメソッド
以下は、レガシーDOMでサポートされるメソッドのリストです。
| Sr.No | Property & Description |
|---|---|
| 1 |
clear( ) 非推奨-ドキュメントの内容を消去し、何も返しません。 例：document.clear（） |
| 2 |
close( ) open（）メソッドで開かれたドキュメントストリームを閉じ、何も返しません。 |
| 3 |
open( ) 既存のドキュメントコンテンツを削除し、新しいドキュメントコンテンツが書き込まれる可能性のあるストリームを開きます。 何も返しません。 例：document.open（） |
| 4 |
write( value, …) 指定した文字列を現在解析中のドキュメントに挿入するか、open（）で開いたドキュメントに追加します。 何も返しません。 例：document.write（value、…） |
| 5 |
writeln( value, …) write（）と同じですが、出力に改行文字を追加します。 何も返しません。 例：document.writeln（value、…） |
HTML DOMを使用して、HTMLドキュメント内のHTML要素を見つけることができます。 たとえば、Webドキュメントにフォーム要素が含まれている場合、JavaScriptを使用して、それをdocument.forms [0]と呼ぶことができます。 Webドキュメントに2つのフォーム要素が含まれる場合、最初のフォームはdocument.forms [0]と呼ばれ、2番目のフォームはdocument.forms [1]と呼ばれます。
上記の階層とプロパティを使用して、document.forms [0] .elements [0]などを使用して最初のフォーム要素にアクセスできます。
例
以下は、レガシーDOMメソッドを使用してドキュメントプロパティにアクセスする例です。
<html>
<head>
<title> Document Title </title>
<script type = "text/javascript">
<!--
function myFunc() {
var ret = document.title;
alert("Document Title : " + ret );
var ret = document.URL;
alert("Document URL : " + ret );
var ret = document.forms[0];
alert("Document First Form : " + ret );
var ret = document.forms[0].elements[1];
alert("Second element : " + ret );
}//
-->
</script>
</head>
<body>
<h1 id = "title">This is main title</h1>
<p>Click the following to see the result:</p>
<form name = "FirstForm">
<input type = "button" value = "Click Me" onclick = "myFunc();"/>
<input type = "button" value = "Cancel">
</form>
<form name = "SecondForm">
<input type = "button" value = "Don't ClickMe"/>
</form>
</body>
</html>出力
上記のコードが正常に実行されると、次の出力が表示されます。
注-この例は、フォームと要素のオブジェクトを返します。 このチュートリアルでは説明していないオブジェクトプロパティを使用して、それらの値にアクセスする必要があります。
