Have an account? Sign in
Login  Register  Facebook
Web Development School
This Page is Under Construction! - If You Want To Help Please Send your CV - Advanced Web Core (BETA)
Quick Table of Contents
[Edit] كيفية الوصول للنود التي نريدها
عرفنا أننا سنتحكم في هيتميل بالجافا سكريبت من خلال الكائن document و أن كل محتويات الهيتمل خواص بداخله و لذا للوصول للمحتوى الذي نريده فإننا في الأساس نستخدم النقطة "." و بعض الدوال و الخصائص التي سنشرحها في هذا الدرس .هناك طرق كثيرة و متعددة لفعل ذلك سنشرح منها الأكثر عملية و فاعلية . سأقوم بالشرح على كود الهيتمل التالي في هذا الدرس و أيضا الدروس التالية قم بنسخه في برنامج مثل النوت باد و احفظه كملف html ثم إضغط f12 لفتح أدوات مطوري الويب و يفضل إستخدام متصفح الفاير فوكس المثبت به firebug لأن المتصفحات الأخرى ليس بها كل المميزات . الكود: 
<!DOCTYPE ...>
<html>
<head>
<title>DOM learning</title>
</head>
<body>
<div id="para">
	<p>This is a paragraph.</p>
</div>
<div id="list">
	<ul>
		<li class="first">first item</li>
		<li>second item </li>
		<li>third item </li>
	</ul>
	
</div>
</body>
</html>
في أداة مطوري المواقع إذا إخترت html و قمت بعرض كل العناصر الفرعية بالضغط على كل علامات ال"+" سيظهر لك الشكل التالي:

عناصر كل قائمة عبارة عن "أبناء" childs لرأس القائمة بمعنى مثلا أنه:

  • <head>و<body> أبناء لـ <html>.
  • <div id="para">و <div id="list">أبناء لـ<body>.
  • <ul> إبن لـ <div id="list">
  • <li class="first">first item</li> و <li>second item </li> و <li>third item </li> أبناء لـ<ul>.
أيضا يسمى أول عنصر في القائمة بالإبن الأول firstChild و الذي يليه يكون الثاني و هكذا حتى الأخير lastChild . الآن قم بفتح الـ console و قم بكتابة document فيه و اضغط Enter سيظهر لك مثل الموجود في الصورة التالية :

يظهر بالأزرق الأمر الذي كتبته

>>> document

و أسفله بالأخضر يوجد محتوى الكائن document إذا ضغط على document المكتوبة بالأخضر فإنها ستأخذك إلى قسم آخر من أدوات المطورين و هو DOM و ستجد أمامك كل ما يحتويه الكائن document من خواص و دوال كما بالصورة التالية:

لكل نقطة Node في الـ DOM عدد من الخصائص تساعدنا في الإنتقال منها إلى النقاط التي نريد,دائما نبدأ من الأعلى من document و أول خاصية سنتعرف عليها هي childNodes و ترجع مصفوفة بالأبناء للنقطة :

أكتب في الكنسول : 
document.childNodes
سيرجع لك: [DocumentType { constructor=DocumentType, nodeName="...", nodeType=10, more...}, html]

و ستجد أن المصفوفة تتكون من عنصرين الأول نوع الوثيقة و الثاني html و هما إذا نظرت للشكل الثالث في الدرس الأول سيتضح لك أنهم الأبناء childs للنقطة document

. العنصر الثاني في المصفوفةhtml و لذا الوصول لها يكون كالتالي: 
document.childNodes[1]
و ستجد أن الناتج <html> يمكنك أن تضع النقطة في متغير و يتم التعامل معه كأنه هي ,هكذا: 
var htdoc=document.childNodes[1]
و لذا إذا كتبت إسم المتغير في الكنسول 
htdoc

سيرجع <html>

للوصول إلى أبناء <html> نستخدم childNodes مرة أخرى : 
htdoc.childNodes
سترجع لك المصفوفة :

[head, <TextNode textContent="\n">, body]

الأول head و الأخير body و هما الأبناء ل html أما العنصر الثاني في المصفوفة فهو عبارة عن \n و هي تعني سطر جديد و ذلك لأن الDOM يأخذ في الإعتبار المسافات الخالية . لكي تصل إلى الإبن الأول بطريقة أسهل تستخدم firstChild بدلا من childNodes[0] 
htdoc.firstChild
يرجع <head> للوصول لآخر إبن مباشرة يمكن أن تستخدم lastChild. 
htdoc.lastChild

يرجع <body>

أما إذا كنت تريد أن تصل من نقطة إبن للأب فتستخدم parentNode.

htdoc.parentNode

ترجع Document .

توجد خاصية تشبه childNodes لكنها مطورة أكثر بحيث أنها لا تعتبر المسافات البيضاء نقط و لكنها للأسف لا تعمل أيضا على إكبسلورر 6 و 7,و هذه الخاصية هي children. 
document.getElementById("list").children[0].children
يرجع لك [li.first, li, li]

يمكننا الوصول مباشرة للعناصر من خلال عدد من الدوال أهمهم:

getElementById

و تمكنك للوصول للعنصر الذي تريده من خلال الـ id فللوصول إلى <div id="para"> تستخدمها هكذا. 
document.getElementById("para")
و و كمثال آخر الوصول للعنصر <div id="list"> 
var list=document.getElementById('list')
و يمكن بعدها أن تأتي بالأبناء للعنصر <div id="list"> بإستخدام childNodes هكذا 
list.childNodes
من الدوال المهمة دالة getElementsByTagName و تأتي بكل العناصر التي لها التاج الذي تحدده في مصفوفة 
document.getElementsByTagName("div")

ترجع المصفوفة [div#para, div#list]

و أيضا للوصول للعنصر من خلال إسم الكلاس className توجد دالة هي getElementsByClassName و تأتي بمصفوفة فيها العناصر التي لها الكلاس الذي تحدده 
document.getElementsByClassName("first")

ترجع [li.first]

لاحظ أن العناصر مكتوبة داخل المصفوفات بالطريقة التي تكتب بهاالـselectors (*) في الإستايل شيت.لكن هذا لا يفرق معنا في شيء .

(*)الـ selectors مفهوم يخص الcss ,وهو المحددات التي تحدد العناصر التي يتم تطبيق الإستايل عليها فمثلا لجعل كل القوائم تكتب باللون الأحمر تكتب ul{color:red} هنا ul تسمى بالـselector.

الآن لنأخذ بعض التطبيقات على ما سبق . للوصول إلى العنصر الثاني في القائمة second item يمكن ذلك بعدة طرق: 
var ul=document.getElementById("list").childNodes[1]
ul.childNodes[3]
أو 
document.getElementsByTagName('li')[1]
و يوجد طرق أخرى عديدة هناك دالتين جديدتين أكثر فاعلية لكنهم لا يعملو في إكسبلورر 6 و 7. querySelector و querySelectorAll و تستخدم css selectors للوصول مباشرة إلى التاج الذي تريده.

querySelector

ترجع عنصر واحد ,العنصر الأول مما ينطبق عليه الـselector . مثلا للوصول للعنصر الأول في القائمة first item نستخدم 
document.querySelector("ul .first")
فترجع <li class="first"> أما

querySelectorAll

يرجع مصفوفة بكل العناصر التي ينطبق عليها الـselector مثلا
 document.querySelectorAll("ul li")
ترجع [li.first, li, li] وهما الثلاث عناصر الموجودين في القائمة.
December 9, 2011