今日のコンテンツは、ドキュメントオブジェクトを操作する方法に関するものです。
1.ドキュメントメタデータを操作しますまず、関連する属性を見てみましょう。キャラクターセット：現在のドキュメントのエンコード方法を取得すると、このプロパティは読み取り専用です。
Charset：現在のドキュメントのエンコード方法を取得または設定します。
compatmode：現在のドキュメントの互換モードを取得します。
Cookie：現在のドキュメントのCookieオブジェクトを取得または設定します。
DefaultCharset：ブラウザのデフォルトのエンコードメソッドを取得します。
DefaultView：現在のドキュメントのウィンドウオブジェクトを取得します。
dir：現在のドキュメントのテキストアラインメントを取得または設定します。
ドメイン：現在のドキュメントのドミアン価値を取得または設定します。
実装：サポートされているDOM機能に関する情報を提供します。
LastModified：ドキュメントの最後の変更時間を取得します（最後の変更時間がない場合、現在の時間を返します）。
場所：現在のドキュメントのURL情報を提供します。
ReadyState：現在のドキュメントのステータスを返します。これは読み取り専用プロパティです。
リファラー：現在のドキュメントに接続されているドキュメントURL情報を返します。
タイトル：現在のドキュメントのタイトルを取得または設定します。
次の例を見てみましょう。
<！doctype html>
<html>
<head>
<title>例</title>
</head>
<body>
<script type = "text/javascript">
document.writeln（ '<pre>'）;
document.writeln（ 'charperationet：' + document.characterset）;
document.writeln（ 'charset：' + document.charset）;
document.writeln（ 'compatmode：' + document.comPatMode）;
document.writeln（ 'defaultcharset：' + document.defaultCharset）;
document.writeln（ 'dir：' + document.dir）;
document.writeln（ 'domain：' + document.domain）;
document.writeln（ 'lastModified：' + document.lastModified）;
document.writeln（ 'referrer：' + document.referrer）;
document.writeln（ 'title：' + document.title）;
document.write（ '</pre>'）;
</script>
</body>
</html>
結果（さまざまなブラウザーによって表示される結果は異なる場合があります）：
2。互換性モードを理解する方法compatmodeプロパティは、ブラウザが現在のドキュメントをどのように処理するかを示します。 HTML仕様に準拠していなくても、ブラウザがこれらのページを表示しようとするため、標準以外のHTMLが多すぎます。一部のコンテンツは、以前のブラウザ戦争に存在していたユニークな機能に依存しており、これらの属性ストーンは標準に準拠していません。 compatmodeは、次のように1つまたは2つの値を返します。
CSS1Compat：ドキュメントは有効なHTML仕様に準拠しています（必ずしもHTML5/"> HTML5ではありません。検証済みのHTML4ページもこの値を返します）。
BackCompat：ドキュメントには、仕様に準拠していない機能が含まれており、互換性モードをトリガーしています。
3.ロケーションオブジェクトを使用しますdocument.locationは、場所オブジェクトを返し、細粒のドキュメントのアドレス情報を提供し、他のドキュメントに移動できるようにします。
プロトコル：ドキュメントURLのプロトコルを取得または設定します。
ホスト：ドキュメントURLのホスト情報を取得または設定します。
HREF：ドキュメントのアドレス情報を取得または設定します。
ホスト名：ドキュメントのホスト名を取得または設定します。
検索：ドキュメントURLクエリパーツの情報を取得または設定します。
ハッシュ：ドキュメントURLハッシュパーツに関する情報を取得または設定します。
assign（<url>）：指定されたURLに移動します。
交換（<url>）：現在のドキュメントを削除し、指定されたURLに移動します。
reload（）：現在のドキュメントをリロードします。
Resolveurl（<url>）：相対パスを絶対パスに変更します。
次の例を見てみましょう。<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
</head>
<body>
<script type = "text/javascript">
document.writeln（ '<pre>'）;
document.writeln（ 'protocol：' + document.location.protocol）;
document.writeln（ 'host：' + document.location.host）;
document.writeln（ 'hostname：' + document.location.hostname）;
document.writeln（ 'port：' + document.location.port）;
document.writeln（ 'pathname：' + document.location.pathname）;
document.writeln（ '検索：' + document.location.search）;
document.writeln（ 'hash：' + document.location.hash）;
document.writeln（ '</pre>'）;
</script>
</body>
</html>
結果：
4。クッキーの読み取りと書き込みCookie属性を介して、ドキュメントにCookieを追加、変更、読み取ることができます。次の例に示すように：<！doctype html>
<html>
<head>
<title>例</title>
<Meta name = "Author" content = "Adam Freeman" />
<Meta name = "description" content = "a simple example" />
</head>
<body>
<p id = "cookiedata">
</p>
<ボタンid = "write">
Cookieを追加</button>
<ボタンid = "update">
Cookieを更新</button>
<ボタンID = "CLEAR">
Clear Cookie </button>
<script type = "text/javascript">
var cookiecount = 0;
document.getElementById（ 'update'）。onclick = updateCookie;
document.getElementById（ 'write'）。onclick = createcookie;
document.getElementById（ 'clear'）。onclick = clearcookie;
readCookies（）;
関数readCookies（）{
document.getElementById（ 'cookiedata'）。innerhtml =！document.cookie？ ''：document.cookie;
}
関数updateCookie（）{
document.cookie = 'cookie_' + cookiecount + '= update_' + cookiecount;
readCookies（）;
}
関数CreateCookie（）{
cookiecount ++;
document.cookie = 'cookie_' + cookiecount + '= value_' + cookiecount;
readCookies（）;
}
関数ClearCookie（）{
var exp = new date（）;
exp.settime（exp.gettime（）-1）;
var arrstr = document.cookie.split（ ";"）;
for（var i = 0; i <arrstr.length; i ++）{
var temp = arrstr [i] .split（ "="）;
if（temp [0]）{
document.cookie = temp [0] + "=; expires =" + exp.togmtstring（）;
};
}
cookiecount = 0;
readCookies（）;
}
</script>
</body>
</html>
結果：
5。ReadyStateを理解してくださいdocument.readyStateは、ページの読み込みと解析プロセス中にページの現在の状態を理解するのに役立ちます。覚えておくべきことの1つは、defer属性を使用してスクリプトの実行を遅らせない限り、スクリプト要素に遭遇するときにブラウザがすぐに実行されることです。 ReadyStateには、異なる状態を表す3つの値があります。
読み込み：ブラウザはドキュメントを読み込んで実行しています。
インタラクティブ：Docuentは解析を完了しましたが、ブラウザは他の外部リソース（メディア、写真など）をロードしています。
完了：ページの解析が完了し、外部リソースが自宅で完了します。
ブラウザの読み込みと解析プロセス全体で、ReadyStateの値は、読み込み、対話、および完了から1つずつ変更されます。 ReadyStateChangeイベント（ReadyState状態が変更されたときにトリガー）と組み合わせて使用すると、ReadyStateは非常に価値があります。
<！doctype html>
<html>
<head>
<title>例</title>
<Meta name = "Author" content = "Adam Freeman" />
<Meta name = "description" content = "a simple example" />
<スクリプト>
document.OnreadyStateChange = function（）{
if（document.readystate == "Interactive"）{
document.getElementById（ "pressme"）。onclick = function（）{
document.getElementById（ "results"）。innerhtml = "ボタンを押します";
}
}
}
</script>
</head>
<body>
<ボタンID = "pressme">
私を押す</button>
<preid = "results"> </pre>
</body>
</html>
上記のコードでは、ReadyStateChangeイベントを使用して、遅延実行の効果を実現します。ページ上のページ全体が解析されて連絡された場合にのみ、ReadyState値がインタラクティブになります。現時点では、クリックイベントはプレスメボタンにバインドされます。この操作により、必要なすべてのHTML要素が存在することが保証され、エラーが発生するのを防ぎます。
6. DOM属性実装に関する情報を取得しますdocument.Implementationプロパティは、ブラウザのDOMプロパティの実装を理解するのに役立ちます。このプロパティは、hasfeatureメソッドを含むdomimplementationオブジェクトを返します。これには、特定のプロパティのブラウザの実装を理解できます。
<！doctype html>
<html>
<head>
<title>例</title>
<Meta name = "Author" content = "Adam Freeman" />
<Meta name = "description" content = "a simple example" />
</head>
<body>
<スクリプト>
var feature = ["core"、 "html"、 "css"、 "selectors-api"];
varレベル= ["1.0"、 "2.0"、 "3.0"];
document.writeln（ "<pre>"）;
for（var i = 0; i <feature.length; i ++）{
document.writeln（ "機能のチェック：" + feature [i]）;
for（var j = 0; j <levels.length; j ++）{
document.write（feature [i] + "level" + level [j] + "："）;
document.writeln（document.implementation.hasfeature（feature [i]、revel [j]））;
}
}
document.write（ "</pre>"）
</script>
</body>
</html>
効果：