‫‪Document Object Model‬‬

‫كائن المستند ٌمثل كل مستند الـ ‪. HTML‬‬

‫وعندما ٌتم تحمٌل مستند الـ ‪ HTML‬على المتصفح هو ٌصبح كائن الصفحة‪ .‬وهو ٌعتبر عنصر الجذر الذي ٌمثل مستند الـ ‪ HTML‬وهذا الكائن لدٌه‬
‫خصائص ودوال وبواسطة هذا الكائن نستطٌع اضافة المحتوٌات الى صفحات الوٌب دٌنامٌكٌا‪.‬‬
‫وطبقا للـ ‪ W3C‬فإن الـ )‪ Document Object Model (DOM‬عبارة عن بٌئة تسمح للبرامج و السكرٌبتات من الوصول وتحدٌث المحتوٌات‬
‫والهٌكل والهٌئة للمستند دٌنامٌكٌا‪.‬‬
‫‪How to use DOM and Events‬‬
‫باستخدام ال ‪ DOM‬الجافا سكرٌبت تستطٌع انجاز العدٌد من المهام مثل انشاء عناصر وخصائص جدٌدة‪ ،‬تغٌٌر عناصر وخصائص وكذلك مسح‬
‫عناصر وخصائص موجودة‪ .‬كما تستطٌع الجافا سكرٌبت من خالل ال ‪ DOM‬التفاعل مع احداث موجودة وانشاء احداث جدٌدة فً الصفحة‪.‬‬
‫فً ال ‪ DOM‬كل عناصر ال ‪ُ HTML‬تعرف ككائنات ‪.‬‬
‫واجهات البرمجة مثل الفئات لهذه الكائنات ُتبنى من الدوال والخصائص لكل كائن‪ ،‬حٌث ان الخصائص هً القٌم التً نستطٌع الحصول علٌها من‬
‫العنصر او تحدٌدها للعنصر (مثل تغٌٌر محتوٌات عنصر ‪ )HTML‬اما الدوال فهً مجموعة االحداث التً نجرٌها او ننفذها على هذه العناصر ( مثل‬
‫اضافة او حذف عنصر ‪)HTML‬‬
‫‪Properties of document object‬‬
‫الشكل التالً ٌوضح هٌكل مستند الـ ‪ HTML‬وكٌفٌة الوصول الى عناصر وخصائص مستند الـ ‪html‬‬

‫‪Methods of document object‬‬

‫نستطٌع الوصول وتغٌٌر محتوٌات المستند باستخدام دواله والجدول التالً ٌعرض اهم الدوال المستخدمة‪.‬‬
‫اهم الدوال التً نستخدمها للوصول الى عناصر الـ ‪HTML‬‬

‫‪Method‬‬ ‫‪Description‬‬

‫)"‪write("string‬‬ ‫‪writes the given string on the document.‬‬

‫تطبع على المستند وتعرضها على المتصفح‬

‫)"‪writeln("string‬‬ ‫‪writes the given string on the document with newline character at the end.‬‬
‫تطبع مع سطر جدٌد‬

‫)(‪getElementById‬‬ ‫‪returns the element having the given id value.‬‬

‫تسترجع العنصر بواسطة قٌمة الـ ‪id‬‬

‫)(‪getElementsByName‬‬ ‫‪returns all the elements having the given name value.‬‬
‫تسترجع كل العناصر بواسطة قٌمة الـ ‪name‬‬
 getElementsByTagName() returns all the elements having the given tag name.
tag ‫تسترجع العناصر بواسطة قٌم الـ‬

getElementsByClassName() returns all the elements having the given class name.
ClassName ‫تسترجع كل العناصر بواسطة قٌمة الـ‬

Accessing field value by document object

:‫الوصول الى حقل القيمة بواسطة كائن المستند‬
.‫ لعنصر االدخال التً ٌدخلها المستخدم‬value ‫ للوصول الى العنصر حٌث سنسترجع ال‬value ‫المثال التالً ٌوضح استخدام ال‬
‫ حٌث ان‬document.form1.name.value ‫ سوف نستخدم‬value ‫وللوصول الى هذه ال‬
html ‫ او كائن مستند الـ‬html ‫ عنصر الجذر لمستند الـ‬Document
‫ اسم النموذج‬form1
input text ‫ خاصٌة االسم لعنصر االدخال‬name
.‫ خاصٌة القٌمة التً ستخزن فٌها مدخالت المستخدم من عنصر االدخال وستعرض على رسالة الترحٌب للمتصفح عند النقر على زر االوامر‬value
1. <script type="text/javascript">
2. function printvalue(){
3. var name=document.form1.name.value;
4. alert("Welcome: "+name);
5. }
6. </script>
7.
8. <form name="form1">
9. Enter Name:<input type="text" name="name"/>
10. <input type="button" onclick="printvalue()" value="print name"/>
11. </form>

document.getElementById() method
The document.getElementById() method returns the element of specified id.
 ‫ لعنصر االدخال لنستطٌع بواسطته الوصول الى عنصر االدخال‬id ‫ فمثال ٌتم تعرٌف‬،html ‫ المحدد داخل مستند ال‬id ‫تحدد العنصر صاحب ال‬
.‫واسترجاع قٌمة هذا العنصر المدخلة من قبل المستخدم‬
.‫ بإٌجاد وطباعة مكعب هذه القٌمة‬getcube() ‫المثال التالً ٌوضح استخدام هذه الدالة حٌث ٌتم ادخال قٌمة عددٌة فً مربع النص وتقوم الدالة‬
Let's see the simple example of document.getElementById() method that prints cube of the given number.
1. <script type="text/javascript">
2. function getcube(){
3. var number=document.getElementById("number").value;
4. alert(number*number*number);
5. }
6. </script>
7. <form>
8. Enter No:<input type="text" id="number" name="number"/><br/>
9. <input type="button" value="cube" onclick="getcube()"/>
10. </form>

11.

document.getElementsByName() method
:‫ كما فً الصٌغة التالٌة‬getElementsByName() ‫تسترجع كل العناصر المحددة باسم معٌن حٌث ٌتم تمرٌر االسم الى‬
1. document.getElementsByName("name")
.‫ " هو االسم المطلوب والذي بواسطته سٌتم استرجاع العناصر التً لها نفس االسم‬name"‫حٌث ٌعتبر ال‬
Example of document.getElementsByName() method
gender ‫فً المثال التالً سوف نحسب العدد االجمالً للعناصر التً تحمل االسم‬
1. <script type="text/javascript">
2. function totalelements()
3. {
4. var allgenders=document.getElementsByName("gender");
5. alert("Total Genders:"+allgenders.length);
6. }
7. </script>
8. <form>
 9. Male:<input type="radio" name="gender" value="male">
10. Female:<input type="radio" name="gender" value="female">
11.
12. <input type="button" onclick="totalelements()" value="Total Genders">
13. </form>

14.

document.getElementsByTagName() method
‫ كما فً الصٌغة التالٌة‬getElementsByTagName() ‫ الى الدالة‬tag ‫ حٌث ٌمرر اسم ال‬tag ‫تعٌد كل العناصر اعتمادا على اسم ال‬
1. document.getElementsByTagName("name")
.‫ المطلوب‬tag ‫" هو اسم ال‬name" ‫ال‬
Example of document.getElementsByTagName() method
p ‫ لها هو‬tag ‫فً المثال التالً سوف نحصل على اجمالً عدد العناصر فً المستند التً ال‬
1. <script type="text/javascript">
2. function countpara(){
3. var totalpara=document.getElementsByTagName("p");
4. alert("total p tags are: "+totalpara.length);
5.
6. }
7. </script>
8. <p>This is a pragraph</p>
9. <p>Here we are going to count total number of paragraphs by getElementByTagName() method.</
p>
10. <p>Let's see the simple example</p>
11. <button onclick="countpara()">count paragraph</button>
Another example of document.getElementsByTagName() method
h3 ‫ والوسم‬h2 ‫فً المثال التالً سوف نحسب العدد االجمالً للعناصر ذات الوسم‬
1. <script type="text/javascript">
2. function counth2(){
3. var totalh2=document.getElementsByTagName("h2");
4. alert("total h2 tags are: "+totalh2.length);
5. }
6. function counth3(){
7. var totalh3=document.getElementsByTagName("h3");
8. alert("total h3 tags are: "+totalh3.length);
9. }
10. </script>
11. <h2>This is h2 tag</h2>
12. <h2>This is h2 tag</h2>
13. <h3>This is h3 tag</h3>
14. <h3>This is h3 tag</h3>
15. <h3>This is h3 tag</h3>
16. <button onclick="counth2()">count h2</button>
17. <button onclick="counth3()">count h3</button>
Use the getElementsByClassName() method
.class ‫هذه الدالة تستخدم للوصول الى العناصر التً لها نفس قٌمة الخاصٌة‬
‫لماذا اكثر من عنصر؟ ألنه قد ٌكون فً صفحة الوٌب اكثر من عنصر لهم نفس قٌمة هذه الخاصٌة‬
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Select Element by Class in JavaScript</title>
 <style>
 .box{
 height: 50px;
 background: #ddd;
 margin: 20px;
 }
 .box.bordered{ // this Css Class inherits box class attribute
 border: 5px solid #333;
 }
 </style>
 </head>
 <body>
 <div class="box"></div>
 <div class="box bordered"></div>
 <div class="box"></div>
 <div class="box bordered"></div>
 <div class="box"></div>

 <script>
 var boxes = document.getElementsByClassName("box");

 // Select first box and style it with red background
 boxes[0].style.background = "red";

 /* Select elements having both "box" and "bordered" class
 and style them with yellow background */
 var borderedBoxes = document.getElementsByClassName("box bordered");
 for(var i = 0; i < borderedBoxes.length; i++){
 borderedBoxes[i].style.background = "yellow";
 }
 // Select last element and style it with green background
 boxes[boxes.length - 1].style.background = "green";
 </script>
 </body>
 </html>
CSS ‫؟ سٌتم تلوٌنه باللون المعرف فً شفرة الـ‬box ً‫ له ه‬class ‫ما اللون الذي سٌتم اسناده للصندوق الثانً الذي قٌمة الـ‬

Javascript - innerHTML
.‫ دٌنامٌكٌا‬html ‫ على مستند ال‬html ‫ إلضافة او كتابة عنصر‬innerHTML ‫تستخدم الخاصٌة‬
html ‫وهً مفٌدة للوصول و استبدال محتوٌات عناصر ال‬
Example of innerHTML property
‫ صاحب‬div ‫ حٌث سٌتم اضافة عنصر النموذج دٌنامٌكٌا الى ال‬.comment ‫فً هذا المثال سوف ٌتم انشاء عنصر نموذج عند النقر على زر األوامر‬
mylocation ‫ الذي اشرنا الٌه فً المثال بالـ‬id ‫ال‬
1. <script type="text/javascript" >
2. function showcommentform() {
3. var data="Name:<input type='text' name='name'><br>Comment:<br><textarea rows='5'
4. cols='80'></textarea>
5. <br><input type='submit' value='Post Comment'>";
6. document.getElementById('mylocation').innerHTML=data;
7. }
8. </script>
9. <form name="myForm">
10. <input type="button" value="comment" onclick="showcommentform()">
11. <div id="mylocation"></div>
12. </form>

Show/Hide Comment Form Example using innerHTML

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>First JS</title>
5. <script>
6. var flag=true;
7. function commentform(){
8. var cform="<form action='Comment'>Enter Name:<br><input type='text' name='name'/>
9. <br/>
10. Enter Email:<br><input type='email' name='email'/><br>Enter Comment:<br/>
11. <textarea rows='5' cols='70'></textarea><br><input type='submit'
12. value='Post Comment'/></form>";
13. if(flag){
14. document.getElementById("mylocation").innerHTML=cform;
15. flag=false;
16. }else{
17. document.getElementById("mylocation").innerHTML="";
18. flag=true;
19. }
20. }
21. </script>
22. </head>
23. <body>
24. <button onclick="commentform()">Comment</button>
25. <div id="mylocation"></div>
26. </body>
27. </html>
 ‫فً المثال التالً ٌتم استبدال محتوٌات احدى الـ ‪ div‬التً لها نفس قٌمة الخاصٌة ‪ class‬باستخدام ال ‪innerHTML‬‬

‫المثال التالً ٌستخدم الدالة )(‪ getElementById‬للوصول الى عنصر ‪ p‬كما ٌستخدم الخاصٌة ‪ innerHTML‬لتغٌٌر محتوٌات هذا العنصر‪.‬‬

‫‪innerText‬‬
‫الخاصٌة ‪ innerText‬تستخدم لطباعة نص دٌنامٌكٌا على مستند ال ‪ html‬حٌث ٌتم تفسٌر النص على انه نص طبٌعً ولٌس على انه نص ‪html‬‬
‫وهً تستخدم لتولٌد النصوص تلقائٌا مثل نصوص التحقق من كلمات المرور ونصوص رسائل التحقق االخرى‪.‬‬
‫‪Javascript innerText Example‬‬
‫المثال التالً ٌوضح كٌفٌة استخدام هذه الخاصٌة‪ ،‬حٌث سٌتم عرض رسالة تفٌد بان كلمة السر ضعٌفة ‪ poor‬عندما ٌكون طولها اقل ‪ 5‬رموز واقل واال‬
‫سٌظهر الرسالة ‪ good‬اذا كان عدد رموز كلمة السر اكبر من ‪ 5‬رموز‪.‬‬
‫‪1.‬‬ ‫> "‪<script type="text/javascript‬‬
‫‪2.‬‬ ‫{ )(‪function validate‬‬
‫‪3.‬‬ ‫;‪var msg‬‬
‫‪4.‬‬ ‫{)‪if(document.myForm.userPass.value.length>5‬‬
‫‪5.‬‬ ‫;"‪msg="good‬‬
‫‪6.‬‬ ‫}‬
‫‪7.‬‬ ‫{‪else‬‬
‫‪8.‬‬ ‫;"‪msg="poor‬‬
‫‪9.‬‬ ‫}‬
‫‪10.‬‬ ‫;‪document.getElementById('mylocation').innerText=msg‬‬
‫‪11.‬‬ ‫}‬
‫‪12.‬‬
‫‪13.‬‬ ‫>‪</script‬‬
14. <form name="myForm">
15. <input type="password" value="" name="userPass" onkeyup="validate()">
16. Strength:<span id="mylocation">no strength</span>
17. </form>