ஜாவாஸ்கிரிப்டில் HTML DOM உறுப்பு முந்தையElementSibling சொத்து என்றால் என்ன

Javaskiriptil Html Dom Uruppu Muntaiyaelementsibling Cottu Enral Enna



DOM ஆனது ' ஆவணப் பொருள் மாதிரி ” என்று HTML பக்கம் இணைய உலாவியில் ஏற்றப்படும் போது உருவாக்கப்பட்டது. இது ஒரு வேர் முனை மற்றும் பல பெற்றோர் மற்றும் குழந்தை முனைகளைக் கொண்ட ஒரு மரப் பொருளைக் குறிக்கிறது. இது அடிப்படையில் தற்போதைய வலைப்பக்கத்தில் பயன்படுத்தப்படும் HTML உறுப்புகளின் படிநிலை கட்டமைப்பைக் குறிக்கிறது. அதிலிருந்து தேவையான பெற்றோர் மற்றும் குழந்தை முனைகளை பயனர் எளிதாகவும் விரைவாகவும் தேடலாம். மேலும், ஒரு உறுப்பின் உடன்பிறப்புகளை அணுகவும் இது பயனரை அனுமதிக்கிறது. இது இலக்கு முனையுடன் தொடர்புடைய அடுத்த அல்லது முந்தைய உடன்பிறப்பாக இருக்கலாம். ஜாவாஸ்கிரிப்ட்டில், முந்தைய உடன்பிறப்பு முனை/உறுப்பைப் பயன்படுத்தி அணுகலாம் முந்தைய உறுப்புகள் உடன்பிறப்பு ”சொத்து.

இந்த இடுகை ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி HTML DOM உறுப்பு 'முந்தையElementSibling' பண்புகளை விளக்குகிறது.

HTML DOM உறுப்பு 'முந்தையElementSibling' சொத்து என்றால் என்ன?

DOM (ஆவண பொருள் மாதிரி) உறுப்பு ' முந்தைய உறுப்புகள் உடன்பிறப்பு ” என்பது படிக்க மட்டுமேயான சொத்து ஆகும், இது அதே மரத்தில் உள்ள ஒரு தனிமத்தின் முந்தைய உடன்பிறப்பை மீட்டெடுக்க உதவுகிறது. இந்த சொத்து முந்தைய உடன்பிறந்தவரின் உள்ளடக்கத்தை வழங்குகிறது.







தொடரியல்



உறுப்பு. முந்தைய உறுப்புகள் உடன்பிறப்பு

இந்த தொடரியல் ' லேசான கயிறு 'முந்தைய உடன்பிறந்தவரின் HTML உள்ளடக்கம், மற்றும்' ஏதுமில்லை 'அது இல்லை என்றால்.







'முந்தைய எலிமென்ட் சிப்லிங்' சொத்தின் செயல்பாட்டைக் காட்ட, மேலே வரையறுக்கப்பட்ட தொடரியல் நடைமுறையில் பயன்படுத்துவோம்.



எடுத்துக்காட்டு: முந்தைய உடன்பிறந்தவரின் உள்ளடக்கத்தைத் திரும்பப் பெறுவதற்கு 'முந்தைய உறுப்புகள்' சொத்தைப் பயன்படுத்துதல்

முந்தைய உடன்பிறந்தவரின் HTML உள்ளடக்கத்தைப் பெற, இந்த எடுத்துக்காட்டு JavaScript 'முந்தையElementSibling' பண்புகளைப் பயன்படுத்துகிறது.

HTML குறியீடு

முதலில், பின்வரும் HTML குறியீட்டின் கண்ணோட்டம்:

< உல் >
< அந்த ஐடி = 'முதல்' > HTML < / அந்த >
< அந்த ஐடி = 'இரண்டாவது' > CSS < / அந்த >
< அந்த ஐடி = 'மூன்றாவது' > ஜாவாஸ்கிரிப்ட் < / அந்த >
< / உல் >
< ஐடி = 'அதற்காக' >< / >

மேலே உள்ள குறியீடு வரிகளில்:

  • '
      ” குறிச்சொல் வரிசைப்படுத்தப்படாத பட்டியலைச் சேர்க்கிறது.
    • வரிசைப்படுத்தப்படாத பட்டியலின் உள்ளே, '' ஐப் பயன்படுத்தி பல உருப்படிகள் உட்பொதிக்கப்பட்டுள்ளன <அது> 'அவர்களுக்கு ஒதுக்கப்பட்ட ஐடிகளுடன் குறியிடவும்.
    • இறுதியாக, '

      'குறிச்சொல் 'பாரா' என்ற தனித்துவமான ஐடியுடன் வெற்றுப் பத்தியை உட்பொதிக்கிறது.

    ஜாவாஸ்கிரிப்ட் குறியீடு

    இப்போது, ​​ஜாவாஸ்கிரிப்ட் குறியீட்டைத் தொடரவும்:

    < கையால் எழுதப்பட்ட தாள் >
    உருப்படியை விடுங்கள் = ஆவணம். getElementById ( 'மூன்றாவது' ) . முந்தைய உறுப்புகள் உடன்பிறப்பு . உள் HTML ;
    ஆவணம். getElementById ( 'அதற்காக' ) . உள் HTML = ' மூன்றாவது உருப்படியின் முந்தைய உடன்பிறப்பு : ' + பொருள் ;
    கையால் எழுதப்பட்ட தாள் >

    மேலே உள்ள குறியீடு துணுக்கின் படி:

    • 'உருப்படி' மாறி முதலில் 'ஐப் பயன்படுத்துகிறது getElementById() இலக்கு பட்டியல் உருப்படியை அதன் 'மூன்றாவது' ஐடியைப் பயன்படுத்தி அணுகுவதற்கான முறை ' முந்தைய உறுப்புகள் உடன்பிறப்பு ”சொத்து அதன் முந்தைய சகோதரனைப் பெற.
    • அதன் பிறகு, ' getElementById() 'முறையானது சேர்க்கப்பட்ட வெற்றுப் பத்தியை அதன் ஐடி 'பாரா' ஐப் பயன்படுத்தி 'உருப்படி' மாறியின் மதிப்புடன் இணைக்கிறது, அதாவது முந்தைய உடன்பிறப்பு.

    வெளியீடு

    பார்த்தபடி, இலக்கு வைக்கப்பட்ட பொருளின் முந்தைய உடன்பிறப்பை முடிவு காட்டுகிறது, அதாவது (ஜாவாஸ்கிரிப்ட்).

    முடிவுரை

    ஜாவாஸ்கிரிப்ட் முன் வரையறுக்கப்பட்ட DOM உறுப்பை வழங்குகிறது ' முந்தைய உறுப்புகள் உடன்பிறப்பு 'உறுப்பின் முந்தைய உடன்பிறப்பை மீட்டெடுப்பதற்கான சொத்து. இலக்கு உறுப்பு இருக்கும் அதே மர மட்டத்திலிருந்து ஒரு தனிமத்தின் முந்தைய உடன்பிறப்பை இது வழங்குகிறது. இந்த இடுகை ஜாவாஸ்கிரிப்டில் உள்ள HTML DOM உறுப்பு 'முந்தையElementSibling' பண்புகளை ஆழமாக விளக்குகிறது.