Combat réel HTML5 et analyse des modifications HTMLDocument

Je vous ai déjà présenté certains des nouveaux ajouts à HTML5, et je pense que vous les comprenez tous dans une certaine mesure. Aujourd'hui, je vais vous présenter le contenu nouvellement ajouté en HTML5 concernant HTMLDocument. Alors, quels sont les contenus nouvellement ajoutés sur HTMLDocument en HTML5 ? Les contenus nouvellement ajoutés sur HTMLDocument en HTML5 incluent l'attribut readyState, le jugement du mode de compatibilité et l'attribut head. Laissez-moi vous présenter ces petites choses nouvellement ajoutées une par une.

1. attribut readyState

Dès l'ère IE4, l'objet document a introduit l'attribut readyState, mais il n'a jamais été inclus dans la norme. HTML5 Au fil du temps, il a été intégré à la norme. L'attribut readyState a deux valeurs possibles :

(1) chargement, le document est en cours de chargement

(2) complet, le document a été chargé

Comment utiliser le document de manière appropriée Qu'en est-il de .readyState ? La manière la plus appropriée d'utiliser document.readyState est de l'utiliser pour implémenter un indicateur indiquant que le document a été chargé. Jusqu'à ce que cette propriété soit largement prise en charge, l'implémentation d'un tel indicateur nécessitera toujours que le gestionnaire d'événements onload définisse une étiquette indiquant que le document a été chargé. L'exemple suivant est le suivant

Code HTML

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

Code 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++ )
	}
};

Effet d'aperçu

2. Jugement du mode de compatibilité

Après IE6, il a commencé à distinguer le mode de rendu des pages, divisé en standard et mixte, détection Le mode de compatibilité de la page devient une fonction nécessaire du navigateur. IE ajoute un attribut appelé compatMode au document à cet effet. Cet attribut sert à indiquer au développeur quel mode de rendu le navigateur utilise. Comme le montre le petit exemple ci-dessous, en mode standard, la valeur de document.compatMode est égale à "CSS1Compat", tandis qu'en mode promiscuité, la valeur de document.compatMode est égale à "BackCompat".

Code JavaScript

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

3. Attribut Head

En référence à l'élément corps du document. body De plus, HTML5 a ajouté l'attribut document.head, afin que la balise head puisse être référencée. La méthode d'utilisation est la suivante

Code JavaScript

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

Tout comme ci-dessus pour des raisons de compatibilité, s'il peut être utilisé, utilisez document.head, sinon utilisez toujours la méthode getElementsByTagName(). Les navigateurs pris en charge par l'attribut document.head sont Chrome et Safari 5.

Le combat réel HTML5 et l'analyse des modifications HTMLDocument (attribut readyState, mode de compatibilité et attribut head) sont présentés ici. Apprenez de nouvelles connaissances au milieu de votre emploi du temps chargé et mettez votre apprentissage à profit. en pratique. J'aimerais partager quelques petites choses avec vous, c'était une journée tellement magique. Mises à jour liées à la pratique et à l'analyse HTML5.

[Recommandations associées]

1. Tutoriel vidéo en ligne h5 gratuit

2. Manuel de la version complète HTML5

.

3.Tutoriel vidéo html5 original php.cn

4 Enregistrement de développement cnGameJS du cadre de jeu HTML5 - Explication détaillée du code du module de chargement des ressources

.