[Powered by Google Translate] [ڈوم] [ٹومی MacWilliams] [ہارورڈ یونیورسٹی] [یہ CS50 ہے.] [CS50.TV] اس ویڈیو میں ہم نے ڈوم پر ایک نظر لینے کے لئے جا رہے ہیں. ایک براؤزر کسی ویب صفحہ ڈاؤن لوڈ، تو یہ کسی نہ کسی طرح یاد میں نمائندگی کی ضرورت ہے. دستاویز آبجیکٹ ماڈل، یا ڈوم، براؤزر کی یاد میں ایک ویب کے صفحے کی نمائندگی کرتا ہے کس طرح بیان کرتا ہے. اس ویڈیو میں، ہم، جاوا سکرپٹ کے تناظر میں ڈوم پر ایک نظر ڈالیں گے لیکن ڈوم ایک زبان آزاد تصور ہے. مثال کے طور پر پی ایچ پی کے ساتھ ساتھ اس کے اپنے ڈوم پر عمل درآمد ہے. تاہم، ڈوم اکثر جاوا سکرپٹ کی طرف سے استعمال کیا جاتا ہے جاوا اسکرپٹ ہم سے مکھی پر ایک ویب کے صفحے کے مواد کو تبدیل کرنے کی اجازت دیتا ہے کے بعد سے، اور ڈوم ہمیں ایک ویب کے صفحے کے مختلف حصوں تک رسائی حاصل کرنے کی اجازت دیتا ہے. کی ایک مثال کے طور پر ویب کے صفحے پر ایک نظر ڈالیں ہیں. ٹھیک ہے، اب یہ صفحہ ڈوم میں نمائندگی دی جائے گی کہ کس طرح دیکھتے ہیں. اور ہر درخت کے سب سے اوپر ایک جڑ نوڈ ہے کی ضرورت ہے. اس دستاویز کے لئے، HTML عنصر جڑ نوڈ ہے کیونکہ یہ ظاہر ہوتا ہے کہ پہلی عنصر ہے. کی ہماری درخت کے لئے ایک جڑ نوڈ شامل ہیں. کی دوبارہ HTML دستاویز پر ایک نظر لے چلتے ہیں. جسم ٹیگ HTML ٹیگ کے اندر اندر در اندر ہے کہ نوٹس. یہ جسم عنصر HTML عنصر کے ایک بچہ ہے کا مطلب ہے کہ. ہم جسم کے ایک پتی بنا کر ہمارے ڈوم درخت میں اس کی نمائندگی کر سکتے ہیں ایچ ٹی ایم ایل سے اترتے. کی ایسا کرتے ہیں. ہم ایچ ٹی ایم ایل کے نیچے جسم ہے. اب ہم اس جسم کا اپنا 2 بچے ہیں دیکھ سکتے ہیں H1 عنصر اور شیخ الاسلام عنصر. ہم ان عناصر کے دونوں شامل کر سکتے ہیں کا مطلب ہے کہ جسم کے عنصر پر، تو ایسا کرنے دیں. ہم ایک H1 اور شیخ الاسلام ہے. آخر میں، شیخ الاسلام عنصر، 3 مزید بچے ہیں اور یہ ہماری ڈوم درخت مکمل ہو جائے گا، لہذا لی، لی، لی شامل ہیں. یہ ہماری ڈوم درخت مکمل، اور اس کا براؤزر آپ کے ویب کے صفحے محفوظ ہے کس طرح ہے. اب ہم جاوا سکرپٹ کا استعمال کرتے ہوئے اس درخت گزرنا کر سکتے ہیں کہ کس طرح پر ایک نظر ڈالیں ہیں. ہم نے دستاویز کے نام سے ایک خصوصی جاوا سکرپٹ متغیر کا استعمال کرتے ہوئے اس درخت تک رسائی حاصل کر سکتے ہیں. اس دستاویز اعتراض میں سے ایک جائیداد جسم کی ملکیت ہے، اور یہ اعتراض کی نمائندگی کرتا ہے ہماری مثال ویب کے صفحے میں جسم کے عنصر. ہم جسم عنصر کے بچوں کی تمام حاصل کرنے کے لئے کرنا چاہتا تھا تو جس سے آپ کو یاد ہے تو، اس H1 ٹیگ اور شیخ الاسلام ٹیگ ہے ہم document.body.childNodes کہہ سکتے ہیں. اور یہ ہمیں H1 عنصر دونوں پر مشتمل ایک سرنی واپس دے گا اور وہ جسم کے دونوں بچوں کو براہ راست ہو، کے بعد سے شیخ الاسلام عنصر. ہم شیخ الاسلام عنصر کی نمائندگی کرنے والے ایک متغیر بنانا چاہا تو ہم، یہاں vrr شیخ الاسلام = پھر اس کوڈ کو کہہ سکتے ہیں اور اب childNodes صرف ایک سرنی ہے کیونکہ ہم [1] کے ساتھ اس میں انڈیکس کہ سرنی کے دوسرے عنصر حاصل کرنے کے لئے کر سکتے ہیں. اس نئے شیخ الاسلام اعتراض کے ساتھ ہم اپنی آئی ڈی کی طرح عنصر کے مختلف خصوصیات تک رسائی حاصل کر سکتے ہیں. ہم سٹرنگ فہرست کے برابر ہونے جا رہا ہے کہ ul.id کا کہنا ہے کہ اگر کہ ہم اپنے HTML صفحے میں کیا ہے کیونکہ. ہم نے بھی اس کیس میں ہونے جا رہا ہے، جو اس کے tagName حاصل کر سکتے ہیں عنصر کے کس قسم یہ اس کیس، ایک شیخ الاسلام میں ہے. ہم نے بھی اس کے والدین یا اس کے اوپر نوڈ، حاصل کر سکتے ہیں جو اس معاملے میں جسم کے عنصر بننے جا رہی ہے. ہم document.body طور پر ایک ہی ہونے جا رہا ہے کہ. parentNode، کہتے ہو تو. بالکل، یہ شیخ الاسلام، اس کے اپنے بچوں کی ہے تاکہ ہم بھی کہہ سکتے ہیں. childNodes اس عنصر پر، ہماری فہرست میں 3 اشیاء موجود ہیں کیونکہ اور یہ سرنی اب لمبائی 3 ہونا چاہئے. آخر میں، شاید سب سے زیادہ مفید جائیداد ہونے جا رہا ہے. innerHTML، اور اس، فہرست کی اصل مواد ہو جائے گا جو ہماری مثال کے صفحے پر ان 3 لی ٹیگز تھے. کورس کے، ہم ایک بڑی دستاویز ہے تو، تک رسائی حاصل کرنے کے عناصر اس طریقے میں واقعی بوجھل ہونے جا رہا ہے کیونکہ آخر میں ہم document.body.childNodes کی طرح باتیں کرنا پڑے گا بریکٹ کچھ.، کسی اور بریکٹ کچھ childNodes اور یہ واقعی بوجھل حاصل کرنے کے لئے جا رہا ہے. اس کے بجائے کیا ہم واقعی کرنا چاہتا ہے، دستاویز سوال کرنے کے قابل ہو لہذا ہم مطلوبہ الفاظ کا استعمال کرتے ہوئے انٹرنیٹ پر چیزوں کے لئے تلاش کی پسند ہم واقعی succinctly اس دستاویز کو تلاش کرنے کے کچھ طریقے سے کی ضرورت ہے ہم پرواہ صرف عناصر traversing کے بغیر واپس لے نیچے پورے درخت کے سب سے اوپر. خوش قسمتی سے، جدید براؤزر ہمیں ایسا کرنے کی اجازت دیتے ہیں querySelectorAll نامی ایک خصوصی تقریب کے ساتھ، اور یہ تقریب ایک ہی دلیل لیتا ہے کہ ایک سی ایس ایس سلیکٹر ہے، اور یہ ہمارے پاس واپس جا رہا ہے کہ سلیکٹر سے ملنے والے عناصر کے تمام. کہ آپ ڈوم querying کے لئے ایک مکمل نئی نحو میں جاننے کے لئے کی ضرورت نہیں ہے کا مطلب ہے. اس کی بجائے اگر آپ پہلے سے ہی جانتے علم درخواست دے سکتے ہیں سی ایس ایس کے بارے میں سلیکٹرز. کی دستاویز querying کی کچھ مثالیں پر ایک نظر لے چلتے ہیں. ہم querySelectorAll کا کہنا ہے کہ اور اس سٹرنگ # FOO گزرتے تو کہ ہم ID FOO کے ساتھ عنصر واپس دینے کے لئے جا رہا ہے. آپ یہ بھی کہہ سکتے ہیں document.getElementByID اور یہ کہ hashtag کے بغیر سٹرنگ FOO گزر. آپ اسی عین مطابق اعتراض واپس حاصل کرنے کے لئے جا رہے ہیں. اس کے بجائے ہم document.querySelectorAll پر سٹرنگ. بار گزرتے تو ہم کلاس میں بار کے ساتھ عناصر کے سب واپس حاصل کرنے کے لئے جا رہے ہیں. ہم نے بھی سلیکٹرز سی ایس ایس کو یکجا کر سکتے ہیں. ہم سٹرنگ # FOO IMG میں گزر تو تصویر عناصر کا ہم سب کو واپس دینے کے لئے جا رہا ہے کہ کہ ID FOO کے ساتھ عنصر کے بچے ہیں. آپ دیکھ سکتے ہیں، یکجا سلیکٹرز کی طرف سے ہم نے کچھ واقعی طاقتور تلاش صلاحیتوں ہے. لیکن ہڈ کے تحت، ڈوم، واقعی صرف ایک درخت ہے اور ان سلیکٹرز کچھ حد تک کہ دور ہمارے لئے کی اجازت دیتے ہیں خلاصہ ہم ہمیشہ ڈوم درخت کے پورے ڈھانچے کی پرواہ نہیں کرتا ہے. یہ ایک فوری ڈوم کا جائزہ، اور ہم میں شامل ہونے کے لئے شکریہ تھا. [CS50.TV]