dom : أهم استخداماتها في جافا سكريبت

التقنية

2023-02-04 19:26:00 تم النشر بتاريخ

dom هي اختصار إلى Document Object Model. تمكن المستخدمين من التأثير في كائنات الصفحة دون تحديث الجلسات. تعد الحاجة إلى الوصول إلى عناصر الصفحة عبر dom مهمة جدًا ، خاصةً عندما تتأثر هذه العناصر بلغة برمجة معينة. وإذا نظرنا إلى طريقة JS get Element ، فمن الجيد الوصول إلى بعض الخصائص وعناصر HTML.

تحتوي عناصر HTML على سمات خاصة أو عامة ، وإذا نظرنا إلى أبسط علامات HTML مثل div ، فسنجد أن لها خاصية تسمح لنا بالوصول إليها من خلال طريقة js getElement ، بالتالي إذا قمنا بالوصول إلى اسم العلامة ، ستتأثر محتويات الصفحة أثناء حدث DOM. هناك طرق أخرى ستجدها أكثر ملاءمة للوصول إلى العناصر مثل عنوان معرف فريد ID أو اسم فئة معين.

وإذا قمت بتضمين اسم فئة في أكثر من علامة html. فسيتم تعديل كل تلك العلامات المتعلقة بهذا التعريف وفقًا لما تريد أن تفعله لغة JavaScript.

أنواع dom طريقة getElement

هناك العديد من طرق getElement ، لكنني سأركز على أهم ثلاثة منها:

الحصول على العنصر من خلال id.
حسب Class Name.
الحصول على العنصر من خلال Tag Name.

الحصول على العنصر من خلال id

يمكنك الوصول إلى طريقة getElement الأولى عن طريق معرّف ووجدت أن هذا النوع من طرق الاتصال هو الأكثر شيوعًا بين المطورين. وربما يكون السبب في ذلك أن الجميع يبدأ في JavaScript عبر document.GetElementById وإليك مثال عن كيفية استخدامه:

<html>
   <h3 id = "data"></h3>
</html>

<script>
    var testElement = document.getElementById("data").innerHTML = "Test First Get Element Method.";
</script>

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

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

حسب Class Name

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

<html>
   <h3 class = "data"></h3>
   
    <div class = "data"></div>
   

</html>

<script>
   var testElement = document.getElementsByClassName("data").item(0);
</script>

js getElement عبر اسم الفئة هو الوصول إلى عدد معين من العلامات وربما أيضًا الوصول إلى ترتيبها في الذاكرة من أجل إجراء بعض التغييرات بواسطة CSS أو حتى لإجراء عادي. هناك العديد من الوظائف الموجهة للكائنات التي تعمل في وضع Class Name.

الحصول على العنصر من خلال Tag Name

تسمح لك طريقة js getElement بالوصول إلى بيانات العلامات من خلال اسم العلامة نفسها. على سبيل المثال ، إذا كان لدي أكثر من علامة لدى مقالة واحدة في صفحة HTML ، سيمنحك سطر واحد من JavaScript إمكانية الوصول إلى جميع هذه العلامات التي تحتوي على اسم المقالة ، لذلك سيتم تجذيرها جميعًا كما يلي:

<html>
   <h3></h3>
   
    <div>Hello</div>
     <div>js getElement</div>
      <div>for</div>
       <div>beginners</div>
</html>

<script>
   var elements = document.getElementsByTagName("div");
</script>

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

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

فوائد استخدام DOM

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

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

دوال JavaScript أخرى

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

<body>
<script type="text/javascript">
document.write("<h3>Welcome to javascript Write Method!</h3>");
</script>
</ body >

يكثر تشكيل صفحات HTML باستخدام جافاسكريبت , خاصة عندما يتعلق الأمر بخادم Nodejs. بالتالي تفيد الدالة write في عرض محتويات الصفحة مع ترجمة طبيعة النصوص بداخلها. الجميل في الأمر أنني تمكنت أيضًا من إرفاق بعض العلامات في الكود السابق ، وهذه من أجمل طرق JavaScript.

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

<body>
<script type="text/javascript">
document.write("Hello World 
");
</script>
</ body >

أتذكر تمامًا جودة الكتابة عندما كنت أعمل بلغة C ++ ، والتي تمكنت من خلالها من إنشاء تطبيقات جيدة جدًا. وقد ساعدني ذلك الوسم n في تنسيق بعض النصوص وكان فعالًا في تنظيم الشيفرة. المراجع

JavaScript HTML DOM.

تمت الكتابة بواسطة : محمد

آخر تحديث : 2023-02-04 19:26:52