كيفية البدء بسرعة مع VUE3.0: أدخل التعلم
التوصيات ذات الصلة: برنامج JavaScript التعليمي
1. احصل علىلعناصر التشغيل
يوفر كائن المستند بعض الأساليب للعثور على العناصر بناءً على معرفهم واسمهم وفئتهم، احصل على عنصر العملية من خلال السمات وأسماء العلامات.
ملخص:
فيما عدا أن الأسلوب document.getElementById() يُرجع العنصر بالمعرف المحدد، فإن الطرق الأخرى تُرجع مجموعة تلبي المتطلبات. للحصول على أحد الكائنات، يمكنك الحصول عليه بالرمز المنخفض الذي يبدأ من 0 افتراضيًا.
يوفر كائن المستند بعض الخصائص التي يمكن استخدامها للحصول على العناصر الموجودة في المستند. على سبيل المثال، احصل على كافة علامات النموذج وعلامات الصور وما إلى ذلك.
لاحظ أن
عناصر العملية التي تم الحصول عليها من خلال طرق كائن المستند وخصائص كائن المستند تمثل نفس الكائن. على سبيل المثال، document.getElementsByTagName('body')[0] يتطابق مع document.body.
أساليب كائن المستند الجديدة في HTML5
من أجل تسهيل الحصول على عناصر للتشغيل، يضيف HTML5 طريقتين جديدتين إلى كائن المستند، وهما querySelector() وquerySelectorAll().
بما أن هاتين الطريقتين تستخدمان بنفس الطريقة، فإن ما يلي يستخدم طريقة document.querySelector() كمثال.
في عمليات DOM، توفر كائنات العناصر أيضًا طرقًا للحصول على عناصر محددة داخل العنصر. الطريقتان الشائعتان الاستخدام هما getElementsByClassName() و getElementsByTagName(). يتم استخدامها بنفس طريقة استخدام الأساليب التي تحمل الاسم نفسه في كائن المستند.
بالإضافة إلى ذلك، يوفر كائن العنصر أيضًا سمة الأطفال للحصول على العناصر الفرعية للعنصر المحدد. على سبيل المثال، احصل على العناصر الفرعية لـ ul في المثال أعلاه.
كائن HTMLCollection
الفرق بين كائنات HTMLCollection وNodeList:
نصيحة: بالنسبة للمجموعة التي يتم إرجاعها بواسطة طريقة getElementsByClassName()، يمكن تحويل طريقة getElementsByTagName() والسمة الفرعية والمعرف والاسم تلقائيًا إلى سمة.
2. محتوى العنصر
في JavaScript، إذا كنت تريد العمل على محتوى العنصر الذي تم الحصول عليه، فيمكنك استخدام الخصائص والأساليب التي يوفرها DOM.
أعط مثالا
تنفيذ التعليمات البرمجية
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "UTF-8">
<title>عمليات محتوى العنصر</title>
</الرأس>
<الجسم>
<p معرف = "مربع">
الفقرة الأولى...
<ص>
الفقرة الثانية...
<a href="http://www.example.com">الثالث</a>
</ص>
</ص>
<النص البرمجي>
var box = document.getElementById('box');
console.log(box.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
</script>
</الجسم>
</html> لاحظ أن
مشكلات توافق المتصفح قد تحدث عند استخدام سمة النص الداخلي. لذلك، يوصى
باستخدام InnerHTML للحصول على محتوى النص للعناصر أو تعيينه قدر الإمكان أثناء التطوير. في الوقت نفسه، هناك بعض الاختلافات بين سمة InnerHTML والأسلوب document.write() في إعداد المحتوى. يعمل الأول على العنصر المحدد، بينما يقوم الأخير بإعادة بناء صفحة مستند HTML بأكملها. لذلك يجب على القراء اختيار طريقة التنفيذ المناسبة وفقًا للاحتياجات الفعلية أثناء التطوير
[الحالة] تغيير حجم الصندوق
أفكار تنفيذ التعليمات البرمجية :
① اكتب HTML وقم بتعيين حجم الصفحة.
② أكمل تغيير حجم المربع وفقًا لعدد نقرات المستخدم.
③ عندما يكون عدد النقرات رقمًا فرديًا، يصبح المربع أكبر؛ وعندما يكون عدد النقرات رقمًا زوجيًا، يصبح المربع أصغر.
تنفيذ التعليمات البرمجية
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "UTF-8">
<نمط>
.box{width:50px;height:50px;background:#eee;margin:0 auto;}
</نمط>
</الرأس>
<الجسم>
<p id="box" class="box"></p>
<النص البرمجي>
var box = document.getElementById('box');
var i = 0; // احفظ عدد المرات التي ينقر فيها المستخدم على المربع box.onclick = function() { // التعامل مع حدث النقر للمربع ++i;
if (i % 2) { // عدد النقرات هو رقم فردي ويصبح أكبر this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = 'big';
} else { // عدد النقرات هو رقم زوجي ويصبح أصغر this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = 'small';
}
};
</script>
</الجسم>
</html> 3. سمات العنصر
في DOM، من أجل تسهيل حصول JavaScript على السمات ذات الصلة لعنصر HTML المحدد وتعديلها واجتيازها، يتم توفير سمات وأساليب التشغيل.
يمكنك استخدام سمة السمات للحصول على كافة سمات عنصر HTML، بالإضافة إلى عدد جميع السمات وطولها.
أعط مثالا
تنفيذ التعليمات البرمجية
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "UTF-8">
<title>عمليات سمات العنصر</title>
<نمط>
.رمادي {الخلفية: #CCC؛}
#سميك{font-weight: أكثر جرأة؛}
</نمط>
</الرأس>
<الجسم>
<p>كلمة اختبارية.</p>
<النص البرمجي>
// احصل على العنصر p var ele = document.getElementsByTagName('p')[0];
// ① إخراج عدد سمات عنصر ele الحالي console.log('عدد السمات قبل العملية: ' + ele.attributes.length);
// ② أضف سمات إلى ele وتحقق من عدد السمات ele.setAttribute('align', 'center');
ele.setAttribute('title', 'نص اختباري');
ele.setAttribute('class', 'gray');
ele.setAttribute('id', 'thick');
ele.setAttribute('style', 'font-size:24px;border:1px Solid green;');
console.log('عدد السمات بعد إضافة السمات: ' + ele.attributes.length);
// ③ احصل على قيمة سمة النمط لـ ele console.log('احصل على قيمة سمة النمط:' + ele.getAttribute('style'));
// ④ احذف سمة النمط الخاصة بـ ele وتحقق من السمات المتبقية ele.removeAttribute('style');
console.log("عرض جميع الخصائص:");
for (var i = 0; i < ele.attributes.length; ++i) {
console.log(ele.attributes[i]);
}
</script>
</الجسم>
</html> 4.
مراجعة نمط العنصر: قم بتعديل النمط من خلال تشغيل سمات العنصر.
بناء جملة نمط العنصر: style.Attribute name.
المتطلب: تحتاج إلى إزالة الواصلة "-" في اسم نمط CSS وتكبير الحرف الأول الثاني باللغة الإنجليزية.
مثال: لتعيين لون الخلفية، يجب تغيير لون الخلفية إلى لون الخلفية في عملية سمة النمط.
لاحظ أن
النمط العائم في CSS يتعارض مع الكلمات المحجوزة في JavaScript، وأن المتصفحات المختلفة لها حلول مختلفة
. على سبيل المثال، يمكن لـ IE9-11 وChrome وFireFox استخدام "float" و"cssFloat"، ويستخدم متصفح Safari "float"، ويستخدم IE6~8 "styleFloat".
سؤال: يمكن أن يحتوي العنصر على محددات فئات متعددة. كيفية تشغيل قائمة المحددات أثناء التطوير؟
الحل الأصلي: استخدم سمة className لكائن العنصر للحصول على النتيجة، والنتيجة التي تم الحصول عليها هي نوع حرف، ثم قم بمعالجة السلسلة وفقًا للموقف الفعلي.
الطريقة التي يوفرها HTML5: قائمة محدد الفئة لعنصر classList الجديد (للقراءة فقط).
على سبيل المثال: إذا كانت قيمة فئة عنصر p هي "عنوان قائمة التنقل لرأس الصندوق"، فكيف يمكن حذف الرأس؟
حل HTML5: العنصر p object.classList.toggle("header");
على سبيل المثال
تنفيذ التعليمات البرمجية
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "UTF-8">
<title>استخدام قائمة الفئات</title>
<نمط>
.بج {الخلفية: #CCC؛}
.قوي {حجم الخط: 24 بكسل؛ اللون: أحمر؛}
.ناعم {الارتفاع: 30 بكسل؛ العرض: 120 بكسل؛ نصف القطر الحدودي: 10 بكسل؛}
</نمط>
</الرأس>
<الجسم>
<ul>
<li>بي إتش بي</li>
<li class="bg">جافا سكريبت</li>
<li>سي++</li>
<li>جافا</li>
</ul>
<script> // احصل على عنصر li الثاني var ele = document.getElementsByTagName('li')[1]; // إذا لم يكن هناك فئة قوية في عنصر li، أضف if (!ele.classList.contains('strong ' )) { ele.classList.add('strong'); } // إذا لم يكن هناك فئة سلسة في عنصر li، فأضفها إذا تم حذفها، ele.classList.toggle('smooth'); log('أضف النمط وتبديله بعد:'); console.log(ele </script>);
<النص البرمجي>
ele.classList.remove('bg');
console.log('بعد الحذف:');
console.log(ele);
</script>
</الجسم>
</html> بالإضافة إلى ذلك، توفر سمة classList أيضًا العديد من أساليب التشغيل والخصائص الأخرى ذات الصلة.
5. [الحالة] تأثير تبديل شريط علامات التبويب
أفكار تنفيذ التعليمات البرمجية :
① اكتب HTML لتصميم هيكل ونمط شريط علامات التبويب، حيث تساوي الفئة الحالية للإشارة إلى علامة التبويب المعروضة حاليًا، والافتراضي هو علامة التبويب الأولى.
② احصل على جميع العلامات ومحتوى العرض المطابق للعلامات.
③ اجتياز حدث تمرير الماوس وإضافته لكل تسمية في وظيفة معالجة الحدث، اجتياز كل محتوى العرض المطابق للملصق، عندما ينزلق الماوس فوق الملصق، أضف التيار من خلال طريقة add () الخاصة بـ classList، وإلا استخدمه طريقة إزالة () تتحرك خارج التيار.
تنفيذ التعليمات البرمجية
<!DOCTYPE html>
<أتش تي أم أل>
<الرأس>
<ميتا محارف = "UTF-8">
<title>تأثير تبديل شريط علامات التبويب</title>
<نمط>
.tab-box{width:383px;margin:10px;border:1px Solid #ccc;border-top:2px Solid #206F96;}
.tab الرأس {الارتفاع: 31px؛}
.tab-head-p{width:95px;height:30px;float:left;border-bottom:1px Solid #ccc;border-right:1px Solid #ccc;background:#206F96;line-height:30px;text- محاذاة: المركز؛ المؤشر: المؤشر؛ اللون: #fff؛}
.tab-head .current{background:#fff;border-bottom:1px Solid #fff;color:#000;}
.tab-head-r{border-right:0;}
.tab-body-p {display:none;margin:20px 10px;}
.tab-body .current{display:block;}
</نمط>
</الرأس>
<الجسم>
<p class="tab-box">
<p class="tab-head">
<p class="tab-head-pcurrent">علامة التبويب الأولى</p>
<p class="tab-head-p">علامة التبويب 2</p>
<p class="tab-head-p">علامة التبويب الثالثة</p>
<p class="tab-head-p tab-head-r">علامة التبويب الرابعة</p>
</ص>
<!--jkdjfk?-->
<p class="tab-body">
<p class="tab-body-p current"> 1 </p>
<p class="tab-body-p"> 2 </p>
<p class="tab-body-p"> 3 </p>
<p class="tab-body-p"> 4 </p>
</ص>
</ص>
<النص البرمجي>
// الحصول على كافة كائنات عناصر علامة التبويب في شريط علامات التبويب var tabs = document.getElementsByClassName('tab-head-p');
// الحصول على كافة كائنات المحتوى في شريط علامات التبويب var ps = document.getElementsByClassName('tab-body-p');
for (var i = 0; i < tabs.length; ++i) { // اجتياز كائن العنصر tabs[i].onmouseover = function() { // أضف حدث تمرير الماوس إلى كائن عنصر العلامة for ( var i = 0; i < ps.length; ++i) { // اجتياز كائن عنصر المحتوى لشريط علامات التبويب if (tabs[i] == this) { // عرض عنصر li ps[i] الموجود بالماوس الحالي انزلق فوق .classList.add('current');
tabs[i].classList.add('current');
} else { // إخفاء عناصر li الأخرى ps[i].classList.remove('current');
tabs[i].classList.remove('current');
}
}
};
}
</script>
</الجسم>
</html> التوصيات ذات الصلة: برنامج تعليمي لجافا سكريبت
ما ورد أعلاه هو المحتوى التفصيلي لعمليات عناصر HTML الموضحة بالتفصيل من خلال أمثلة JavaScript. لمزيد من المعلومات، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع php الصيني!
