வலைப்பக்கத்தில் உள்ளடக்கத்தை கையாள ஜாவாஸ்கிரிப்ட் பயன்படுத்தலாம் என்பது உங்களுக்குத் தெரியுமா? சுவாரஸ்யமானதாகத் தெரிகிறது? ஆவண பொருள் மாதிரி என்றால் என்ன என்பதைப் புரிந்துகொள்வோம். ஜாவாஸ்கிரிப்டில் DOM பின்வரும் முறையில்:
- ஜாவாஸ்கிரிப்டில் DOM என்றால் என்ன?
- ஜாவாஸ்கிரிப்டில் DOM இன் செயல்கள்
- DOM ஐ வினவுகிறது
- நிகழ்வுகளைக் கேட்பது
- படிவங்களுடன் தொடர்புகொள்வது
- HTML கூறுகளை உருவாக்குதல்
- CSS ஐச் சேர்த்தல்
ஜாவாஸ்கிரிப்டில் DOM என்றால் என்ன?
ஒரு வலைப்பக்கம் ஏற்றப்படும்போது உலாவியால் ஆவண பொருள் மாதிரி அல்லது DOM உருவாக்கப்படுகிறது. வரைகலை வடிவத்தில், இது முனைகள் என்று அழைக்கப்படும் உறுப்புகளின் மரம் போன்றது, அவை பக்கத்தின் ஒவ்வொரு உறுப்புகளையும் குறிக்கப் பயன்படுகின்றன.
எங்கள் வலைப்பக்கத்தின் அனைத்து DOM ஆவணப் பொருளின் உள்ளே அமர்ந்திருக்கும். நிரலாக்க ரீதியாக, இந்த மாதிரி எங்கள் பக்கத்தின் உள்ளடக்கத்தைப் படிக்க அல்லது மாற்ற அனுமதிக்கிறது . இது குளிர்ச்சியாக இல்லையா?
ஜாவாஸ்கிரிப்டில் DOM இன் செயல்கள்
இந்த மாதிரியுடன் நாம் செய்யக்கூடிய சில செயல்கள்:
பக்கத்தில் உள்ள DOM / இல் உள்ள HTML கூறுகளை மாற்றவும் / நீக்கவும்.
உறுப்புகளுக்கு CSS பாணிகளை மாற்றவும் மற்றும் சேர்க்கவும்
பண்புகளை (href, src, alt) போன்றவற்றைப் படித்து மாற்றவும்.
புதிய கூறுகளை உருவாக்கி அவற்றை DOM / பக்கத்தில் செருகவும்.
நிகழ்வு கேட்பவர்களை உறுப்புகளுடன் இணைக்கவும் (கிளிக் செய்யவும், விசை அழுத்தவும், சமர்ப்பிக்கவும்)
ஜாவாஸ்கிரிப்டில் DOM ஐ வினவுகிறது
ஒரு HTML உறுப்பைப் பிடிப்பது அல்லது சேர்க்க / மாற்ற அல்லது உள்ளடக்கத்தைப் பிடிப்பது வினவல் என்று அழைக்கப்படுகிறது.
HTML குறியீடு:
ஜாவாஸ்கிரிப்ட் மற்றும் DOM h1 {எழுத்துரு-அளவு: 60px}
ஜாவாஸ்கிரிப்ட் குறியீடு:
எல்லாவற்றையும் என்ன கண்காணிக்க முடியும்
var title = document.getElementById ('title') // cgangin color to red title.style.color = 'red' var body = document.getElementById ('body') // பின்னணி நிறத்தை வெளிர் நீல நிறமாக மாற்றுகிறது. backgroundColor = 'லைட்ப்ளூ'
ஜாவாஸ்கிரிப்ட் பயன்படுத்தி தலைப்பின் உரை நிறத்தை கருப்பு நிறத்தில் இருந்து சிவப்பு நிறமாக மாற்றினோம். இதைப் பயன்படுத்தி நாங்கள் இதை அடைந்தோம் .ஸ்டைல் சொத்து பின்னர் மதிப்பை மாற்றியது நிறம் to equal to நிகர .
இப்போது உடல் உறுப்பின் பின்னணி நிறத்தை மாற்றலாம் வெளிர் நீலம் .
இதன் மூலம், ஜாவாஸ்கிரிப்ட் கட்டுரையில் இந்த DOM இன் முடிவுக்கு வருகிறோம். ஆவண பொருள் மாதிரிகள் எவ்வாறு செயல்படுகின்றன மற்றும் ஜாவாஸ்கிரிப்டில் அதே DOM ஐ எவ்வாறு செயல்படுத்துவது என்பது பற்றிய புரிதல் உங்களுக்கு கிடைத்தது என்று நம்புகிறேன்.
ஜாவாஸ்கிரிப்டில் DOM பற்றி இப்போது உங்களுக்குத் தெரியும், பாருங்கள் வழங்கியவர் எடுரேகா. HTML5, CSS3, Twitter பூட்ஸ்டார்ப் 3, jQuery மற்றும் Google API களைப் பயன்படுத்தி சுவாரஸ்யமான வலைத்தளங்களை எவ்வாறு உருவாக்குவது என்பதை அறிய வலை மேம்பாட்டு சான்றிதழ் பயிற்சி உங்களுக்கு உதவும்.
எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? 'ஜாவாஸ்கிரிப்டில் DOM' இன் கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், நாங்கள் உங்களிடம் திரும்புவோம்.