JavaScript - DOM عملية - Window.Document تفاصيل الكائن

1. ابحث عن العناصر:

document.getElementById ("id") ؛ ابحث وفقًا لـ ID ، وابحث على الأكثر ؛

var a = docunment.getElementById ("id") ؛ ضع العنصر الموجود في المتغير ؛

document.getElementSbyName ("name") ؛ ابحث وفقًا للاسم ، ويوجد الصفيف ؛

document.getElementsByTagName ("name") ؛ ابحث عن الصفيف وفقًا لاسم العلامة ؛

document.getElementsByClassName ("الاسم") ابحث وفقًا لـ ClassName ، ويتم العثور على المصفوفة ؛

2. محتوى التشغيل:

1. العناصر غير النمطية:

(1) الحصول على المحتوى:

تنبيه (A.InnerHtml) ؛ يتم الحصول على رمز HTML والنص في العلامة ، ويتم الحصول على جميع المحتويات في العلامة.

على سبيل المثال: يوجد مثل هذا الافتراض في الجسم:

<div id = "me"> <b> جربه </b> </viv>

استخدم innerhtml للحصول على المحتوى في Div في البرنامج النصي:

var a = document.getElementById ("me") ؛

تنبيه (A.InnerHtml) ؛

النتائج كما يلي:

ALERT (A.Innertext) ؛ فقط خذ النص من الداخل

تنبيه (a.outerhtml) ؛ يتضمن محتوى العلامة نفسها (فهم بسيط)

(2) تعيين المحتوى:

a.innerhtml = "<font color = red> Hello World </font>" ؛

إذا كانت النتيجة كما يلي مع رمز محتوى الإعداد ، يتم استبدال المحتوى الموجود في DIV:

سوف يقدم A.Innertext المحتوى كما هو

مسح المحتوى: تعيين سلسلة فارغة

2. عناصر النموذج:

(1) هناك طريقتان للحصول على المحتوى:

var t = document.f1.t1 ؛ نموذج نموذج النموذج هو إدخال مع T1 في F1 ؛

var t = document.getElementById ("id") ؛ احصل عليه مباشرة مع المعرف.

تنبيه (t.value) ؛ يحصل على قيمة القيمة في الإدخال ؛

تنبيه (t.innerhtml) ؛ احصل على القيمة هنا <evideArea> </swertarea> ؛

(2) تعيين المحتوى: t.value = "تغيير المحتوى" ؛

3. نقطة معرفة صغيرة:

<a href = "http://www.baidu.com" onClick = "return false"> انتقل إلى Baidu </a> ؛ إذا تمت إضافة Flase Return ، فلن يقفز ، فإن الافتراضي هو الإرجاع True سوف يقفز. وينطبق الشيء نفسه على الأزرار. إذا تم تعيين Flase Return في الزر ، فلن يتم تقديم التقديم. يمكن استخدام هذا للتحكم في قفزة التقديم.

3. خصائص التشغيل

أولاً ، استخدم معرف العنصر للعثور على العنصر وتخزينه في متغير:

var a = document.getElementById ("id") ؛

ثم يمكنك العمل على خصائص العنصر:

A.SetAttribute ("اسم السمة" ، "قيمة السمة") ؛ اضبط سمة أو إضافة أو تغييرها ؛

A.GetAttribute ("اسم السمة") ؛ الحصول على قيمة السمة ؛

A.RemoVeatTribute ("اسم السمة") ؛ إزالة السمة.

مثال 1: قم بإجراء سؤال. إذا كانت إجابة الإدخال صحيحة ، فسوف تظهر بشكل صحيح ، وسيظهر الخطأ الأخطاء ؛

فيما يلي سمة daan مكتوبة في النص ، والتي تحتوي على قيمة الإجابة. عند النقر للتحقق من الإجابة ، يكون إدخال المحتوى عن طريق Cheak هو نفسه الإجابة:

رمز في الجسم:

 <port> في أي عام كان تأسيس جمهورية الصين؟ <type type = "text" daan = "1912" value = "" id = "t1" name = "t1" /> <input type = "button" onClick = "check ()" id = "t2" name = "t2" value = "

الرمز في JS:

 الدالة check () {var a = document.getElementById ("t1") ؛ var a1 = a.value ؛ var a2 = A.GetAttribute ("daan") ؛ if (a1 == a2) {Alert ("تهانينا للإجابة بشكل صحيح!") ؛ } آخر {ALERT ("Idiot!") ؛ }}

النتائج عندما تكون الإجابة صحيحة:

مثال 2: زر الاتفاق ، العد التنازلي لمدة 10 ثوان ، يصبح زر الاتفاق قابلاً للاستخدام. هنا ، يتم استخدام سمة العملية: معطل لتغيير حالة الزر. عند تعطيله = "معطل" غير متوفر.

رمز في الجسم:

 <Porm> <input type = "prident" id = "b1" name = "b1" value = "explive (10)" up upatabled = "up upabled" /> < /form>

الرمز في JS:

 var n = 10 ؛ var a = document.getElementById ("b1") ؛ وظيفة bian () {n-- ؛ if (n == 0) {A.RemoVeatTribute ("upabled") ؛ A.Value = "Comph" ؛ يعود؛ } آخر {A.Value = "APPER ("+n+")" ؛ Window.SettImeout ("Bian ()" ، 1000) ؛ }} window.settimeout ("bian ()" ، 1000) ؛

نتائج المدى:

4. نمط العملية

أولاً ، استخدم معرف العنصر للعثور على العنصر وتخزينه في متغير:

var a = document.getElementById ("id") ؛

ثم يمكنك العمل على خصائص العنصر:

أ. ؛ تشغيل خصائص نمط الهوية هذا.

النمط عبارة عن نمط في CSS ، ويمكن تشغيل جميع الأنماط بالرمز.

document.body.style.backgroundColor = "color" ؛ لون الخلفية من النافذة بأكملها.

فئة العمليات نمط: A.ClassName = "classname in style sheet" تعمل على مجموعة من الأنماط

مثال 1: التبديل التلقائي واليدوي لصور العرض ؛

الكود في الجسم ، لجعل div مع صورة الخلفية والتحكم في كائنات على كلا الجانبين:

 <div id = "tuijian" style = "background-image: url (imges/tj1.jpg) ؛"> <div id = "p1" onClick = "doDo (-1)"> </div> <div id = "p2" onClick = "DODO (1)"> </div> </div>

رمز في ورقة الأنماط:

 <type type = "text/css"> *{margin: 0px auto ؛ الحشو: 0px ؛ Font-Family: "Microsoft Yahei" ؛ } #tuijian {width: 760px ؛ الارتفاع: 350 بكسل ؛ تكرار الخلفية: عدم التكرار ؛ }. pages {top: 200px ؛ خلفية اللون:#000 ؛ وضع الخلفية: المركز ؛ تكرار الخلفية: عدم التكرار ؛ العتامة: 0.4 ؛ العرض: 30 بكسل ؛ الارتفاع: 60px ؛ } #p1 {background-image: url (imges/prev.png) ؛ تعويم: اليسار. الهامش: 150px 0px 0px 10px ؛ } #p2 {background-image: url (imges/next.png) ؛ تعويم: صحيح. الهامش: 150px 10px 0px ؛ } </style>

يستدعي الكود في JS بشكل رئيسي وظيفة Huan () كل 3 ثوان لتعديل نمط صورة الخلفية. عند النقر فوق المفتاح الأيسر واليمين ، سيتم تبديله يدويًا ، ويتوقف التبديل التلقائي:

 <script language = "javaScript"> var jpg = new array () ؛ jpg [0] = "url (imges/tj1.jpg)" ؛ jpg [1] = "url (imges/tj2.jpg)" ؛ if (xb == jpg.length) {xb = 0 ؛ } tjimg.style.backgroundImage = jpg [xb] ؛ if (n == 0) {var id = window.settimeout ("huan ()" ، 3000) ؛ }} دالة doDo (m) {n = 1 ؛ xb = xb+m ؛ if (xb <0) {xb = jpg.length-1 ؛ } آخر إذا (xb> = jpg.length) {xb = 0 ؛ } tjimg.style.backgroundImage = jpg [xb] ؛ } window.settimeout ("Huan ()" ، 3000) ؛ </script>

التأثير على النحو التالي:

5. عمليات العناصر ذات الصلة:

var a = document.getElementById ("id") ؛ العثور على أ ؛

var b = a.nextsibling ، ابحث عن عنصر الأقران التالي لـ a ، انتبه إلى المساحات المحتوية ؛

var b = a.previoussibling ، ابحث عن عنصر الأقران السابق لـ A ، انتبه إلى المساحات المحتوية ؛

var B = A.ParentNode ، ابحث عن العنصر الأصل السابق لـ A ؛

var b = a.childnodes ، تم العثور على المصفوفة ، ويتم العثور على عنصر الطفل من المستوى التالي من A ؛

var b = a.firstchild ، العنصر الأول للطفل ، LastChild Last ، eildnodes [n] ابحث عن عدد الأول ؛

التنبيه (العقد [i] مثيل النص) ؛ حدد ما إذا كان نصًا ، وإرجاع صحيح ، وليس flase ، استخدم ما إذا كان لتحديد ما إذا كانت قيمتها خاطئة ، ويمكنك إزالة المساحات.

6. الخلق ، إضافة وحذف العناصر:

var a = document.getElementById ("id") ؛ العثور على أ ؛

var obj = document.createElement ("اسم العلامة") ؛ إنشاء عنصر

obj.innerhtml = "Hello World" ؛ عند الإضافة ، تحتاج إلى إنشاء عنصر أولاً.

A.AppendChild (OBJ) ؛ إضافة عنصر طفل إلى أ.

A.Removechild (OBJ) ؛ حذف عنصر الطفل.

A.SelectedIndex في القائمة: عدد المحدد ؛

.

7. تشغيل السلسلة:

var s = new string () ؛ أو var s = "aaaa" ؛

var s = "Hello World" ؛

التنبيه (s.tolowercase ()) ؛ إلى touppercase () إلى أحرف صغيرة

ALERT (S.SubString (3،8)) ؛ اعتراض من الموضع الثالث إلى المركز الثامن

ALERT (S.Substr (3،8)) ؛ يبدأ في الاعتراض من الموضع الثالث ، واعتراض ثمانية أحرف في الطول ، ولا تكتب الأرقام التالية إلى النهاية.

S.Split ('') ؛ قم بفك الشخصيات وفقًا للأحرف المحددة ، ووضعها في صفيف ، وفرزها تلقائيًا

S.Length هو الخاصية

S.Indexof ("World") ؛ أول حدث في العالم في السلسلة لا يعود -1

S.LastIndexof ("O") ؛ O حيث حدث آخر S.LastIndexof ("O") ؛ O في السلسلة

8. تاريخ ووقت التشغيل

var d = new Date () ؛ الوقت الحالي

D.Setlyear (2015،11،6) ؛/*قم بطرح 1 إعداد في الشهر الذي تريد تعيينه*/

d.getlyiar: خذ السنة ؛

D.GetMonth (): خذ الشهر ، ويتم إخراج أقل من تلك التي تحصل عليها ؛

D.GetDate (): خذ السماء ؛

D.GetDay (): خذ يوم الأسبوع

d.gethours (): خذ الساعة ؛

d.getMinutes (): خذ دقائق ؛ D.GetSeconds (): خذ ثانية

D.Setlyear (): حدد العام وانتبه إلى -1 عند تحديد الشهر.

9. تشغيل الوظائف الرياضية

math.ceil () ؛ أصغر عدد صحيح أكبر من العشري الحالي

Math.Floor () ؛ أكبر عدد صحيح للعدد العشري الحالي للأسماك الصغيرة

Math.Sqrt () ؛ مفتوح

Math.Round () ؛ دائري()؛ دائري

Math.Random () ؛ رقم عشوائي ، بين 0-1

10. بعض النصائح

يتم تغيير اقتباسات مزدوجة في الخارج ، واقتباسات مزدوجة في الداخل إلى عروض أسعار واحدة ؛

عند تحديد ارتفاع الصف في DIV ، بغض النظر عن مدى ارتفاع الإعداد ، يكون الصف المشغل في الموضع الأوسط افتراضيًا (منتصف المناطق العلوية والسفلية من DIV - [افتراضي] متمركز رأسياً).

القيمة المأخوذة من مربع النص هي سلسلة ، ويجب تحويلها إلى رقم باستخدام Parseint ().

S.Match (Reg) ؛ يمثل S سلسلة ، ويمثل REG سلسلة ، والمباراة. إذا لم تتطابق السلاسلان ، يتم إرجاع فارغة.

التفسير التفصيلي أعلاه لـ JavaScript-DOM-window.document كائن هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.