15 طرق جافا سكريبت للحصول على معالجة DOM لمطوري الويب

var ele = document.querySelector (محدد) ؛

يتم اختيار مع querySelector () يتم تغيير الأسلوب ولونه إلى اللون الأحمر.

 
الفقرة الأولى
 
الفقرة الثانية
 
div واحد
 
الفقرة الثالثة
 
div اثنين
 

 var firstDiv = document.querySelector ('div')؛ firstDiv.style.color = 'red' ؛ 

عرض تفاعلي

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

2. querySelectorAll ()

مختلف querySelector () تقوم بإرجاع المثيل الأول فقط من جميع العناصر المطابقة, querySelectorAll () إرجاع جميع العناصر التي تطابق محدد CSS المحدد.

يتم إرجاع العناصر المطابقة كـ NodeList كائن سيكون كائنًا فارغًا إذا لم يتم العثور على عناصر مطابقة.

بناء الجملة

var eles = document.querySelectorAll (محدد) ؛

• الانقليس - ا NodeList كائن مع جميع عناصر مطابقة كقيم القيم. الكائن فارغ إذا لم يتم العثور على تطابقات.
• منتخب - واحد أو أكثر من محددات CSS ، مثل "#fooId", ".fooClassName", ".class1.class2", أو ".class1 ، .class2"

مثال على الكود

المثال التالي يستخدم نفس HTML كما في السابق. ومع ذلك ، في هذا المثال ، يتم تحديد جميع الفقرات مع querySelectorAll (), واللون الأزرق.

 
الفقرة الأولى
 
الفقرة الثانية
 
div واحد
 
الفقرة الثالثة
 
div اثنين
 

 var فقرات = document.querySelectorAll ('p') ؛ لـ (var p of paragraph) p.style.color = 'blue'؛ 

3. addEventListener ()

أحداث قم بالإشارة إلى ما يحدث لعنصر HTML ، مثل النقر أو التركيز أو التحميل ، والتي يمكننا التفاعل مع JavaScript. يمكننا تعيين وظائف JS ل استمع لهذه الأحداث في العناصر وفعل شيء عندما حدث هذا الحدث.

هناك ثلاث طرق يمكنك تعيين وظيفة لحدث معين.

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

1.  محزر

2.  var btn = document.querySelector ('button') ؛ btn.onclick = فو.

3.  var btn = document.querySelector ('button') ؛ btn.addEventListener ("انقر" ، فو) ؛

طريقة addEventListener () (الحل الثالث) لديه بعض الايجابيات. هذا هو أحدث معيار - السماح بتعيين أكثر من وظيفة كمستمعين للحدث لحدث واحد - ويأتي مع مجموعة مفيدة من الخيارات.

بناء الجملة

ele.addEventListener (evt ، مستمع ، [خيارات]) ؛

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

خيارات	ما يحدث ، عندما يتم تعيينه على صحيح?
أسر	توقف عن ظهور الأحداث ، أي منع استدعاء أي مستمع للحدث لنفس نوع الحدث في أسلاف العنصر.. لاستخدام هذه الميزة ، يمكنك استخدام بناء جملة اثنين: ele.addEventListener (evt ، مستمع ، صحيح) ele.addEventListener (evt ، مستمع ، capture: true) ؛
ذات مرة	يتم استدعاء المستمع فقط في المرة الأولى التي يحدث فيها الحدث ، ثم يتم فصله تلقائيًا عن الحدث ، ولن يتم تشغيله بعد الآن..
مبني للمجهول	لا يمكن إيقاف الإجراء الافتراضي للحدث باستخدام طريقة preventDefault ().

مثال على الكود

في هذا المثال ، نضيف مستمع أحداث النقر يسمى فو, إلى علامة HTML.

انقر فوق لي

 var btn = document.querySelector ('button') ؛ btn.addEventListener ( "فوق"، فو)؛ الدالة foo () alert ('hello') ؛ 

عرض تفاعلي

تعيين فو () وظيفة مخصصة كمستمع حدث لأي من الأحداث الثلاثة التالية: إدخال, انقر أو مرر الفأرة فوق & تشغيل الحدث الذي تم اختياره في حقل الإدخال السفلي من خلال التمرير فوقه أو النقر فوقه أو كتابته.

4. removeEventListener ()

ال removeEventListener () طريقة يفصل مستمع الحدث أضيفت سابقا مع addEventListener () طريقة من الحدث الذي يستمع إليه.

بناء الجملة

ele.removeEventListener (evt ، مستمع ، [خيارات]) ؛

يستخدم نفس بناء الجملة المذكور أعلاه addEventListener () طريقة (باستثناء ذات مرة الخيار المستبعد). يتم استخدام الخيارات لتكون محددة جدًا حول تعريف المستمع المراد فصله.

مثال على الكود

باتباع مثال الكود الذي استخدمناه في addEventListener (), نحن هنا إزالة المستمع الحدث انقر يسمى فو من جزء.

 btn.removeEventListener ( "فوق"، فو)؛

5. createElement ()

ال createElement () طريقة يخلق عنصر HTML جديد باستخدام اسم علامة HTML ليتم إنشاؤه ، مثل 'ع' أو "شعبة".

يمكنك لاحقًا إضافة هذا العنصر إلى صفحة الويب باستخدام مختلف طرق لإدخال DOM, مثل إلحاق الطفل() (انظر لاحقا في هذا المنصب).

بناء الجملة

document.createElement (اسم العلامة)؛

• اسم العلامة - اسم علامة HTML التي ترغب في إنشائها.

مثال على الكود

مع المثال التالي ، يمكنك إنشاء عنصر فقرة جديد:

var pEle = document.createElement ('p')

6. إلحاق الطفل()

ال إلحاق الطفل() طريقة يضيف عنصرا مثل الطفل الأخير إلى عنصر HTML الذي يستدعي هذه الطريقة.

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

بناء الجملة

ele.appendChild (childEle)

• ايلى - عنصر HTML الذي childEle يضاف كطفلها الأخير.
• childEle - تمت إضافة عنصر HTML كآخر تابع لـ ايلى.

مثال على الكود

في هذا المثال ، نقوم بإدراج العنصر كما هو طفل من

عنصر باستخدام إلحاق الطفل() وما سبق ذكره createElement () أساليب.

 var div = document.querySelector ('div')؛ var strong = document.createElement ('strong')؛ strong.textContent = 'Hello'؛ div.appendChild (قوية)؛

عرض تفاعلي

في العرض التوضيحي التفاعلي التالي ، رسائل من #ا إلى # R هي العناصر التابعة لل # الوالدين واحدة, # الوالدين واثنين, و # الوالدين وثلاثة محددات الهوية.

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

7. removeChild ()

ال removeChild () طريقة يزيل عنصر فرعي محدد من عنصر HTML الذي يستدعي هذه الطريقة.

بناء الجملة

ele.removeChild (childEle)

• ايلى - العنصر الرئيسي ل childEle.
• childEle - عنصر الطفل من ايلى.

مثال على الكود

في هذا المثال ، نزيل العنصر أضفنا كطفل إلى

علامة في رمز مثال عن السابق إلحاق الطفل() طريقة.

div.removeChild (قوية)؛

8. replaceChild ()

ال replaceChild () طريقة يستبدل عنصر تابع بعنصر آخر ينتمون إلى العنصر الأصل الذي يستدعي هذه الطريقة.

بناء الجملة

ele.replaceChild (newChildEle، oldChileEle)

• ايلى - العنصر الرئيسي الذي سيتم استبدال الأطفال به.
• newChildEle - عنصر الطفل من ايلى سوف يحل محل oldChildEle.
• oldChildEle - عنصر الطفل من ايلى, سيتم استبداله بـ newChildEle.

مثال على الكود

في هذا المثال العنصر الفرعي تابعة ل

يتم استبدال العنصر الأصل بعنصر تم إنشاؤه حديثًا بطاقة.

 
 مرحبا 

 var em = document.createElement ('em')؛ var strong = document.querySelector ('strong')؛ var div = document.querySelector ('div')؛ em.textContent = 'hi'؛ div.replaceChild (م ، قوي) ؛

9. cloneNode ()

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

بناء الجملة

var dupeEle = ele.cloneNode ([deep])

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

مثال على الكود

في هذا المثال ، نقوم بإنشاء نسخة لـ عنصر مع cloneNode (), ثم نضيفها إلى

علامة كعنصر فرعي مع ما سبق ذكره إلحاق الطفل() طريقة.

كنتيجة ل,

سوف تحتوي على اثنين العناصر ، سواء مع مرحبا سلسلة كمحتوى.

 
 مرحبا 

 var strong = document.querySelector ('strong')؛ var copy = strong.cloneNode (true) ؛ var div = document.querySelector ('div')؛ div.appendChild (نسخة)؛ 

10. insertBefore ()

ال insertBefore () طريقة يضيف عنصر فرعي محدد قبل عنصر فرعي آخر. يتم استدعاء الأسلوب بواسطة العنصر الأصل.

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

بناء الجملة

ele.insertBefore (newEle، refEle)؛

• ايلى - العنصر الرئيسي.
• newEle - عنصر HTML جديد ليتم إدراجه.
• refEle - عنصر فرعي من ايلى قبل ذلك newEle سيتم إدراجها.

مثال على الكود

في هذا المثال ، نقوم بإنشاء جديد عنصر مع بعض النص في الداخل ، وإضافته قبل ال عنصر داخل

عنصر الأصل.

 
 مرحبا 

 var em = document.createElement ('em')؛ var strong = document.querySelector ('strong')؛ var div = document.querySelector ('div')؛ em.textContent = 'hi'؛ div.insertBefore (م ، قوي) ؛ 

عرض تفاعلي

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

11. createDocumentFragment ()

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

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

لماذا لا نضيف عناصر مباشرة إلى شجرة DOM؟ لأن الإدراج دوم يسبب تغييرات التخطيط, وانها عملية متصفح باهظة الثمن منذ إدراج عناصر متعددة نتيجة سيؤدي إلى مزيد من التغييرات التخطيط.

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

بناء الجملة

document.createDocumentFragment ()

مثال على الكود

في هذا المثال ، نقوم بإنشاء صفوف وخلايا متعددة في الجدول createElement () الطريقة ، ثم إضافتها إلى DocumentFragment كائن ، وأخيراً إضافة جزء المستند هذا إلى HTML

باستخدام إلحاق الطفل() طريقة.

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

 var table = document.querySelector ("table") ؛ var df = document.createDocumentFragment ()؛ من أجل (var i = 0 ؛ i<5; i++)  var td = document.createElement("td"); var tr = document.createElement("tr"); td.textContent = i; tr.appendChild(td) df.appendChild(tr);  table.appendChild(df); 

12. getComputedStyle ()

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

بناء الجملة

var style = getComputedStyle (ele، [pseudoEle])

• قلم المدقة - ا CSSStyleDeclaration كائن عاد من الطريقة. انها تحمل جميع خصائص المغلق وقيمها ايلى جزء.
• ايلى - عنصر HTML الذي يتم جلب قيم خصائص CSS له.
• pseudoEle - (اختياري) سلسلة تمثل عنصرًا زائفًا (على سبيل المثال, ':بعد'). إذا تم ذكر ذلك ، فإن خصائص CSS للعنصر الزائف المحدد المرتبط ايلى سيتم إرجاع.

مثال على الكود

في هذا المثال ، نحصل على تنبيه ونحسبه عرض قيمة أ

عنصر باستخدام getComputedStyle () طريقة.

 var style = getComputedStyle (document.querySelector ('div')) ؛ تنبيه (style.width)؛ 

13. على SetAttribute ()

ال على SetAttribute () طريقة سواء يضيف سمة جديدة لعنصر HTML ، أو بتحديث القيمة سمة موجودة بالفعل.

بناء الجملة

ele.setAttribute (الاسم ، القيمة) ؛

• ايلى - عنصر HTML الذي يتم إضافة سمة إليه ، أو أي سمة يتم تحديثها.
• اسم - اسم السمة.
• القيمة - قيمة السمة.

مثال على الكود

في هذا المثال ، نضيف contenteditable السمة إلى

من خلال الاستفادة من على SetAttribute () الطريقة ، والتي سوف تتحول محتواها للتحرير.

مرحبا

 var div = document.querySelector ('div')؛ div.setAttribute ( 'contenteditable "،") 

14. getAttribute ()

ال getAttribute () طريقة إرجاع قيمة سمة محددة ينتمون إلى عنصر HTML معين.

بناء الجملة

ele.getAttribute (اسم)؛

• ايلى - عنصر HTML الخاص بالسمة مطلوب.
• اسم - اسم السمة.

مثال على الكود

في هذا المثال ، ننبه قيمة contenteditable السمة التي تنتمي إلى

عنصر بمساعدة getAttribute () طريقة.

مرحبا

 var div = document.querySelector ('div')؛ تنبيه (div.getAttribute ( 'contenteditable')) 

15. removeAttribute ()

ال removeAttribute () طريقة يزيل سمة معينة عنصر HTML معين.

بناء الجملة

ele.removeAttribute (اسم)؛

• ايلى - عنصر HTML الذي سيتم حذف السمة الخاصة به.
• اسم - اسم السمة.

مثال على الكود

في هذا المثال ، نزيل contenteditable السمة من

جزء. نتيجة لذلك ، فإن

لن تكون قابلة للتحرير بعد الآن.

مرحبا

 var div = document.querySelector ('div')؛ div.removeAttribute ( 'contenteditable')؛ 

15 درسًا من كتاب فن الحرب يعلمك بالفوز في معارك الحياة

15 مكتبات Lightbox للحصول على استجابة المحمول

15 أفكار لشراء أو بناء مكتب الدائمة الكمال

المادة التالية

15 الإضافات مسج لجعل عناصر لزجة الذكية

المقال السابق

15 فيديوهات ملهمة لعرض بدء التشغيل لأصحاب المشاريع