محتوى اليوم يدور حول كيفية معالجة كائنات المستندات.
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 ('forferalet:' + document.characterset) ؛
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 ('المرجع:' + document.referrer) ؛
document.writeln ('title:' + 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: الحصول على أو تعيين معلومات العنوان من المستند ؛
اسم المضيف: الحصول على أو تعيين اسم المضيف للوثيقة ؛
البحث: الحصول على أو تعيين معلومات جزء Query عن عنوان URL المستند ؛
التجزئة: الحصول على أو تعيين معلومات حول جزء عنوان URL المستند ؛
تعيين (<Url>): انتقل إلى عنوان URL المحدد ؛
استبدال (<Url>): قم بإزالة المستند الحالي وانتقل إلى عنوان URL المحدد ؛
RELOAD (): إعادة تحميل المستند الحالي ؛
ResolveUrl (<Url>): قم بتغيير المسار النسبي إلى مسار مطلق.
دعونا نلقي نظرة على المثال التالي :<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
</head>
<body>
<script type = "text/javaScript">
document.writeln ('<pre>') ؛
document.writeln ('protocol:' + 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 ('Search:' + document.location.search) ؛
document.writeln ('hash:' + document.location.hash) ؛
document.writeln ('</pre>') ؛
</script>
</body>
</html>
نتيجة:
4. اقرأ وكتابة ملفات تعريف الارتباط من خلال سمة ملف تعريف الارتباط ، يمكنك إضافة ملفات تعريف الارتباط وتعديلها وقراءتها في المستند. كما هو موضح في المثال التالي:<! doctype html>
<html>
<head>
<title> مثال </title>
<meta name = "المؤلف" content = "Adam Freeman" />
<meta name = "الوصف" content = "مثال بسيط" />
</head>
<body>
<p id = "cookiedata">
</p>
<button id = "write">
أضف ملف تعريف الارتباط </button>
<button id = "update">
تحديث ملف تعريف الارتباط </button>
<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 () ؛
}
وظيفة clearCoOkie () {
var exp = new date () ؛
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. فهم ReadyStateDocument.ReadyState يساعدك على فهم الوضع الحالي للصفحة أثناء عملية تحميل وتحليل الصفحة. شيء واحد يجب تذكره هو أن المستعرض سيقوم بتنفيذ فورًا عند مواجهة عنصر البرنامج النصي ، إلا إذا كنت تستخدم السمة المؤجلة لتأخير تنفيذ البرنامج النصي. ReadyState لديها ثلاث قيم تمثل حالات مختلفة.
التحميل: المستعرض هو تحميل وتنفيذ وثيقة ؛
التفاعلية: أكمل المستندات التحليل ، لكن المتصفح يقوم بتحميل الموارد الخارجية الأخرى (الوسائط ، الصور ، إلخ) ؛
أكمل: تم الانتهاء من تحليل الصفحة ، ويتم الانتهاء من الموارد الخارجية في المنزل.
أثناء عملية تحميل وحل محل المستعرض بأكمله ، ستتغير قيمة ReadyState واحدًا تلو الآخر من التحميل والتفاعل والكمال. عند استخدامه بالاقتران مع حدث ReadyStateChange (يتم تشغيله عندما تتغير حالة ReadyState) ، تصبح ReadyState ذات قيمة كبيرة.
<! doctype html>
<html>
<head>
<title> مثال </title>
<meta name = "المؤلف" content = "Adam Freeman" />
<meta name = "الوصف" content = "مثال بسيط" />
<script>
document.OnReadyStateChange = function () {
if (document.readyState == "Interactive") {
document.getElementById ("pressme"). onClick = function () {
document.getElementById ("النتائج"). innerhtml = "button pressed" ؛
}
}
}
</script>
</head>
<body>
<button id = "pressme">
اضغط علي </button>
<pre id = "النتائج"> </pre>
</body>
</html>
يستخدم الرمز أعلاه حدث ReadyStateChange لتحقيق تأثير التأخير في التنفيذ. فقط عندما يتم تحليل الصفحة بأكملها على الصفحة والاتصال سوف تصبح قيمة ReadyState تفاعلية. في هذا الوقت ، سيتم ربط حدث النقر بزر PressMe. تضمن هذه العملية وجود جميع عناصر HTML المطلوبة وتمنع حدوث الأخطاء.
6. الحصول على معلومات حول تنفيذ سمة DOMتساعدك خاصية Document.Implementation على فهم تنفيذ المتصفح لخاصية DOM. تقوم هذه الخاصية بإرجاع كائن التنويع ، والذي يحتوي على طريقة HASFEATURE ، يمكنك من خلالها فهم تنفيذ المتصفح لخاصية معينة.
<! doctype html>
<html>
<head>
<title> مثال </title>
<meta name = "المؤلف" content = "Adam Freeman" />
<meta name = "الوصف" content = "مثال بسيط" />
</head>
<body>
<script>
VAR FETHETS = ["CORE" ، "HTML" ، "CSS" ، "Selectors-API"] ؛
VAR REVENTS = ["1.0" ، "2.0" ، "3.0"] ؛
document.writeln ("<pre>") ؛
لـ (var i = 0 ؛ i <features.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 ("</pre>")
</script>
</body>
</html>
تأثير: