دروس جافا سكريبت DOM مع مثال

ما هو DOM في جافا سكريبت؟

يمكن لـ JavaScript الوصول إلى جميع العناصر الموجودة في صفحة الويب باستخدام نموذج كائن المستند (DOM). في الواقع، يقوم متصفح الويب بإنشاء DOM لصفحة الويب عند تحميل الصفحة. يتم إنشاء نموذج DOM كشجرة من الكائنات مثل هذا:

DOM في جافا سكريبت

كيفية استخدام DOM والأحداث

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

getElementById، مثال HTML الداخلي

  1. getElementById: للوصول إلى العناصر والسمات التي تم تعيين معرفها.
  2. InnerHTML: للوصول إلى محتوى العنصر.

جرب هذا المثال بنفسك:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1 id="one">Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p>This is the technology section.</p>
  <script type="text/javascript">
		var text = document.getElementById("one").innerHTML;
		alert("The first heading is " + text);
  </script>
</body>
</html>

مثال على getElementsByTagName

getElementsByTagName: للوصول إلى العناصر والسمات باستخدام اسم العلامة. هذه الطريقة سوف ترجع مجموعة لجميع العناصر التي لها نفس اسم العلامة.

جرب هذا المثال بنفسك:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is the welcome message.</p>
  <h2>Technology</h2>
  <p id="second">This is the technology section.</p>
  <script type="text/javascript">
	var paragraphs = document.getElementsByTagName("p");
    alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
    document.getElementById("second").innerHTML = "The orginal message is changed.";
  </script>
</body>
</html>

مثال معالج الأحداث

  1. createElement: لإنشاء عنصر جديد
  2. RemoveChild: إزالة عنصر
  3. يمكنك إضافة ملف معالج الأحداث لعنصر معين مثل هذا:
document.getElementById(id).onclick=function()
{
    lines of code to be executed
}

OR

document.getElementById(id).addEventListener("click", functionname)

جرب هذا المثال بنفسك:

<html>
<head>
	<title>DOM!!!</title>
</head>
<body>
  <input type="button" id="btnClick" value="Click Me!!" />
  <script type="text/javascript">
	document.getElementById("btnClick").addEventListener("click", clicked);
    function clicked()
    {
   		 alert("You clicked me!!!");
    }	
  </script>
</body>
</html>