HTML5 실제 전투 및 HTMLDocument 변경 분석

이전에 HTML5에 새로 추가된 몇 가지 기능을 소개해 드렸으니 모두가 어느 정도 이해하고 계실 거라 믿습니다. 오늘은 HTML5에 새롭게 추가된 HTMLDocument 내용을 소개해드리겠습니다. 그렇다면 HTML5에 HTMLDocument에 새로 추가된 내용은 무엇일까요? HTML5에 새로 추가된 HTMLDocument에는 ReadyState 속성, 호환성 모드 판단, head 속성이 포함됩니다. 새롭게 추가된 소소한 것들을 하나씩 소개하겠습니다.

1.readyState 속성

이미 IE4 시대부터 문서 객체에는 ReadyState 속성이 도입되었지만 지금은 표준에 포함되지 않았습니다. HTML5 시간이 지남에 따라 표준에 통합되었습니다. ReadyState 속성에는 두 가지 가능한 값이 있습니다.

(1) 로드 중, 문서가 로드되는 중

(2) 완료, 문서가 로드됨

문서 사용 방법 .readyState는 어떻습니까? document.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 속성

참조된 document.body의 body 요소에 대한 보충 문서에서 HTML5는 새로운 document.head 속성을 추가하므로 head 태그를 참조할 수 있습니다. 사용 방법은 다음과 같습니다.

JavaScript 코드

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

위와 같이 호환성을 위해 사용할 수 있으면 document.head를 사용하고, 그렇지 않으면 getElementsByTagName() 메서드를 사용합니다. document.head 속성이 지원되는 브라우저는 Chrome 및 Safari 5입니다.

HTML5의 실제 전투와 HTMLDocument 변경 사항(readyState 속성, 호환성 모드 및 헤드 속성)에 대한 분석이 여기에 소개됩니다. 바쁜 일정 속에서도 새로운 지식을 배우고 학습하세요. 실천에 있어서 소소한 소식을 여러분과 공유하고 싶습니다. 정말 마법 같은 날이었습니다. HTML5 실습 및 분석과 관련된 업데이트입니다.

[관련 추천]

1. 무료 h5 온라인 동영상 튜토리얼

HTML5 정식 버전 매뉴얼

3. php.cn 원본 html5 동영상 튜토리얼

4. HTML5 게임 프레임워크 cnGameJS 개발 기록 - 리소스 로딩 모듈 코드 상세 설명