[Powered by Google Translate] [டிஓம்]
[டாமி MacWilliams] [ஹார்வர்ட் பல்கலைக்கழகம்]
[இந்த CS50 உள்ளது.] [CS50.TV]
இந்த வீடியோ நாம் டிஓம் பாரு போகிறோம்.
ஒரு உலாவி ஒரு வலைப்பக்கம் பதிவிறக்கும் போது, அதை எப்படியாவது நினைவகத்தில் குறிப்பிடப்படுகின்றன வேண்டும்.
ஆவண ஆப்ஜெக்ட் மாதிரி, அல்லது DOM,
உலாவி நினைவக ஒரு வலைப்பக்கம் பிரதிநிதித்துவம் எவ்வாறு விவரிக்கிறது.
இந்த வீடியோவில், நாம், இங்கு சூழலில் டிஓம் பாருங்கள் எடுக்க வேண்டும்
ஆனால் டிஓம் ஒரு மொழியை சுதந்திரமாக கருத்து உள்ளது.
உதாரணமாக, PHP மற்றும் அதன் சொந்த டிஓம் செயல்படுத்த உள்ளது.
எனினும், டோம் அடிக்கடி இங்கு பயன்படுத்தப்படும்
இங்கு நாம் பறக்க ஒரு வலைப்பக்கம் உள்ளடக்கங்களை மாற்ற அனுமதிக்கிறது பின்னர்,
மற்றும் DOM எங்களுக்கு ஒரு வலைப்பக்கத்தின் பகுதிகளில் அணுக அனுமதிக்கிறது.
இது ஒரு எடுத்துக்காட்டு வலைப்பக்கம் ஒரு பார்க்கலாம்.
சரி, இப்போது இந்த பக்கம் டிஓம் பிரதிநிதித்துவம் எப்படி என்று பார்ப்போம்.
ஒவ்வொரு மரத்தின் மேல் ஒரு மூல கணு தேவை.
இந்த ஆவணம், HTML உறுப்பு வேர் கணு உள்ளது
ஏனெனில் அது தோன்றும் முதல் உறுப்பு இருக்கிறது.
நமது மரம் ஒரு மூல கணு சேர்க்க.
மீண்டும் HTML ஆவணம் ஒரு பார்க்கலாம்.
உடல் டேக் HTML குறியை உள்ளே காக்கப்பட்ட என்று கவனிக்க.
இந்த உடல் உறுப்பு HTML உறுப்பு ஒரு குழந்தை என்று தான் அர்த்தம்.
நாம் உடல் ஒரு இலை மூலம் நம் DOM மரம் இந்த பிரதிநிதித்துவம் முடியும்
HTML இருந்து இறங்கு.
தான் அதை செய்ய விடுங்கள்.
, HTML அடியில் உடல் வேண்டும்.
இப்போது நாம், அந்த உடல் தனது சொந்த 2 குழந்தைகள் உள்ளனர் பார்க்க முடியும்
H1 உறுப்பு மற்றும் உல் உறுப்பு.
நாம் அந்த உறுப்புகள் இரண்டு இணைக்க முடியும்
உடல் உறுப்பு வேண்டும், எனவே அதை செய்ய விடுங்கள்.
நாம் ஒரு H1 மற்றும் ஒரு உல் வேண்டும்.
இறுதியாக, உல் உறுப்பு, மேலும் 3 குழந்தைகள் உள்ளனர்
இந்த எங்கள் DOM மரம் முடிக்க வேண்டும், அதனால் li, li, li சேர்க்க அனுமதிக்க.
இந்த எங்கள் DOM மரம் முடித்து, இந்த உலாவி உங்கள் வலைப்பக்கத்தை சேமிக்க எப்படி உள்ளது.
இப்போது நாம் இங்கு பயன்படுத்தி இந்த மரம் பயணிக்க முடியும் என்பதை பாருங்கள் நாம்.
நாங்கள் ஆவணம் என்று ஒரு சிறப்பு இங்கு மாறி பயன்படுத்தி இந்த மரம் அணுக முடியும்.
இந்த ஆவணம் பொருளின் ஒரு சொத்து
உடல் சொத்து உள்ளது, மற்றும் இந்த பொருளை குறிக்கிறது
எங்கள் எடுத்துக்காட்டாக வலைப்பக்கம் உடல் உறுப்பு.
நாம், உடல் உறுப்பு குழந்தைகள் அனைத்து பெற விரும்பினால்
இது நீங்கள் நினைவில் இருந்தால், அந்த H1 டேக் மற்றும் உல் குறிச்சொல் உள்ளது
நாம் document.body.childNodes சொல்ல முடியாது.
இந்த எங்களுக்கு H1 உறுப்பு இரண்டு கொண்ட ஒரு அணி மீண்டும் கொடுக்கும்
அவர்கள் உடல் இரு நேரடி குழந்தைகள் தான் முதல் உல் உறுப்பு.
நாம் உல் உறுப்பு குறிக்கும் ஒரு மாறி உருவாக்க விரும்பினால்
நாங்கள், இங்கு vrr உல் = இந்த குறியீடு சொல்ல முடியும்
இப்போது childNodes வெறுமனே ஒரு வரிசைக்கு ஏனெனில்
நாங்கள் [1] அதை கொண்டு குறியீட்டு அந்த அணியின் இரண்டாவது உறுப்பு பெற முடியும்.
இந்த புதிய உல் பொருள் நாம் அதன் ஐடி போன்ற உறுப்பு பல்வேறு பண்புகள் அணுக முடியும்.
நாம் சரம் பட்டியலில் சமமாக இருக்க போகிறது என்று ul.id சொன்னால்
என்று நாம் HTML பக்கம் உள்ள என்ன காரணம்.
நாம் இந்த விஷயத்தில் இருக்க போகிறது இது, அதன் tagName பெற முடியும்
உறுப்பு என்ன வகை இந்த வழக்கில், ஒரு உல் ஆகும்.
நாங்கள் அதன் பெற்றோர் அல்லது மேலே முனையும் பெற முடியும் இந்த வழக்கில்
உடல் உறுப்பு இருக்க போகிறது.
நாம் document.body அதே இருக்க போகிறது என்று. ParentNode, சொன்னால்.
நிச்சயமாக, இந்த உல், அதன் சொந்த குழந்தைகள் உள்ளன
நாம் இன்னும் சொல்ல முடியாது. childNodes இந்த உறுப்பு மீது,
எங்கள் பட்டியலில் 3 பொருட்கள் இருப்பதால் இந்த வரிசை இப்போது நீளம் 3 இருக்க வேண்டும்.
இறுதியாக, மிக பயனுள்ளதாக சொத்து இருக்க போகிறது. InnerHTML,
இந்த பட்டியலில் உண்மையான உள்ளடக்கங்களை இருக்கும் இது எங்கள் உதாரணமாக பக்கத்தில்
அந்த 3 li குறிச்சொற்களை இருந்தன.
நிச்சயமாக, நாம் ஒரு பெரிய ஆவணம் இருந்தால், உறுப்புகள் அணுகுவதை
இந்த முறையில் மிகவும் சிக்கலான இருக்க போகிறது ஏனெனில்
இறுதியில் நாம் document.body.childNodes போன்ற விஷயங்களை சொல்ல வேண்டும்
அடைப்புக்குறி ஒன்று., வேறு அடைப்புக்குறி ஏதாவது childNodes
அது உண்மையில் சிக்கலான பெற நடக்கிறது.
அதற்கு பதிலாக நாம் உண்மையில் செய்ய வேண்டும் என்பது, ஆவணம் வினா முடியும்
அதனால் தான் நாங்கள் முக்கிய வார்த்தைகளை பயன்படுத்தி இணையத்தில் பொருட்களை தேடி பிடிக்கும்
நாம் உண்மையில் கினார் இந்த ஆவணம் தேடி சில வழி வேண்டும்
நாம் பற்றி கவலை மட்டுமே கூறுகளை பயணித்து இல்லாமல் திரும்ப பெற
கீழே முழு மரத்தின் மேல்.
அதிர்ஷ்டவசமாக, நவீன உலாவிகளில் நாம் இதை செய்ய அனுமதிக்கும்
querySelectorAll என்று ஒரு சிறப்பு செயல்பாடு,
இந்த செயல்பாடு ஒரு வாதத்தை எடுத்து
ஒரு CSS தேர்வுக்குழு, மற்றும் அது நமக்கு திரும்ப நடக்கிறது
என்று தேர்வுக்குழு பொருந்தும் என்று கூறுகள் அனைத்து.
என்று நீங்கள் டிஓம் குவெரி ஒரு முழு புதிய இலக்கணத்தை கற்று கொள்ள தேவையில்லை என்று பொருள்.
அதற்கு பதிலாக நீங்கள் ஏற்கனவே தெரியும் அறிவு விண்ணப்பிக்க முடியும்
CSS தேர்வாளர்கள் பற்றி.
இந்த ஆவணம் குவெரி சில உதாரணங்கள் ஒரு பார்க்கலாம்.
நாம் querySelectorAll என்று அது இந்த சரம் # foo கடந்து என்றால்
என்று நம்மை அடையாள foo கொண்ட உறுப்பு திரும்ப கொடுக்க நடக்கிறது.
நீங்கள் document.getElementByID சொல்ல முடியும்
மற்றும் அது ஹேஸ்டேகை இல்லாமல் சரம் foo கடந்து.
நீங்கள் அதே துல்லியமான பொருள் திரும்ப பெற போகிறோம்.
அதற்கு பதிலாக நாம் document.querySelectorAll செய்ய சரம். பொருட்டல்ல கடந்து என்றால்
நாம் வர்க்கம் பட்டியில் உள்ள உறுப்புகள் அனைத்தும் திரும்ப பெற போகிறோம்.
நாங்கள் CSS தேர்வாளர்கள் இணைக்க முடியும்.
நாம் சரம் # foo IMG ல் கடந்து என்றால்
படத்தை உறுப்புகள் அனைத்தும் நம்மை திரும்ப கொடுக்க நடக்கிறது என்று
அந்த அடையாள foo கொண்ட உறுப்பு குழந்தைகள் உள்ளன.
நீங்கள் பார்க்க முடியும் என, இணைப்பதன் தேர்ந்தெடுக்கப்படவில்லை நாம் சில உண்மையில் சக்திவாய்ந்த தேடல் சாத்தியங்களை வேண்டும்.
ஆனால் ஹூட் கீழ், டோம், உண்மையில் ஒரு மரம்
இந்த தேர்வாளர்கள் ஓரளவிற்கு என்று விட்டு எங்களுக்கு சுருக்கம் அனுமதிக்கின்றன
நாம் எப்போதும் DOM மரம் முழு கட்டமைப்பு பற்றி கவலை இல்லை, ஏனெனில்.
ஒரு விரைவான டிஓம் கண்ணோட்டம், எங்களுக்கு வந்ததற்கு நன்றி இருந்தது.
[CS50.TV]