오늘의 내용은 문서 개체를 조작하는 방법에 관한 것입니다.
1. 문서 메타 데이터를 작동합니다 먼저 관련 속성을 살펴 보겠습니다.문자 세트 : 현재 문서의 인코딩 방법을 가져 오면이 속성은 읽기 전용입니다.
charset : 현재 문서의 인코딩 방법을 얻거나 설정합니다.
CompatMode : 현재 문서의 호환 모드를 가져옵니다.
쿠키 : 현재 문서의 쿠키 개체를 얻거나 설정하십시오.
DefaultCharset : 브라우저의 기본 인코딩 메소드를 가져옵니다.
DefaultView : 현재 문서의 창 객체를 가져옵니다.
DIR : 현재 문서의 텍스트 정렬을 얻거나 설정합니다.
도메인 : 현재 문서의 Domian 값을 얻거나 설정합니다.
구현 : 지원되는 DOM 기능에 대한 정보를 제공합니다.
LastModified : 문서의 마지막 수정 시간을 가져옵니다 (마지막 수정 시간이없는 경우 현재 시간을 반환합니다).
위치 : 현재 문서의 URL 정보 제공;
Readystate : 읽기 전용 속성 인 현재 문서의 상태를 반환합니다.
참조 자 : 현재 문서에 연결된 문서 URL 정보를 반환합니다.
제목 : 현재 문서의 제목을 얻거나 설정하십시오.
다음 예를 살펴 보겠습니다.
<! doctype html>
<html>
<헤드>
<title> 예 </title>
</head>
<body>
<script type = "text/javaScript">
document.writeln ( '<fre>');
document.writeln ( '문자 세트 :' + 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 ( '참조자 :' + document.referrer);
document.writeln ( '제목 :' + document.title);
document.write ( '</pre>');
</스크립트>
</body>
</html>
결과 (다른 브라우저로 표시되는 결과는 다를 수 있습니다) :
2. 호환 모드를 이해하는 방법CompatMode 속성은 브라우저가 현재 문서를 처리하는 방법을 알려줍니다. 브라우저가 HTML 사양을 준수하지 않더라도이 페이지를 표시하려고 시도하므로 비표준 HTML이 너무 많습니다. 일부 컨텐츠는 이전 브라우저 전쟁에 존재하는 고유 한 기능에 의존하며 이러한 속성 돌은 표준을 준수하지 않습니다. CompatMode는 다음과 같이 하나 또는 두 값을 반환합니다.
CSS1Compat : 문서는 유효한 HTML 사양을 준수합니다 (반드시 HTML5/"> HTML5는 아니며, 확인 된 HTML4 페이지 도이 값을 반환합니다);
BackCompat : 문서에는 사양을 준수하지 않는 기능이 포함되어있어 호환 모드를 트리거합니다.
3. 위치 개체를 사용하십시오location location 위치 객체를 반환하여 세분화 된 문서의 주소 정보를 제공하고 다른 문서로 이동할 수 있습니다.
프로토콜 : 문서 URL의 프로토콜을 얻거나 설정합니다.
호스트 : 문서 URL의 호스트 정보를 얻거나 설정합니다.
HREF : 문서의 주소 정보를 얻거나 설정합니다.
호스트 이름 : 문서의 호스트 이름을 얻거나 설정합니다.
검색 : 문서 URL 쿼리 부분의 정보를 얻거나 설정하십시오.
해시 : 문서 URL 해시 부분에 대한 정보를 얻거나 설정하십시오.
할당 (<url>) : 지정된 URL로 이동합니다.
교체 (<url>) : 현재 문서를 제거하고 지정된 URL로 이동하십시오.
Reload () : 현재 문서를 다시로드;
RESOLBEURL (<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">
<헤드>
<제목> </title>
</head>
<body>
<script type = "text/javaScript">
document.writeln ( '<fre>');
document.writeln ( '프로토콜 :' + 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>');
</스크립트>
</body>
</html>
결과:
4. 쿠키를 읽고 쓰십시오 쿠키 속성을 통해 문서에서 쿠키를 추가, 수정 및 읽을 수 있습니다. 다음 예에서 볼 수 있듯이 :<! doctype html>
<html>
<헤드>
<title> 예 </title>
<meta name = "author"content = "Adam Freeman" />
<meta name = "description"content = "간단한 예제" />
</head>
<body>
<p id = "cookiedata">
</p>
<버튼 id = "쓰기">
쿠키를 추가하십시오 </button>
<버튼 id = "업데이트">
쿠키 업데이트 </button>
<버튼 id = "Clear">
쿠키를 클리어 </button>
<script type = "text/javaScript">
var cookiecount = 0;
document.getElementById ( 'Update'). onclick = updateCookie;
document.getElementById ( '쓰기'). 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 ();
}
function clearcookie () {
var exp = 새로운 날짜 ();
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 ();
}
</스크립트>
</body>
</html>
결과:
5. ReadyState를 이해하십시오ReadyState는 페이지로드 및 구문 분석 프로세스 중 페이지의 현재 상태를 이해하는 데 도움이됩니다. 기억해야 할 한 가지는 스크립트의 실행을 지연시키기 위해 지연 속성을 사용하지 않는 한 스크립트 요소를 만나면 브라우저가 즉시 실행된다는 것입니다. ReadyState는 다른 상태를 나타내는 세 가지 값을 가지고 있습니다.
로드 : 브라우저가 문서를로드하고 실행 중입니다.
대화식 : Docuent가 구문 분석을 완료했지만 브라우저는 다른 외부 리소스 (미디어, 사진 등)를로드하고 있습니다.
완료 : 페이지 구문 분석이 완료되고 외부 리소스가 집에서 완료됩니다.
전체 브라우저로드 및 구문 분석 프로세스 중에 ReadyState의 값은로드, 상호 작용 및 완료에서 하나씩 변경됩니다. ReadyStateChange 이벤트 (ReadyState 상태가 변경 될 때 트리거)와 함께 사용하면 ReadyState가 매우 가치가 있습니다.
<! doctype html>
<html>
<헤드>
<title> 예 </title>
<meta name = "author"content = "Adam Freeman" />
<meta name = "description"content = "간단한 예제" />
<cript>
document.onreadyStateChange = function () {
if (document.readystate == "Interactive") {
document.getElementById ( "pressme"). onclick = function () {
document.getElementById ( "results"). innerHtml = "버튼 누름";
}
}
}
</스크립트>
</head>
<body>
<버튼 id = "pressme">
me </button>을 누릅니다
<pre id = "results"> </pre>
</body>
</html>
위의 코드는 ReadyStateChange 이벤트를 사용하여 실행 지연의 효과를 달성합니다. 페이지의 전체 페이지가 구문 분석되고 연락 할 때만 ReadyState 값은 대화식이됩니다. 현재 클릭 이벤트가 PressME 버튼에 바인딩됩니다. 이 작업은 필요한 모든 HTML 요소가 존재하고 오류가 발생하지 않도록합니다.
6. DOM 속성 구현에 대한 정보를 얻습니다문서화 속성을 사용하면 브라우저의 DOM 속성 구현을 이해하는 데 도움이됩니다. 이 속성은 횡포 메소드를 포함하는 Domimementation 객체를 반환하며,이를 통해 브라우저의 특정 속성 구현을 이해할 수 있습니다.
<! doctype html>
<html>
<헤드>
<title> 예 </title>
<meta name = "author"content = "Adam Freeman" />
<meta name = "description"content = "간단한 예제" />
</head>
<body>
<cript>
var feature = [ "core", "html", "css", "selectors-api"];
var 레벨 = [ "1.0", "2.0", "3.0"];
document.writeln ( "<fre>");
for (var i = 0; i <feations.length; i ++) {
document.writeln ( "기능 확인 :" + 기능 [i]);
for (var j = 0; j <levels.length; j ++) {
document.write (피처 [i] + "level" + level [j] + ":");
document.writeln (document.implementation.hasfeature (특징 [i], 레벨 [j]));
}
}
document.write ( "</pre>")
</스크립트>
</body>
</html>
효과: