الصفحة الرئيسية/ التقنية / dom : أهم استخداماتها في جافا سكريبت

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


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

for Large for Mobile

dom هي اختصار إلى Document Object Model. تمكن المستخدمين من التأثير في كائنات الصفحة دون تحديث الجلسات.

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

وخاصةً عندما تتأثر هذه العناصر بلغة برمجة ما.

وإذا ما نظرنا إلى طريقة JS get Element فقد بات من الممكن الوصول إلى بعض الخصائص وعناصر HTML.

تحتوي عناصر HTML على سمات خاصة أو عامة على سبيل المثال فإن أبسط علامات HTML مثل div تمتلك خاصية يمكن الوصول إليها عبر جافا سكريبت.

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

هناك طرق أخرى أكثر ملاءمة للوصول إلى العناصر مثل عنوان معرف فريد ID أو اسم فئة محدد.

 

 

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

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

 

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

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

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

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

  في طبيعة الحال فقد تم إضافة قيمة ومن ثم خضعت لتأثير من عناصر js getElement.

 

حسب Class Name

أفضل مزايا هذه الطريقة هو الوصول إلى مجموعة متكاملة من علامات html التي تحتوي على نفس اسم الفئة.

والتي يمكن من خلالها أيضًا التحكم ببعض خصائص CSS من خلال JavaScript.

فيما يلي مثال على كيفية استخدامها :

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

</html>

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

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

هناك العديد من الوظائف الموجهة للكائنات التي تعمل في وضع Class Name.  

 

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

تسمح طريقة js getElement بالوصول إلى بيانات العلامات من خلال اسم العلامة نفسها.

على سبيل المثال إذا كان لدينا أكثر من علامة لدى محتوى واحد في صفحة HTML وأردنا التأثير على أكثر من وسم.

 

<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

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

 

دوال جافا سكريبت أخرى

لغة JavaScript لا تقتصر فقط على استخدام js getElement حيث أن هناك أيضًا بعض المهام الأخرى مثل طريقة write.

وهي طريقة تتيح للمطور إضافة نص من نوع string دون استدعاء أي علامة موجودة مسبقًا.

على سبيل المثال يدل الكود التالي على كتابة وسم HTML بواسطة لغة  JavaScript  :

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

يكثر تشكيل صفحات HTML باستخدام جافاسكريبت وخاصة عندما يتعلق الأمر بخادم Nodejs.

يمكن أن تفيد الدالة write في عرض محتويات الصفحة مع قراءة كاملة حول النصوص التي تحتويها.

كما أن وظيفة write  تتيح أيضا إرفاق بعض العلامات التي يمكن الوصول لها من خلال أجاكس.

والتي يتم الاعتماد عليها في الوظائف المعقدة من jQuery.

 

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

 

المراجع
  1. JavaScript HTML DOM.

وقت النشر : 2023-02-04 19:26:00 ·

1    التصنيفات






2    مقالات من التقنية

يعتمد هذا الموقع على عرض الإعلانات في تحقيق الدخل ، نشكر تفهمكم الدائم ونتمنى لكم قضاء وقت رائع ... وشكراً :D .