HTML5の実戦とHTMLドキュメントの変更点の分析

以前、HTML5に新しく追加された機能のいくつかを紹介しましたが、皆さんもある程度は理解していると思います。今日はHTML5のHTMLドキュメントについて新しく追加されたコンテンツを紹介します。では、HTML5 で HTMLDocument について新たに追加された内容とは何でしょうか? HTML5 で HTMLDocument について新たに追加された内容には、readyState 属性、互換モード判定、head 属性があります。新しく追加された小物を一つずつご紹介していきます。

1.readyState属性

IE4の時代からドキュメントオブジェクトにreadyState属性が導入されていましたが、標準には含まれていませんでしたが、HTML5の時代になって、仕様に組み込まれました。 。 readyState 属性には 2 つの値があります:

(1) ロード中、ドキュメントがロード中です

(2) 完了、ドキュメントがロードされました

document.readyState を適切に使用するにはどうすればよいでしょうか? .readyState ドキュメントがロードされたことを示すインジケーターを実装するために使用されます。このプロパティが広くサポートされるまで、このようなインジケーターを実装するには、ドキュメントがロードされたことを示すラベルを onload イベント ハンドラーで設定する必要があります。以下の例は以下の通りです

HTMLコード

<p>梦龙小站</p>
<p class="complete"></p>

JavaScriptコード

<script type="text/javascript">
window.onload = function(){
	var a = 0;
	var b = 0;
	if(document.readyState == "complete"){
		$(".complete").html( "加载好了" )
	}

	if(document.readyState == "loading"){
		$(".load").html( $(".load").html() + "<br/>" + a++ )
	}
};

プレビュー効果

2. 互換モード判定

IE6以降は区別されるようになりましたレンダリング ページ間。モードは標準と混合に分かれており、ページの互換モードを検出することはブラウザの必須機能となっています。 IE は、この目的のために compatMode という属性をドキュメントに追加します。この属性は、ブラウザーが使用するレンダリング モードを開発者に知らせます。以下の小さな例に示すように、標準モードでは document.compatMode の値は「CSS1Compat」に等しくなりますが、無差別モードでは document.compatMode の値は「BackCompat」に等しくなります。

JavaScript コード

if(document.compatMode == "CSS1Compat"){
	alert("标准模式")
}else{
	alert("混杂兼容模式")
}

3. Head 属性

ドキュメントの body 要素を参照する document.body の補足として、HTML5 では head タグを参照できるように新しい document.head 属性を追加します。使用方法は以下の通りです

JavaScriptコード

var head = document.head || document.getElementsByTagName("head")[0];

上記と同様に、互換性を持たせる場合はdocument.headを使用し、そうでない場合は引き続きgetElementsByTagName()メソッドを使用します。 document.head 属性でサポートされているブラウザは Chrome と Safari 5 です。

HTML5 の実戦と HTML ドキュメントの変更 (readyState 属性、互換性モード、head 属性) の分析がここで紹介されています。忙しいスケジュールの中でも、新しい知識を学ぶことができます。ドンは、とても素晴らしい一日だったことを皆さんと共有したいと思います。 HTML5 の実践と分析に関する最新情報。

【関連おすすめ】

1. 無料のh5オンラインビデオチュートリアル

3. php.cnオリジナルのhtml5ビデオチュートリアル

4. HTML5ゲームフレームワークnGameJS開発実録 - リソース読み込みモジュールコードの詳細説明