كيف يمكنني تنسيق عناصر DOM باستخدام جافاسكربت

Mohamed Lamin Mahmoudi · 1 يوليو 2022

لدي عنصر div وله كلاس main

<div class="main">
</div>
<div class="col">
  <ul class="lis">
    <li data-color="red" id="red" class="active"></li>
    <li data-color="blue" id="blue"></li>
    <li data-color="green" id="green"></li>
    <li data-color="black" id="black"></li>
  </ul>

</div>

   <script src="BOM.js"></script>
    <script src="min.js"></script>
</body>

عندما أجلبه في ملف javaScript بالطريقة التالية وأطبعه يظهر لي العنصر لكن لا أستطيع أن أطبق عليه اي عملية مثل التنسيقات

let mai =document.querySelector(".main");
console.log(mai);
//mai.style.

ثانيا عندما أجلبه عبر getElementByclassName وأطبعه في الكونسول يظهر لي بأنه HtmlConnectin

ما الفرق بين getElementByclassName و querySelector

تم التعديل في 1 يوليو 2022 بواسطة Hassan Hedr
توضيح العنوان

Hassan Hedr · 1 يوليو 2022

تأكد من عدم وجود عنصر آخر يحمل الصنف main، في هذه الحالات يفضل استخدام معرف id بدلًا من صنف class، وذلك لأن المقصود هو وجود عنصر واحد من هذا النوع ضمن الصفحة، والأفضل أيضًا استخدام العنصر <main> مباشرةً، يمكنك التأكد من عدم وجود عناصر مشابهة عبر عرض طول مصفوفة التي تطابق الاستعلام التالي، ويجب أن يكون طولها واحد، نفذ الأمر التالي ضمن console بعد تحميل الصفحة وذلك للتأكد أيضًا من عدم وجود شيفرات جافاسكريبت تعدل على شجرة DOM وتؤثر على ذلك :

console.log(document.querySelectorAll(".main").length)

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

const main =document.querySelector(".main");
main.style.color = ...;

أو إضافة وإزالة أصناف على العنصر كالتالي:

main.classList.add('...')
// أو
main.classList.remove('...')

يمكنك الاستفادة من قراءة المقال التالي:

Mohamed Lamin Mahmoudi · 1 يوليو 2022

بتاريخ منذ ساعة مضت قال Hassan Hedr:
تأكد من عدم وجود عنصر آخر يحمل الصنف main، في هذه الحالات يفضل استخدام معرف id بدلًا من صنف class، وذلك لأن المقصود هو وجود عنصر واحد من هذا النوع ضمن الصفحة، والأفضل أيضًا استخدام العنصر <main> مباشرةً، يمكنك التأكد من عدم وجود عناصر مشابهة عبر عرض طول مصفوفة التي تطابق الاستعلام التالي، ويجب أن يكون طولها واحد، نفذ الأمر التالي ضمن console بعد تحميل الصفحة وذلك للتأكد أيضًا من عدم وجود شيفرات جافاسكريبت تعدل على شجرة DOM وتؤثر على ذلك :
console.log(document.querySelectorAll(".main").length)
بعد التأكد من ذلك يمكنك جلب العنصر والتعديل عليه كالتالي:
const main =document.querySelector(".main");
main.style.color = ...;
أو إضافة وإزالة أصناف على العنصر كالتالي:
main.classList.add('...')
// أو
main.classList.remove('...')
يمكنك الاستفادة من قراءة المقال التالي:

تأكدت من طول المصفوفة وهو بالفعل واحد ثم غيرت الكلاس بال id لكن لم أستطع أن أستعمل التنسيق على العنصر بعد جلبه أين يكون المشكل ؟؟؟

Hassan Hedr · 1 يوليو 2022

بتاريخ 31 دقائق مضت قال Mohamed Lamin Mahmoudi:

تأكدت من طول المصفوفة وهو بالفعل واحد ثم غيرت الكلاس بال id لكن لم أستطع أن أستعمل التنسيق على العنصر بعد جلبه أين يكون المشكل ؟؟؟

بعد جلب أي عنصر من الصفحة باستخدام querySelector مثلًا، يمكن التعديل على خصائص الكائن style له وسيتم تعديل التنسيقات بكل تأكيد، قد يكون الخطأ لديك في الخاصية التي تحاول تغييرها أن يكون اسمها خاطئ مثلًا

كيف يمكنني تنسيق عناصر DOM باستخدام جافاسكربت

السؤال

Mohamed Lamin Mahmoudi

3 أجوبة على هذا السؤال

Recommended Posts

Hassan Hedr

Mohamed Lamin Mahmoudi

Hassan Hedr

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية