เนื้อหาของวันนี้เกี่ยวกับวิธีจัดการกับวัตถุเอกสาร
1. ใช้งานข้อมูลเมตาดาต้าเอกสาร ก่อนอื่นมาดูคุณลักษณะที่เกี่ยวข้อง:ตัวละคร: รับวิธีการเข้ารหัสของเอกสารปัจจุบันและคุณสมบัตินี้เป็นแบบอ่านอย่างเดียว
Charset: รับหรือตั้งค่าวิธีการเข้ารหัสของเอกสารปัจจุบัน;
COMPATMODE: รับโหมดความเข้ากันได้ของเอกสารปัจจุบัน
คุกกี้: รับหรือตั้งค่าวัตถุคุกกี้ของเอกสารปัจจุบัน;
DefaultCharset: รับวิธีการเข้ารหัสเริ่มต้นของเบราว์เซอร์;
defaultView: รับวัตถุหน้าต่างของเอกสารปัจจุบัน;
DIR: รับหรือตั้งค่าการจัดตำแหน่งข้อความของเอกสารปัจจุบัน;
โดเมน: รับหรือตั้งค่า Domian ของเอกสารปัจจุบัน;
การใช้งาน: ให้ข้อมูลเกี่ยวกับคุณสมบัติ DOM ที่รองรับ;
LastModified: รับเวลาการแก้ไขล่าสุดของเอกสาร (หากไม่มีเวลาแก้ไขล่าสุดจะส่งคืนเวลาปัจจุบัน);
สถานที่: ให้ข้อมูล URL ของเอกสารปัจจุบัน;
ReadyState: ส่งคืนสถานะของเอกสารปัจจุบันซึ่งเป็นคุณสมบัติแบบอ่านอย่างเดียว
ผู้อ้างอิง: ส่งคืนข้อมูล URL เอกสารที่เชื่อมต่อกับเอกสารปัจจุบัน;
ชื่อเรื่อง: รับหรือตั้งชื่อชื่อของเอกสารปัจจุบัน
มาดูตัวอย่างต่อไปนี้:
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
</head>
<body>
<script type = "text/javascript">
document.writeln ('<pre>');
document.writeLn ('ตัวละคร:' + document.caracterset);
document.writeLn ('charset:' + document.charset);
document.writeLn ('compatMode:' + document.CompatMode);
document.writeLn ('defaultCharset:' + document.defaultCharset);
document.writeln ('dir:' + document.dir);
document.writeLn ('โดเมน:' + document.domain);
Document.writeLn ('LastModified:' + document.lastModified);
document.writeln ('referrer:' + document.referrer);
document.writeLn ('ชื่อ:' + document.title);
document.write ('</pre>');
</script>
</body>
</html>
ผลลัพธ์ (ผลลัพธ์ที่แสดงโดยเบราว์เซอร์ที่แตกต่างกันอาจแตกต่างกัน):
2. วิธีทำความเข้าใจโหมดความเข้ากันได้คุณสมบัติ CompatMode จะบอกคุณว่าเบราว์เซอร์จัดการเอกสารปัจจุบันได้อย่างไร มี HTML ที่ไม่ได้มาตรฐานมากเกินไปในขณะนี้ว่าเบราว์เซอร์จะพยายามแสดงหน้าเหล่านี้แม้ว่าพวกเขาจะไม่ปฏิบัติตามข้อกำหนด HTML เนื้อหาบางอย่างขึ้นอยู่กับคุณสมบัติที่ไม่ซ้ำกันที่มีอยู่ในสงครามเบราว์เซอร์ก่อนหน้านี้และหินแอตทริบิวต์เหล่านี้ไม่สอดคล้องกับบรรทัดฐาน CompatMode ส่งคืนค่าหนึ่งหรือสองค่าดังต่อไปนี้:
CSS1COMPAT: เอกสารเป็นไปตามข้อกำหนด HTML ที่ถูกต้อง (ไม่จำเป็นต้องเป็น HTML5/"> HTML5 หน้า HTML4 ที่ผ่านการตรวจสอบแล้วจะส่งคืนค่านี้);
BackCompat: เอกสารมีคุณสมบัติที่ไม่สอดคล้องกับข้อกำหนดทำให้เกิดโหมดความเข้ากันได้
3. ใช้วัตถุตำแหน่งdocument.location ส่งคืนวัตถุตำแหน่งให้ข้อมูลที่อยู่ของเอกสารที่ละเอียดและช่วยให้คุณสามารถนำทางไปยังเอกสารอื่น ๆ
โปรโตคอล: รับหรือตั้งค่าโปรโตคอลสำหรับ URL เอกสาร;
โฮสต์: รับหรือตั้งค่าข้อมูลโฮสต์ของ URL เอกสาร;
HREF: รับหรือตั้งค่าข้อมูลที่อยู่ของเอกสาร;
ชื่อโฮสต์: รับหรือตั้งชื่อโฮสต์ของเอกสาร;
ค้นหา: รับหรือตั้งค่าข้อมูลของส่วนการสืบค้น URL เอกสาร;
แฮช: รับหรือตั้งค่าข้อมูลเกี่ยวกับ URL เอกสารส่วนแฮช;
กำหนด (<url>): นำทางไปยัง URL ที่ระบุ;
แทนที่ (<url>): ลบเอกสารปัจจุบันและนำทางไปยัง URL ที่ระบุ;
โหลดใหม่ (): โหลดเอกสารปัจจุบันใหม่
Resolveurl (<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">
<head>
<title> </title>
</head>
<body>
<script type = "text/javascript">
document.writeln ('<pre>');
document.writeLn ('โปรโตคอล:' + document.location.protocol);
document.writeLn ('โฮสต์:' + document.location.host);
document.writeLn ('ชื่อโฮสต์:' + document.location.hostname);
document.writeLn ('พอร์ต:' + document.location.port);
document.writeLn ('pathName:' + document.location.pathName);
document.writeLn ('ค้นหา:' + document.location.search);
document.writeln ('hash:' + document.location.hash);
document.writeLn ('</pre>');
</script>
</body>
</html>
ผลลัพธ์:
4. อ่านและเขียนคุกกี้ ผ่านแอตทริบิวต์คุกกี้คุณสามารถเพิ่มแก้ไขและอ่านคุกกี้ในเอกสาร ดังที่แสดงในตัวอย่างต่อไปนี้:<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
<meta name = "Author" content = "Adam Freeman" />
<meta name = "คำอธิบาย" content = "ตัวอย่างง่ายๆ" />
</head>
<body>
<p id = "cookiedata">
</p>
<button id = "เขียน">
เพิ่มคุกกี้ </kout>
<button id = "อัปเดต">
อัปเดตคุกกี้ </kout>
<button id = "Clear">
Clear Cookie </ Button>
<script type = "text/javascript">
var cookiecount = 0;
document.getElementById ('อัปเดต'). 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 ();
-
ฟังก์ชั่น ClearCookie () {
var exp = วันที่ใหม่ ();
exp.settime (exp.getTime () - 1);
var arrstr = document.cookie.split (";");
สำหรับ (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 ();
-
</script>
</body>
</html>
ผลลัพธ์:
5. เข้าใจ ReadeStatedocument.readystate ช่วยให้คุณเข้าใจสถานะปัจจุบันของหน้าในระหว่างกระบวนการโหลดหน้าเว็บและการแยกวิเคราะห์ สิ่งหนึ่งที่ต้องจำไว้คือเบราว์เซอร์จะดำเนินการทันทีเมื่อพบองค์ประกอบสคริปต์เว้นแต่คุณจะใช้แอตทริบิวต์เลื่อนเวลาเพื่อชะลอการดำเนินการของสคริปต์ ReadyState มีสามค่าที่แสดงถึงสถานะที่แตกต่างกัน
การโหลด: เบราว์เซอร์กำลังโหลดและดำเนินการเอกสาร
การโต้ตอบ: docuent เสร็จสิ้นการแยกวิเคราะห์ แต่เบราว์เซอร์กำลังโหลดทรัพยากรภายนอกอื่น ๆ (สื่อรูปภาพ ฯลฯ );
เสร็จสมบูรณ์: การแยกวิเคราะห์หน้าเสร็จสมบูรณ์และทรัพยากรภายนอกเสร็จสิ้นที่บ้าน
ในระหว่างกระบวนการโหลดเบราว์เซอร์ทั้งหมดและการแยกวิเคราะห์ค่าของ ReadeState จะเปลี่ยนทีละหนึ่งจากการโหลดการโต้ตอบและการดำเนินการให้เสร็จสมบูรณ์ เมื่อใช้ร่วมกับเหตุการณ์ ReadyStateChange (ทริกเกอร์เมื่อสถานะ ReadeState เปลี่ยนแปลง) ReadeState จะมีค่ามาก
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
<meta name = "Author" content = "Adam Freeman" />
<meta name = "คำอธิบาย" content = "ตัวอย่างง่ายๆ" />
<script>
document.onreadyStateChange = function () {
if (document.readystate == "interactive") {
document.getElementById ("pressme"). onclick = function () {
document.getElementById ("ผลลัพธ์"). innerhtml = "กดปุ่ม";
-
-
-
</script>
</head>
<body>
<button id = "pressme">
กดฉัน </button>
<pre id = "ผลลัพธ์"> </pre>
</body>
</html>
รหัสข้างต้นใช้เหตุการณ์ ReadyStateChange เพื่อให้ได้ผลของการดำเนินการล่าช้า เฉพาะเมื่อทั้งหน้าในหน้าถูกแยกวิเคราะห์และติดต่อค่า ReadyState จะกลายเป็นแบบโต้ตอบ ในเวลานี้เหตุการณ์คลิกจะถูกผูกไว้กับปุ่มกด การดำเนินการนี้ช่วยให้มั่นใจได้ว่าองค์ประกอบ HTML ที่จำเป็นทั้งหมดมีอยู่และป้องกันไม่ให้เกิดข้อผิดพลาด
6. รับข้อมูลเกี่ยวกับการใช้งานแอตทริบิวต์ DOMคุณสมบัติของเอกสารการใช้งานช่วยให้คุณเข้าใจการใช้งานคุณสมบัติ DOM ของเบราว์เซอร์ คุณสมบัตินี้ส่งคืนวัตถุการโดมิภาคซึ่งมีวิธีการ Hasfeature ซึ่งคุณสามารถเข้าใจการใช้งานของเบราว์เซอร์ของคุณสมบัติบางอย่าง
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
<meta name = "Author" content = "Adam Freeman" />
<meta name = "คำอธิบาย" content = "ตัวอย่างง่ายๆ" />
</head>
<body>
<script>
คุณสมบัติ var = ["core", "html", "css", "selectors-api"];
ระดับ var = ["1.0", "2.0", "3.0"];
document.writeln ("<pre>");
สำหรับ (var i = 0; i <feature.length; i ++) {
document.writeln ("การตรวจสอบคุณสมบัติ:" + คุณสมบัติ [i]);
สำหรับ (var j = 0; j <levels.length; j ++) {
document.write (คุณสมบัติ [i] + "ระดับ" + ระดับ [j] + ":");
document.writeln (document.implementation.hasfeature (คุณสมบัติ [i], ระดับ [j]));
-
-
document.write ("</der>")
</script>
</body>
</html>
ผล: