مرحبا word1.

مرحبا word2.

مرحبا word3.

مرحبا word4.

عناصر ليس في المستند لا تبحث عن طريق getelementbyid (). عند إنشاء عنصر وتعيينه معرف، يجب عليك إدراج العنصر في شجرة المستندات مع أو طريقة مماثلة قبل أن تتمكن من الوصول إليها باستخدام GetEllementByid ():

VAR Element \u003d document.createelement ("DIV")؛ entement.id \u003d "testqq"؛ var el \u003d document.getelementbyid ("testqq")؛ // el سيكون خالية!

مستندات غير HTMLوبعد يجب أن يكون لدى تنفيذ DOM معلومات تقول أي estributes هي معرف النوع. السمات مع اسم "معرف" ليست من النوع غير معرف ما لم يتم تعريفه في المستند "S DTD. يتم تعريف سمة المعرف لتكون من نوع المعرف في الحالات الشائعة من XHTML، XUL، وغيرها من التطبيقات التي لا تعرف سواء كانت السمات AR من معرف النوع أو غير متوقع لإرجاع NULL.

تخصيص

التوافق المتصفح

يتم إنشاء جدول التوافق في هذه الصفحة من البيانات الهيكلية. إذا كنت ترغب في المساهمة في البيانات، فيرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب لنا.

تحديث بيانات التوافق على Github

أسطورة.

سينظر الدرس في بداية الموضوع: نموذج كائن المستند (Javascript Dom) - أساس HTML الديناميكي، وسيتم دراسة طرق الوصول إلى الكائنات وطرق معالجة أحداث JavaScript

• عموما شيء- هذا نوع بيانات مركب يجمع بين القيم العديدة الوحدة العامة والسماح لك بحفظ وقيم أسمائهم.

في السابق، لقد بدأنا بالفعل بالتعرف على المفهوم في جافا سكريبت.

• جافا سكريبت له مثل هذا المفهوم مثل دوم - طراز كائن المستند - نموذج كائن صفحة الويب (صفحات HTML).
• علامات الوثائق أو، كما يقولون، فإن عقد الوثيقة هي كائناتها.

دعونا ننظر إلى المخطط التسلسل الهرمي للكائنات في جافا سكريبتثم، في أي مكان التسلسل الهرمي هو كائن المستند في هذا الموضوع.

عنصر البرنامج النصي لديه سمات:

مثال:

خصائص وسمات كائن المستند في جافا سكريبت

كائن المستند هو صفحة ويب.

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

أولئك. أولا، يتم كتابة الكائن نفسه، ثم من خلال النقطة وبدون مسافات يشار إليها عن طريق ممتلكاتها أو السمة أو الطريقة

النظر في مثال:

مثال: دع مستند HTML له علامة

وتحديد له نمط CSS. (حتى أنماطين، والثاني مفيد للمهمة):

يحتاج:

1. اضبط الخاصية الجديدة للكائن، وتعيينها قيمة وإخراج هذه القيمة؛
2. إخراج قيمة سمة الكائن؛
3. تغيير قيمة سمة الكائن.

نظرا لأن هذه لغة جافا سكريبت، يمكن أن يخترع الكائن وتعيين أي خاصية بأي قيمة. ولكن أولا، سنحصل على كائن (سيتم وصف الوصول إلى الكائن بالتفصيل أدناه في هذا الدرس):

// الحصول على كائن من عنصر المعرف var \u003d document.getelementbyid ("myelem")؛ entement.myproperty \u003d 5؛ / / قم بتعيين خاصية التنبيه (Element.myproperty)؛ / / عرض في مربع الحوار

ترتبط المهمة التالية بسمة كائن. كائن السمة - هذه هي سمات العلامة. أولئك. في حالتنا، هناك اثنان منهم: سمة الفصل مع القيمة الصغيرة وسمة المعرف. سوف نعمل مع سمة الفصل.

أضف الآن رمز JavaScript لإخراج قيمة السمة لكائننا. يجب أن يكون الرمز بعد العلامات الرئيسية:

// الحصول على كائن من عنصر المعرف var \u003d document.getelementbyid ("myelem")؛ تنبيه (Element.getattribute ("الطبقة"))؛ / / عرض في مربع الحوار

والمهمة الأخيرة: تغيير قيمة السمة. لهذا، لدينا أسلوب تم حصاده "كبير"وبعد استبدال قيمة سمة الفصل لهذا النمط:

// الحصول على كائن من عنصر المعرف var \u003d document.getelementbyid ("myelem")؛ Element.SetAttribute ("فئة"، "كبير")؛

نتيجة لذلك، سيصبح عنصرنا أكبر ومطلية باللون الأزرق (فئة كبيرة).

الآن النظر في الأساليب المستخدمة في المثال للعمل مع السمات.

طرق للعمل مع السمات في جافا سكريبت

يمكن إضافة سمات وحذف وتعديلها. لهذا هناك طرق خاصة:

• إضافة سمة (تعيين للحصول على قيمة جديدة لذلك):

getAttribute (AMP)

• التحقق من وجود هذه السمة:

removeattribute (ATM)

طرق مختلفة للعمل مع السمات

مثال: عرض قيمة سمة كتلة نص القيمة.

• دع هناك كتلة نصية:

var elem \u003d document.getelementbyid ("myelem")؛ var x \u003d "القيمة"؛

• النظر في عدة طرق للحصول على قيمة سمة (لاستخدام الإخراج طريقة التنبيه()):

elem.getattribute ("القيمة")

elem.getattribute ("القيمة")

2. نقطة تدوين:

elem.attributes .value.

elem.attributes.value.

3. تدوين الأساس:


تعيين قيم السمة يمكنك أيضا بعدة طرق:

var x \u003d "المفتاح"؛ // مفتاح السمة، قيمة VAL - القيمة للسمة // 1. elem.setattribute ("المفتاح"، "val") // 2. elem.attributes.key \u003d "val" // 3. elem.attributes [" المفتاح "] \u003d" Val "// 4. elem.setattribute (x،" val ")

خصائص عنصر الجسم

من خلال كائن المستند، يمكنك الاتصال بجسم المستند - علامة الجسم - مع بعض الخصائص المفيدة.

على سبيل المثال، تحتوي علامة الجسم على خصائصين: عرض وارتفاع نافذة العميل:

document.body.clientheight - ارتفاع نافذة العميل
Document.body.clientwidth - عرض نافذة العميل


ولكن الأهم من ذلك، كما تعلمنا بالفعل، هذا هو أنه من خلال كائن المستند من خلال أساليب خاصة الوصول إلى جميع عناصر الصفحة، أي علامات.

مهم: مع هذا النوع من الدورة الدموية إلى علامات الصفحة، يجب أن يكون البرنامج النصي في نهاية شجرة العنصر، قبل إغلاق الجسم! نظرا لأن وقت تنفيذ البرنامج النصي، يجب أن تكون جميع البنود "مرسومة" من قبل المتصفح على الشاشة

JS8_1 المهمةوبعد إصدار أحجام نافذة المتصفح: على سبيل المثال، "أحجام نافذة المتصفح 600 × 400"

الوصول إلى عناصر المستند في جافا سكريبت

للوصول إلى الكائنات أو الكائنات البحث، يتم توفير العديد من الخيارات:

1. معرف البحث. (أو طريقة getelementbyid)، إرجاع عنصر معين
2. البحث حسب العنوان (أو طريقة getellementbytagname) تعرض مجموعة من العناصر
3. البحث عن طريق اسم السمة (أو طريقة getellementbyname)، إرجاع مجموعة من العناصر
4. من خلال عناصر الوالدين(الحصول على جميع أحفاد)

النظر في كل من الخيارات بمزيد من التفاصيل.

1. الوصول إلى العنصر من خلال معرف السمة

بناء الجملة: document.getelementbyid (ID)

ترجع الأسلوب GetEllementByID () العنصر نفسه الذي يمكن استخدامه بعد ذلك للوصول إلى البيانات

مثال: في الصفحة هناك مربع نص مع سمة ID \u003d "Cake":

...

ضروري



✍ الحل:

تنبيه (document.getelementbyid ("كعكة"). القيمة)؛ // إرجاع "عدد الكعك"

يمكنك أن تفعل الشيء نفسه عن طريق تنفيذ نداء إلى الكائن. من خلال المتغير:

var a \u003d document.getelementbyid ("كعكة")؛ تنبيه (A.Value)؛ / / سحب قيمة سمة القيمة، I.E. النص "عدد الكعك"

مهم: يجب أن يكون البرنامج النصي متأكدا بعد العلامة!

بناء الجملة:
document.getelementbytagname (الاسم)؛

مثال: تحتوي الصفحة على حقل نص (علامة الإدخال)، مع سمة القيمة:

...

ضروري: عرض قيمة قيمة سمة لها

تنظم طريقة GetellementsBytagname عبر المتغير الوصول إلى جميع عناصر الإدخال (أي إلى عناصر الصفيف الإدخال)، حتى لو كان هذا العنصر هو الوحيد الموجود في الصفحة. للإشارة إلى عنصر محدد، على سبيل المثال، أولا، نشير إلى فهرسها (يبدأ الصفيف بنشر صفر).

✍ الحل:

تنطبق على عنصر مؤشر معين:

var a \u003d document.getelementbytagname ("الإدخال")؛ تنبيه (A.Value)؛ // إرجاع "عدد الكعك"

بناء الجملة:
document.getelementbyname (الاسم)؛

عودة الأسلوب GetLementByname ("...") مجموعة من الأشياءحيث يساوي سمة الاسم الطريقة المحددة كمعلمة القيمة. إذا كان هذا العنصر واحد فقط من الصفحة، فستظل الطريقة بإرجاع صفيف (فقط مع عنصر واحد).

مثال: افترض في الوثيقة هناك عنصر:

vAR Element \u003d document.getelementbyname ("MyLem")؛ تنبيه (Element.Value)؛

في هذا المثال العنصر هو واحد، ولكن يتم تنفيذ الاستئناف إلى عنصر الصفر في الصفيف.

مهم: تعمل الطريقة فقط مع تلك العناصر التي يتم توفير سمة الاسم بوضوح في المواصفات.: هذه هي شكل وإدخال، أ، حدد علامات Textarea وعدد من الآخر، أكثر نادرة.

لن تعمل طريقة Document.getelementsByname مع العناصر الأخرى من Div، P، ومثل العناصر المشابهة.

الوصول إلى أحفاد في جافا سكريبت يحدث من خلال خاصية الأطفال. الممتلكات تنتمي إلى الكائن الأصل.

document.getelementbyid (Roditel) .childnodes؛

document.getelementbyid (Roditel) .childnodes؛

النظر في مثال يتم فيه وضع علامات الصور في الحاوية - علامة DIV. وبالتالي، فإن علامة DIV هي أحد الوالدين من بيانات الصورة، وعلامات img نفسها، على التوالي، أحفاد العلامة DIV:

جلب الآن ب. نافذة مشروط قيم عناصر الصفيف مع أحفاد، أي علامات img:

var mydiv \u003d document.getelementbyid ("div_for_img")؛ // تنطبق على الحاوية الأصل var irlmas \u003d mydiv.childnodes؛ // مجموعة من أحفاد ل (var i \u003d 0؛ أنا< childMas.length;i++){ alert(childMas[i].src); }

يرجى ملاحظة أنه بالنسبة إلى تمثال نصفي في عناصر مجموعة من أحفاد، فهو مناسب لاستخدام الدورة. أولئك. في مثالنا نحصل على الدورة:

ل (Var A in Childmas) (تنبيه (رعاية الأطفال [A] .src)؛)

طرق أخرى للنظر على سبيل المثال:

وصول:

... // أساليب غير مرغوب فيها ويتم عفا عليها الزمن للوصول إلى العناصر: تنبيه (Document.forms.name)؛ // flert (document.form.elements.type)؛ // تنبيه النص (المستند .form.Elments.Options.id)؛ تنبيه O2 (Document.f.b.type)؛ // زر تنبيه (document.f.name)؛ // SS تنبيه (Document.f..Options.id)؛ // o2 // alert elertal realtal طرق الوصول (document.getelementbyid ("t"). اكتب)؛ // تنبيه النص (document.getelementbyid ("S"). الاسم)؛ // تنبيه SS (document.getelementbyid ("S"). خيارات)؛ // 02 تنبيه (Document.getelementByID ("O3"). نص)؛ // أربعة ...

مثال: في مستند HTML، قم بإنشاء حقل زر ونص. باستخدام البرنامج النصي، اللون خلفية الزر (Style.backgroundColor PropertyLor) وعرض النقش "مرحبا!" في حقل النص (قيمة Tribut).

رمز HTML:

document.getelementbyid ("T1"). قيمة \u003d "(! لانج: مرحبا!"; document.getElementById("b1").style.backgroundColor = "red";!}

الخيار 2:

document.getelementByID ("T1"). Setattribute ("القيمة"، "مرحبا!")؛ document.getelementbyid ("B1"). Style.backgroundColor \u003d "أحمر"؛

مهمة JS8_2. إنشاء علامات حقول النص وفقا للصورة في الصورة. حددها مع المقابلة (المشار إليها في القيم) قيم سمة معرف المعرف. باستخدام البرنامج النصي، أضف إلى جميع الحقول الرقمية (يفترض القيم العددية) القيمة "0"

التحقق من صحة بيانات النموذج هذه

هل هناك حقل فارغ اليسار؟

هذه البيانات التي تم إدخالها لا يمكن الوثوق بها. نعتقد أن المستخدمين عند دخول البيانات سيتم التحقق، غير معقول. لذلك تحتاج إلى استخدام جافا سكريبت لهذا.

لأجل أن تفحص هل هناك حقل نص فارغ (على سبيل المثال، بعد ملء مستخدم لبيانات أي استبيان)، يجب عليك الاتصال بميزة القيمة. إذا كانت قيمة العقار سلسلة فارغة (")، فمن الضروري إخطار هذا المستخدم بطريقة أو بأخرى.

إذا (Document.getelementByid ("اسم"). قيمة \u003d\u003d ") (بعض الإجراءات، على سبيل المثال، عرض رسالة مع متطلبات ملء الحقل)؛

بالإضافة إلى ذلك، يمكنك القيام به بدون برنامج نصي. تتمتع علامة الإدخال في حقل النص بسمة نمط. كقيمة، يتم تحديد تعبير منتظم للتحقق من البيانات في نموذج مربع النص هذا. إذا كانت السمة موجودة نمط.لن يتم إرسال النموذج حتى يتم ملء حقل النص هذا بشكل صحيح.
على سبيل المثال، للتحقق مما إذا كان الحقل يظل فارغا:

النص بدلا من المعنى العددي: وظيفة Isnan

إذا افترض الحقل مقدمة القيمة الرقمية، بدلا من ذلك، يدخل المستخدم النص، ثم تحتاج إلى استخدام وظيفة Isnan (من الإنجليزية. "ليس عددا؟")، الذي يتحقق من نوع إدخال البيانات وإرجاعه صحيحا إذا تم إدارة بيانات النص بدلا من الرقمية.

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

إذا (ISNAN ("دقائق"). القيمة)) (الإخطار مع شرط إدخال البيانات الرقمية)؛

صفحة دانا مع عناصر لملء:


شظية رمز HTML:

يحتاج:
أكمل المقاعد الفارغة في جزء من التعليمات البرمجية أدناه، والذي يتحقق من صحة ملء حقول نصين: اسم (ID \u003d اسم ") و الدقائق (معرف \u003d "دقائق"). استخدم فحص حقل فارغ ("") ("") وتنسيق التعبئة الصحيحة للحقل الرقمي (ISNAN).

* قم بتنفيذ المهمة أيضا باستخدام سمة النمط لحقول النص باستخدام.

شظية البرنامج النصي:

يستخدم الرمز لبناء شروط معقدة سافر مبكرا.

مفهوم جديد لك هو استدعاء الوظيفة كمعالج حدث زر:
onclick \u003d "المسجل ()؛"
بالنقر فوق الزر سوف يسمى وظيفة المسجل ()

من أجل العمل البرنامج النصي مع نوع من نوع الصفحة، تحتاج أولا إلى العثور على هذا العنصر. للقيام بذلك، فإن جافا سكريبت لديها عدة طرق. عادة ما يتم تعيين العنصر الموجود للمتغير، وفي المستقبل، من خلال هذا المتغير، يناشد CRCPT للعنصر وتنتج بعض الإجراءات معها.

معرف البحث.

إذا تم تحديد سمة معرف في عنصر رمز الصفحة، فيمكن العثور على العنصر حسب المعرف. هذه الطريقة الأسهل. يتم البحث عن عنصر باستخدام طريقة GetElementByid () كائن المستند العالمي.

document.getelementbyid (ID)

المعلمات:

معرف - معرف العنصر للعثور عليه. معرف هو سلسلة، لذلك يجب أن يكون في علامات الاقتباس.

إنشاء صفحة، أضف عنصرا إليه وتعيينه بالمعرف، وسوف نجد هذا العنصر في البرنامج النصي:

رمز HTML:

جافا سكريبت:

وجدنا العنصر الذي حددناه متغير الكتلة وجلب المتغير إلى وحدة التحكم. افتح وحدة التحكم بالمتصفح، يجب تحديد العنصر فيه.

لأن معرف المعرف هو الأسهل و طريقة ملائمة، غالبا ما تستخدمه. إذا كنت بحاجة إلى العمل في برنامج نصي مع بعض العناصر، فعندئذ في رمز الصفحة لهذا العنصر، يتم تثبيت سمة المعرف، حتى لو لم يتم تثبيتها مسبقا. والعثور على عنصر حسب المعرف.

البحث حسب الفئة

تتيح لك طريقة GetellementByClassName () العثور على جميع العناصر المتعلقة بفئة معينة.

document.getelementbyclassname (فئة)

المعلمات:

فئة فئة من العناصر للعثور عليها

تقوم الأسلوب بإرجاع pseudomassive يحتوي على العناصر الموجودة. يسمى pseudomassive لأن العديد من طرق الصفائف لا تعمل من أجله. لكن الملكية الرئيسية لا تزال - يمكنك الرجوع إلى أي عنصر من عناصر الصفيف. حتى لو تم العثور على عنصر واحد فقط، فلا يزال في الصفيف.

إضافة عناصر إلى الصفحة وتعيينها الفئة. سيتم وضع جزء من العناصر داخل الكتلة التي أنشأناها مسبقا. سيتم إنشاء الجزء الآخر خارج الكتلة. سيكون من المفهوم معنى هذا في وقت لاحق قليلا. الآن سوف تبدو الصفحة هذا:

رمز HTML:

جافا سكريبت:

تم العثور الآن الآن على هذه العناصر الموجودة في الكتلة.

البحث عن طريق Tagu.

طريقة GetLementBytagname () تجد جميع العناصر ذات علامة محددة. كما أنه إرجاع pseudomassive مع العناصر الموجودة.

document.getelementbytagname (TEG)

المعلمات:

علامة - علامات للعثور على

سنجد جميع العلامات P، التي هي في الصفحة:

يمكن أيضا تطبيق هذه الطريقة على المستند بأكمله، بل لعنصر محدد. العثور على جميع العلامات P في الكتلة.

البحث عن طريق محدد

هناك طرق QuerySector () و QuerySesterAll ()، والتي تجد العناصر التي تتطابق مع محدد معين. وهذا هو، سيتم العثور على العناصر التي سيتم استخدام النمط إذا تم الإشارة إليها بواسطة هذا المحدد. في الوقت نفسه، فإن وجود مثل هذا المحدد في أسلوب الصفحة ليس بالضرورة. هذه الطرق غير مرتبطة مع CSS. تعثر طريقة QuerySEnterectorll () جميع العناصر المطابقة للمحدد. وتجد الأسلوب QuerySelector () عنصر واحد هو الأول في رمز الصفحة. يمكن أن تحل هذه الطرق تحل محل جميع الطرق للبحث عن العناصر التي تمت مناقشتها مسبقا، لأن هناك محدد عن طريق معرف، وهو محدد العلامات وغيرها الكثير.

document.QuerySelector (محدد)

document.querysectorall (محدد)

تتم كتابة المحددين بنفس الطريقة كما في CSS، فقط لا تنسى وضع علامات الاقتباس.

أضف قائمة إلى الصفحة وابحث عنها على المحدد. نحن نبحث عن عنصر واحد فقط ونحن نعرف بالضبط أنه سيكون الأول، لأنه واحد على الصفحة. لذلك، في هذه الحالة هو أكثر ملاءمة لاستخدام طريقة QuerySelector (). ولكن عند استخدام هذه الطريقة، من الضروري مراعاة أنه قد يتم إضافة نفس العناصر في وقت لاحق إلى الصفحة. ومع ذلك، فإنه يتعلق معظم الأساليب.

رمز HTML:

هذه الطرق يمكن أن تبحث أيضا عن عناصر ليس في جميع أنحاء المستند، ولكن داخل عنصر المحول.

في المثال، استخدمنا فقط المحددين في العلامة. حاول العثور على عناصر الصفحة باستخدام محددات أخرى.

العناصر المجاورة

بالنسبة للبند الموجود، يمكنك العثور على جيران. كل عنصر هو كائن، ويمكن الحصول على العناصر المجاورة من خلال خصائص هذا الكائن. يتم إنشاء خاصية Overlesultesiblings بواسطة العنصر السابق، ويحتوي الخاصية extellationsibling على العنصر التالي.

element.PreviousLementsibling.

entement.nextelementsibling.

ابحث عن العنصر بجوار الكتلة:

عناصر ابنة

تحتوي خاصية الأطفال على صفيف مع عناصر الأطفال.

entement.children.

العثور على عناصر ابنة الكتلة.

آخر تحديث: 1.11.2015

للعمل مع هيكل DOM في JavaScript، فإن كائن المستند المقصود، الذي يتم تعريفه في كائن الإطار العالمي. يوفر كائن المستند مجموعة من الخصائص والأساليب لإدارة عناصر الصفحة.

بحث عناصر

يتم تطبيق الأساليب التالية للبحث عن العناصر في الصفحة:

getelementbyid (القيمة): حدد عنصر يتم فيه سمة المعرف تساوي القيمة

getellementbytagname (القيمة): حدد جميع العناصر التي تساوي العلامة القيمة

getellementsbyclassname (القيمة): تختار جميع العناصر التي تحتوي على فئة القيمة

queryselector (القيمة): حدد العنصر الأول الذي يتوافق مع محدد Value CSS

querysEctorall (القيمة): حدد جميع العناصر التي تتطابق مع قيمة محدد CSS

على سبيل المثال، ابحث عن عنصر عناصر معرف:

باستخدام مستند استدعاء document.getelementByID ("رأس") نجد عنصر معرف \u003d "Header". واستخدام خاصية Innertext، يمكنك الحصول على نص العنصر الموجود الموجود.

البحث عن طريق علامة محددة:

باستخدام استدعاء المستند.getelementbytagname ("P")، نجد كل عناصر الفقرات. ترجع هذه المكالمة مجموعة من العناصر الموجودة. حتى تحصل على عناصر منفصلة ضخمة، تحتاج إلى تشغيلها في الدورة.

إذا كنا نحتاج فقط إلى الحصول على العنصر الأول، فيمكنك الذهاب إلى العنصر الأول من المجموعات التي تم العثور عليها من الكائنات:

var pelement \u003d document.getelementbytagname ("p")؛ Document.write ("SEXT فقرة:" + Pelement.innertext)؛

الحصول على عنصر في الفصل:

اختيار محدد CSS:

يعتبر Expression.Query Expression (". annotation P") عنصرا يتوافق مع المحدد. إذا كانت الصفحة تحتوي على العديد من العناصر المقابلة للمحدد، فستحدد الطريقة الأولى. نتيجة لذلك، سوف يسحب المتصفح:

المادة التوضيحي المادة الأولى الفقرة الثانية نص محدد: المادة مجردة

للحصول على جميع العناصر الموجودة على المحدد، يمكنك مثل طريقة المستند.QuerySectorAll، والتي ترجع مجموعة العناصر الموجودة:

إخراج المتصفح:

مقالة التوضيحية الفقرة الأولى الفقرة الثانية محدد النص 0: الفقرة الأولى محدد النص 1: الفقرة الثانية

في هذا الدرس، نعتبر أساليب كائن المستند، والتي تم تصميمها للبحث عن عقدة أو مجموعة من العقد في جميع الوثائق. بالإضافة إلى طرق كائن العقدة (العقدة) التي تؤدي إجراءات مماثلة، ولكن بالفعل بين الشركات التابعة لها.

الأساليب المصممة للبحث عن عقدة أو مجموعة من العقد في الشجرة

في الدرس السابق، استعرضنا الخصائص التي يمكننا من خلالها التحرك حول الشجرة والعثور على العقد التي نحتاجها. ولكن، فإن البحث عن العقد بممتلكاتهم يكون الاحتلال صعبا للغاية وغير فعالة. لذلك، للعثور على عقدة في شجرة، يستخدم مطورو الويب عادة أساليب مصممة خصيصا للوثيقة أو كائن العقدة (العقدة).

getelementbyid ()

تقوم طريقة GetEllementByID (ESTERID) بإرجاع عنصر في مستند يحتوي على المعرف المحدد (ID \u003d "ElementID")، ككائن عقدة (عقدة). إذا كان العنصر مع المعرف المحدد غير موجود، فستظهر هذه الطريقة قيمة فارغة.

وفقا للمعيار، لا يمكنك الحصول على العديد من العناصر ذات قيمة سمة الهوية نفسها، I.E. يجب أن تكون قيمة المعرف فريدة من نوعها داخل وثيقة واحدة. ومع ذلك، إذا كان لديك العديد من العناصر مع المعرف المحدد في المستند، فسترجع طريقة GetEllementByid () العنصر الأول الموجود.

document.getelementbyid (enterid)

تحتوي هذه الطريقة على معلمة واحدة مطلوبة (ElementID)، وهي سلسلة تحتوي على قيمة السمة لمعرف العنصر الذي تريد تلقيه.

على سبيل المثال، قم بتغيير لون نص العنصر الذي يحتوي على معرف \u003d "Namearticie".

عنوان المقال

• 1 نقطة
• 2 نقطة
• 3 نقاط

طريقة GetellementByclassName ()

إرجاع طريقة GetellementsByclassName (Classname) جميع العناصر الموجودة في المستند (للوثيقة) أو بين العقدات الفردية (للعقدة) مع اسم الفئة المحدد (فئة \u003d "Classname")، ككائن Nodelist. بمعنى آخر، تقوم هذه الطريقة بإرجاع كائن Nodelist، وهو عبارة عن مجموعة من العناصر (العقد) التي تحتوي على اسم الفصل المحدد في طريقة المعلمة.

للحصول على عدد العقد الموجودة، يجب عليك استخدام خاصية Nodelist Lower. ومن أجل نقل جميع العقد في المجموعة، يمكنك استخدام الدورة التالية:

Var ErementsList \u003d document.getelementbyclassname ("قائمة")؛ ل (var i \u003d 0؛ أنا

document.getelementByclassName (Classname)؛
عقدة (عقدة) .gelementByclassName (Classname)؛

تحتوي هذه الطريقة على معلمة واحدة مطلوبة (Classname)، وهي سلسلة تحتوي على اسم فئة العناصر التي تريد تلقيها. إذا كنت ترغب في الحصول على عناصر مع العديد من الفئات المحددة، فيجب تقسيمها إلى معلمة هذه الطريقة باستخدام مساحة. على سبيل المثال، احصل على مجموعة من العقد التي تحتوي على فصول دراسية و Class2:

document.getelementbyclassname ("classl class2")؛

على سبيل المثال، قم بتغيير لون خلفية العناصر التي تحتوي على فئة قائمة:

عنوان المقال

• 1 نقطة
• 2 نقطة
• 3 نقاط

• 1 نقطة
• 2 نقطة

على سبيل المثال، للحصول على مجموعة من العناصر (العقد) وجود فئة قائمة. بجانب الحصول على 2 عقدة في هذه المجموعة، أي. عقدة لها فهرس 1. بعد ذلك، قم بتغيير لون الخلفية للعقدة التي تم الحصول عليها.

// احصل على مجموعة من العناصر باستخدام قائمة العناصر var var \u003d document.getelementbyclassname ("قائمة")؛ // الحصول على 2 العقد في المجموعة فار الثانية \u003d ersementlist؛ / / قم بتغيير لون الخلفية للقائمة الثانية.Style.backgroundColor \u003d عنصر "أحمر"؛

طريقة Getellementbytagname ()

تقوم طريقة Getellementbytagname (Tagname) بإرجاع جميع العناصر الموجودة في المستند (للوثيقة) أو بين العقدات الفردية (للعقدة) مع العلامة المحددة، في شكل كائن Nodelist (مجموعة العقد). يتم تنفيذ عقدة محددة في المجموعة بواسطة الفهرس. عد العناصر (العقد) في المجموعة تبدأ مع 0.

document.getelementbytagname (TAGNAME)؛
عقدة (عقدة) .gelementbytagname (TAGNAME)؛

تحتوي هذه الطريقة على معلمة إلزامية واحدة (TAGNAME)، وهي سلسلة تحتوي على اسم العلامة المشار إليها بأحرف كبيرة. إذا قمت بتحديد سلسلة تحتوي على Starrel ("*") كمعلمة، فسنحصل على جميع العناصر الموجودة في المستند (لكائن المستند) أو جميع عناصر الأطفال للعقدة (لكائن العقدة).

للحصول على عدد العقد الموجودة في المجموعة، يجب عليك استخدام خاصية Nodelist Lower. ومن أجل نقل جميع العقد في المجموعة، يمكنك استخدام الدورة التالية:

Var Erementslist \u003d document.getelementbytagname ("LI")؛ ل (var i \u003d 0؛ أنا

على سبيل المثال، قم بتغيير لون خلفية عناصر LI:

عنوان المقال

• 1 نقطة
• 2 نقطة
• 3 نقاط

على سبيل المثال، احصل على مجموعة من عناصر UL. بعد ذلك، احصل على عقدة واحدة في هذه المجموعة، أي عقدة لها مؤشر 0. بعد ذلك، للحصول على مجموعة من الشركات التابعة لي لهذه العقدة. وفي الختام، قم بتغيير حجم الخط لكل عنصر في هذه المجموعة.

// الحصول على مجموعة من العناصر ulemes ul elementul \u003d document.getelementbytagname ("ul")؛ // الحصول على 1 عقدة في هذه المجموعة var elementul \u003d elementul؛ // احصل على مجموعة من عناصر الأطفال Li Elementul Var Elemesli \u003d Elementul.gelementsli \u003d Elementul.getelementbytagname ("LI")؛ // فضفاض كل العناصر في (var i \u003d 0؛ أنا

طريقة GetelementByname ()

تتم إرجاع الأسلوب GetLementByname (الاسم) جميع العناصر الموجودة في المستند التي تحتوي على الاسم المحدد (قيمة اسم سمة الاسم)، ككائن Nodelist (مجموعة العقد).

تتم إضافة العناصر (العقد) إلى المجموعة بالترتيب الذي توجد فيه في الشجرة. يتم تنفيذ عقدة محددة في المجموعة بواسطة الفهرس. عد العناصر (العقد) في المجموعة تبدأ مع 0.

Var Erementslist \u003d document.getelementbyname ("الهاتف")؛ ل (var i \u003d 0؛ أنا

ملاحظة: في HTML5، يتم التعرف على سمة الاسم بمثابة عفا عليها الزمن، وقد تم استبدالها لمعظم سمة معرف العناصر.

document.getelementbyname (الاسم)

هذه الطريقة تحتوي على معلمة إلزامية واحدة (الاسم)، وهي سلسلة تحتوي على قيمة اسم سمة الاسم.

على سبيل المثال، قم بتغيير لون الخلفية للعناصر التي تتمتع بسمة الاسم مع قيمة الهاتف (الاسم \u003d "الهاتف"):

هاتف: هاتف آخر:

طريقة Queryselector ()

تقوم طريقة Queryselector () بإرجاع العنصر الأول الموجود في المستند (للوثيقة) أو بين العقد الفرعية (للعقدة)، والذي يتوافق مع محدد CSS المحدد كمعلمة لهذه الطريقة. إذا كان هناك عنصر يتوافق مع محدد CSS، فإن هذه الطريقة ترجع NULL.

document.QuerySector (CSSSSSelector)
node.queryector (csssselector)

تحتوي هذه الطريقة على معلمة إلزامية واحدة (CSSSSelector)، وهي سلسلة تحتوي على محدد CSS، وفقا لما يتم تحديد العنصر.

على سبيل المثال، قم بتغيير لون نص العنصر الأول الذي تم العثور عليه المقابلة #Main P Selector:

على سبيل المثال، للحصول على مجموعة من عناصر Div في المستند. بعد ذلك، احصل على عقدة واحدة في هذه المجموعة، أي عقدة لها فهرس 0. بالنسبة لهذه العقدة، تم العثور على العنصر الأول، الذي يتوافق مع محدد CSS H1 + P، بين العقد الفرعية. بعد ذلك، قم بتغيير حجم الخط لهذا البند.

// الحصول على مجموعة من div var elementdiv \u003d document.getelementbytagname العناصر ("DIV")؛ // احصل على عقدة في هذه المجموعة Var ElementDiv \u003d ElemesDiV؛ // احصل على عقدة ص، الموجودة مباشرة بعد عقدة H1 // عقدة البحث لإنتاجها بين الشركات التابعة للعقدة، والتي يتم تخزينها في المتغير ElementDiv Var Elementp \u003d ElementDiv.QuerySelector ("H1 + P")؛ / / تغيير حجم خط العنصر Elementp.style.fontsize \u003d "30PX"؛

Querysectorall ()

ترجع الأسلوب QuerySelectoral () جميع العناصر الموجودة في المستند (للوثيقة) أو بين العقدات الفردية (للعقدة)، والتي تتوافق مع محدد CSS المحدد كمعلمة من هذه الطريقة، ككائن Nodelist (مجموعة العقد) وبعد ينفذ النداء إلى العقد في المجموعة بموجب المؤشر. عد العناصر (العقد) في المجموعة تبدأ مع 0.

للحصول على عدد العقد الموجودة، من الضروري استخدام خاصية Nodelist الطول. ومن أجل نقل جميع العقد في المجموعة، يمكنك استخدام الدورة التالية:

Var ErementsList \u003d Document.QuerySectorAll ("# Main P")؛ ل (var i \u003d 0؛ أنا

document.querysectorall (cssssselector)؛
عقدة (عقدة) .QuerySectorall (cssssselector)؛

هذه الطريقة تحتوي على معلمة إلزامية واحدة (CSSSSelector)، وهي سلسلة تحتوي على محدد CSS، وفقا للعناصر المحددة. لتحديد محددات متعددة في المعلمة من هذه الطريقة، يجب تقسيمها إلى فاصلة.

على سبيل المثال، قم بتغيير لون نص العناصر المقابلة إلى #Main P محدد:

على سبيل المثال، احصل على عقدة طفل لها سمة معرف بقيمة الشريط الجانبي. تغيير لون خلفية العناصر الفرعية للعقدة التي تم الحصول عليها في الخطوة السابقة:

/ / احصل على عنصر (عقدة)، والذي يحتوي على معرف \u003d "Sidebar" var sidebar \u003d document.getelementbyid ("sidebar")؛ // احصل على مجموعة من العقد المقابلة لمحدد "P" ElementsListP \u003d sidebar.queryselectorall ("p")؛ // فضفاض كل العناصر في (var i \u003d 0؛ أنا

المهمة

كتابة التعليمات البرمجية في JavaScript باستخدام GetEllementByid ()، GetLementsByclassName ()، GetLementsBytagname ()، GetLementsBytagname ()، QuerySelector ()، QuerySelectorAll () للمهام التالية:

1. احصل على جميع العناصر P الموجودة في الكتلة الرئيسية؛
2. احصل على كتلة جانبا الموجودة في حاوية Div؛
3. احصل على كتلة تذييل الصفحة الموجودة في حاوية الجسم.

كل مهمة هي إجراء أكبر قدر ممكن من الطرق المختلفة.