[Powered by Google Translate] [DOM] [تومي ماك ويليامز] [جامعة هارفارد] [هذا CS50.] [CS50.TV] في هذا الفيديو نحن ذاهبون لنلقي نظرة على DOM. عندما بتحميل متصفح صفحة ويب، فإنه يحتاج إلى أن تكون ممثلة في الذاكرة بطريقة أو بأخرى. نموذج كائن مستند، أو DOM، يصف كيف يمثل المتصفح صفحة ويب في الذاكرة. في هذا الفيديو، ونحن سوف نلقي نظرة على DOM في سياق جافا سكريبت، لكن DOM هو مفهوم لغة مستقلة. على سبيل المثال، لديها PHP تنفيذه DOM الخاصة كذلك. ومع ذلك، وكثيرا ما تستخدم من قبل DOM جافا سكريبت منذ سكريبت يسمح لنا لتغيير محتويات صفحة الويب على الطاير، وDOM يتيح لنا الوصول إلى أجزاء من صفحة ويب. دعونا نلقي نظرة على صفحة الويب المثال. حسنا، الآن دعونا نرى كيف سيتم تمثيل هذه الصفحة في DOM. ويحتاج كل شجرة لديهم عقدة الجذر في الجزء العلوي. لهذا المستند، عنصر HTML هي العقدة الجذر لأنه العنصر الأول الذي يظهر. دعونا نضيف عقدة جذر شجرة لدينا. دعونا نلقي نظرة على وثيقة HTML مرة أخرى. لاحظ أن العلامة الجسم متداخلة داخل من علامة HTML. وهذا يعني أن العنصر الأساسي هو طفل من عنصر HTML. نحن يمكن أن تمثل هذا في شجرة DOM لدينا من قبل الجسم مما يجعل ورقة المتحدر من HTML. دعونا نفعل ذلك. لدينا هيئة تحت HTML. الآن يمكننا أن نرى أن الهيئة لديها 2 الأطفال من تلقاء نفسها، العنصر H1 و العنصر UL. وهذا يعني أننا يمكن ربط كل هذه العناصر إلى العنصر الجسم، لذلك دعونا نفعل ذلك. لدينا H1 و UL. وأخيرا، فإن العنصر UL ديه 3 أطفال أكثر، وهذا سيكمل شجرة DOM دينا، لذلك دعونا نضيف لى لى لى. هذا يكمل شجرة DOM لدينا، وهذا هو كيف يمكن للمتصفح يتم تخزين صفحة الويب الخاصة بك. الآن دعونا نلقي نظرة على كيف يمكننا اجتياز هذه الشجرة باستخدام جافا سكريبت. يمكننا الوصول إلى هذه الشجرة باستخدام متغير جافا سكريبت خاص يسمى الوثيقة. خاصية واحدة من هذا الكائن الوثيقة هو ملك الجسم، ويمثل هذا الكائن العنصر الأساسي في المثال لدينا صفحة ويب. إذا كنا نريد للحصول على كل من الأطفال للعنصر الجسم، التي إذا كنت تتذكر هو أن علامة H1 وعلامة UL، يمكننا القول document.body.childNodes. وهذا سيتيح لنا العودة صفيف يحتوي كل عنصر H1 والعنصر UL منذ انهم على حد سواء الأطفال مباشرة من الجسم. إذا أردنا أن إنشاء متغير يمثل العنصر UL يمكننا القول VRR UL = ثم هذا الرمز هنا، والآن بسبب childNodes هو ببساطة مجموعة في وسعنا مؤشر الى انه مع [1] للحصول على العنصر الثاني من هذا الصفيف. مع هذا الكائن UL جديدة يمكننا الوصول إلى خصائص مختلفة من عنصر مثل المعرف الخاص به. إذا قلنا أن ul.id ستكون مساوية لقائمة السلسلة لأن هذا هو ما لدينا في صفحتنا HTML. يمكننا أيضا الحصول على tagName لها، وهو في هذه الحالة سيكون ما نوع العنصر هو عليه، في هذه الحالة، UL. يمكننا أيضا الحصول على الأم أو العقدة فوقه، وهو في هذه الحالة ستكون العنصر الأساسي. اذا قلنا. parentNode، التي ستكون نفس document.body. بالطبع، هذا UL لديه أطفال من تلقاء نفسها، لذا يمكننا القول لا يزال. childNodes على هذا العنصر، وهذه المجموعة يجب أن يكون طول 3 الآن لأن هناك 3 بنود في قائمتنا. وأخيرا، ولعل الخاصية الأكثر فائدة ستكون. innerHTML، وهذا سيكون محتويات الفعلي للقائمة، والتي في مثالنا الصفحة كانت تلك الكلمات لى 3. بطبيعة الحال، إذا كان لدينا وثيقة كبيرة، والوصول إلى العناصر بهذه الطريقة سوف تكون مرهقة حقا لأن في نهاية المطاف سيتعين علينا أن نقول أشياء مثل document.body.childNodes قوس شيء. childNodes قوس شيء آخر، وانها سوف تحصل مرهقة حقا. بدلا من ذلك ما نريد حقا القيام به هو أن تكون قادرا على الاستعلام عن الوثيقة، تماما مثل ذلك قمنا بالبحث عن أشياء على الإنترنت باستخدام الكلمات الرئيسية نحن حقا بحاجة الى بعض الطريقة من البحث هذه الوثيقة إلى بإيجاز نعود فقط العناصر نحن نهتم دون عبور أعلى شجرة بأكمله إلى أسفل. لحسن الحظ، المتصفحات الحديثة تسمح لنا للقيام بذلك مع وظيفة خاصة تسمى querySelectorAll، وهذه وظيفة يأخذ وسيطة واحدة وهذا هو محدد CSS، وانها سوف تعود لنا كل العناصر التي تطابق تلك محدد. وهذا يعني أنك لا تحتاج إلى تعلم بناء جملة جديدة كاملة للالاستعلام عن DOM. بدلا من ذلك يمكنك تطبيق المعرفة كنت تعرف مسبقا حول محددات CSS. دعونا نلقي نظرة على بعض الأمثلة من الاستعلام عن الوثيقة. إذا قلنا querySelectorAll وتمريرها هذه السلسلة # فو أن يحدث لإعطاء يعود بنا هذا العنصر مع فو ID. يمكنك أيضا أن أقول document.getElementByID وتمريرها سلسلة فو دون أن هاشتاج. وأنت تسير لنعود إلى نفس الكائن الدقيق. إذا بدلا من ذلك نحن تمرير السلسلة. شريط لdocument.querySelectorAll ونحن في طريقنا للعودة كل العناصر مع شريط فئة. ويمكننا أيضا الجمع بين محددات CSS. إذا نحن نمر في سلسلة # فو IMG وهذا ما سيعطينا عودة جميع عناصر الصورة التي هي الأطفال من العنصر مع فو ID. كما ترون، من خلال الجمع بين محددات لدينا بعض قدرات البحث القوية حقا. لكن تحت غطاء محرك السيارة، وDOM هو في الحقيقة مجرد شجرة، وهذه محددات تسمح لنا مجردة بعيدا إلى حد ما لأننا لا نهتم دائما عن هيكل كامل من شجرة DOM. وكان ذلك محة سريعة عن DOM، وشكرا لانضمامك إلينا. [CS50.TV]