집 > 기사 > 웹 프론트엔드 > html5 가이드-2.문서 메타데이터 조작 방법_html5 튜토리얼 팁

html5 가이드-2.문서 메타데이터 조작 방법_html5 튜토리얼 팁

WBOY원래의: 2016-05-16 15:50:151376검색

오늘의 내용은 문서 객체를 조작하는 방법에 관한 내용입니다.
1. 문서 메타데이터 조작
먼저 관련 속성을 살펴보겠습니다.
characterSet: 현재 문서의 인코딩 방법을 가져옵니다.
charset: 현재 문서의 인코딩 방법을 가져오거나 설정합니다.
compatMode: 현재 문서의 호환성 모드를 가져옵니다.
cookie: 현재 문서의 쿠키 개체를 가져오거나 설정합니다.
defaultCharset: 브라우저의 기본 인코딩 방법을 가져옵니다.
defaultView: 현재 문서의 창 개체를 가져옵니다.
dir: 현재 문서의 텍스트 정렬을 가져오거나 설정합니다.
domain: 도메인 값을 가져오거나 설정합니다. 현재 문서;
구현: 지원되는 DOM 기능 정보 제공
lastModified: 문서의 마지막 수정 시간 가져오기(마지막 수정 시간이 없으면 현재 시간 반환)
위치 제공 현재 문서의 URL 정보;
readyState: 현재 문서의 상태를 반환합니다. 이 속성은 읽기 전용 속성입니다.
referrer: 현재 문서에 연결된 문서 URL 정보를 반환합니다.
제목: 현재 문서의 제목을 가져오거나 설정합니다.
다음 예를 보세요.

코드를 복사하세요.

코드는 다음과 같습니다.

예 ;
🎜>< /body>

결과(브라우저마다 다른 결과가 표시될 수 있음):

2. 호환 모드를 이해하는 방법

compatMode 속성은 브라우저가 현재 문서를 처리하는 방법을 알려줍니다. 비표준 HTML이 너무 많아서 브라우저는 HTML 사양을 따르지 않더라도 이러한 페이지를 표시하려고 시도합니다. 일부 콘텐츠는 브라우저 전쟁 초기에 존재했던 고유한 기능에 의존하며 이러한 속성은 사양을 준수하지 않습니다. compatMode는 다음과 같이 하나 또는 두 개의 값을 반환합니다.

CSS1Compat: 문서가 유효한 html 사양을 준수합니다(반드시 html5일 필요는 없으며 확인된 html4 페이지도 이 값을 반환합니다).
BackCompat: 문서에 비호환이 포함되어 있습니다. 기능, 호환성 모드를 트리거합니다. 3. 위치 개체 사용

document.location은 문서의 세부적인 주소 정보를 제공하고 다른 문서로 이동할 수 있도록 하는 위치 개체를 반환합니다.
protocol: 문서 URL의 프로토콜을 가져오거나 설정합니다.
host: 문서 URL의 호스트 정보를 가져오거나 설정합니다. href: 문서의 주소 정보를 가져오거나 설정합니다. hostname; : 문서의 주소 정보를 가져오거나 설정합니다.
검색: 문서 URL의 쿼리 부분에서 정보를 가져오거나 설정합니다.
해시: 문서 URL의 해시 부분에서 정보를 가져오거나 설정합니다. 🎜>할당(): 지정된 URL로 이동합니다.
replace(): 현재 문서를 제거하고 지정된 URL로 이동합니다.
reload(): 현재 문서를 다시 로드합니다.
resolveURL(): 상대 경로를 절대 경로로 변경합니다.

다음 예를 보세요
:

코드 복사

코드는 다음과 같습니다. :

<머리>
<제목>

<본문>

结果：

4.读写쿠키
일반적인 쿠키属性, 可以对문서 쿠키进行新增,修改화读取操작품。如下例：

复代码码

代码如下:

<머리>
<제목>예

<본문>

结果：

loading：浏览器正加载와执行document;已经完成解析，但是浏览器浏览器整个加载및解析的过程中，읽기 yState의 로딩, 대화형 및 완료됨 system代码
代码如下:

예 ="Adam Freeman" />

<script> document.onreadystatechange = function () { <br> if (document.readyState == "interactive") { <br>document.getElementById("pressme").onclick = function () { <br>document.getElementById("results").innerHTML = "버튼이 눌림"; 🎜>} <br>} <br>} <br></head> <br><body> <br><button id="pressme"> 위의 <br></pre><br></html><br><br><br>을 누르세요. 코드는 지연된 실행 효과를 얻기 위해 Readystatechange 이벤트를 사용합니다. 이 때, click 이벤트는 pressme 버튼에 바인딩됩니다. 이 작업을 통해 필요한 html 요소가 있는지 확인하고 오류 발생을 방지할 수 있습니다. <br><br>6. dom 속성 구현에 대한 정보 가져오기 <br> <br> document.implementation 속성은 브라우저의 dom 속성 구현을 이해하는 데 도움이 됩니다. 이 속성은 hasFeature 메소드를 포함하는 DOMImplementation 객체를 반환합니다. 이 메소드를 사용하면 브라우저의 특정 속성 구현을 이해할 수 있습니다. <br> </div> <br><br><strong></strong>코드 복사<br><br><br>코드는 다음과 같습니다.<div class="msgheader"> <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode147'));"><!DOCTYPE HTML> <u> <html> </u><head> </span><제목>예</title><meta name="author" content="Adam Freeman" /> ;meta name ="description" content="간단한 예" /> </div></head> </div><script> "HTML" , "CSS", "선택기-API"]; <div class="msgborder" id="phpcode147">var level = ["1.0", "2.0", "3.0"] <br>document.writeln("<pre class="brush:php;toolbar:false">"); <br> for (var i = 0; i < feature.length; i ) { <br>document.writeln("기능 확인 중: " 기능[i]) <br>for (var j = 0; j < 레벨 .length; j ) { <br>document.write(features[i] " 레벨 " 레벨[j] ": "); level[j ])) <br>} <br>} <br>document.write("</pre>") <br></script>
;/html> ;

효과:

성명：

이전 기사：html5 캔버스 그리기 튜토리얼(5) - canvas_html5 튜토리얼 기술에서 곡선을 그리는 원호 방법다음 기사：html5 캔버스 그리기 튜토리얼(5) - canvas_html5 튜토리얼 기술에서 곡선을 그리는 원호 방법

html5 가이드-2.문서 메타데이터 조작 방법_html5 튜토리얼 팁

관련 기사