HTML DOM: డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్‌ను ఎలా ఉపయోగించాలి



ఈ వ్యాసం మీకు HTML DOM, డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ యొక్క వివరణాత్మక మరియు సమగ్రమైన జ్ఞానాన్ని ఉదాహరణలతో అందిస్తుంది.

డాక్యుమెంట్ ఆబ్జెక్ట్ సూచిస్తుంది ఆ విండోలో ప్రదర్శించబడే పత్రం. డాక్యుమెంట్ ఆబ్జెక్ట్ వివిధ లక్షణాలను కలిగి ఉంది, ఇవి డాక్యుమెంట్ కంటెంట్‌ను యాక్సెస్ చేయడానికి మరియు సవరించడానికి అనుమతించే ఇతర వస్తువులను సూచిస్తాయి. ఈ వ్యాసంలో, మేము HTML DOM ను అర్థం చేసుకుంటాము.

HTML DOM కాన్సెప్ట్

డాక్యుమెంట్ చేయబడిన కంటెంట్ యాక్సెస్ చేయబడిన మరియు సవరించబడిన విధానాన్ని అంటారు డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ , లేదా DOM. వస్తువులు సోపానక్రమంలో నిర్వహించబడతాయి. ఈ క్రమానుగత నిర్మాణం వెబ్ పత్రంలోని వస్తువుల సంస్థకు వర్తిస్తుంది.





  • విండో ఆబ్జెక్ట్ & మైనస్ సోపానక్రమం యొక్క టాప్. ఇది ఆబ్జెక్ట్ సోపానక్రమం యొక్క అత్యంత మూలకం.
  • డాక్యుమెంట్ ఆబ్జెక్ట్ & మైనస్ విండోలోకి లోడ్ అయ్యే ప్రతి HTML పత్రం డాక్యుమెంట్ ఆబ్జెక్ట్ అవుతుంది. పత్రంలో పేజీలోని విషయాలు ఉన్నాయి.
  • ఫారం ఆబ్జెక్ట్ & మైనస్… ట్యాగ్‌లలో జతచేయబడిన ప్రతిదీ ఫారమ్ ఆబ్జెక్ట్‌ను సెట్ చేస్తుంది.
  • ఫారమ్ కంట్రోల్ ఎలిమెంట్స్ & మైనస్ ఫారమ్ ఆబ్జెక్ట్ టెక్స్ట్ ఫీల్డ్స్, బటన్లు, రేడియో బటన్లు మరియు చెక్బాక్స్ వంటి ఆ వస్తువు కోసం నిర్వచించిన అన్ని అంశాలను కలిగి ఉంటుంది.

HTML DOM అంటే ఏమిటి

డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ అనేది పత్రాల కోసం ప్రోగ్రామింగ్ API. ఆబ్జెక్ట్ మోడల్ అది మోడల్ చేసిన పత్రాల నిర్మాణాన్ని దగ్గరగా పోలి ఉంటుంది. ఉదాహరణకు, HTML పత్రం నుండి తీసిన ఈ పట్టికను పరిశీలించండి:

 
షాడీ గ్రోవ్ అయోలియన్
ఓవర్ ది రివర్, చార్లీ డోరియన్

HTML DOM అంటే ఏమిటి

ఈ విభాగం డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్‌ను మరింత స్పష్టంగా అర్థం చేసుకోవడానికి రూపొందించబడింది.



డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ డైనమిక్ HTML చే బలంగా ప్రభావితమైనప్పటికీ, స్థాయి 1 లో, ఇది అన్ని డైనమిక్ HTML ను అమలు చేయదు. ముఖ్యంగా, సంఘటనలు ఇంకా నిర్వచించబడలేదు. పత్రం యొక్క దృ, మైన, సౌకర్యవంతమైన నమూనాను అందించడం ద్వారా ఈ రకమైన కార్యాచరణకు దృ foundation మైన పునాది వేయడానికి స్థాయి 1 రూపొందించబడింది.

డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ బైనరీ స్పెసిఫికేషన్ కాదు. ఒకే భాషలో వ్రాయబడిన డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ ప్రోగ్రామ్‌లు ప్లాట్‌ఫారమ్‌లలో సోర్స్ కోడ్‌కు అనుకూలంగా ఉంటాయి, కానీ డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ ఏ విధమైన బైనరీ ఇంటర్‌పెరాబిలిటీని నిర్వచించదు.

డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ XML లేదా HTML కు వస్తువులను కొనసాగించే మార్గం కాదు. XML లో వస్తువులను ఎలా సూచించవచ్చో పేర్కొనడానికి బదులుగా, డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ XML మరియు HTML పత్రాలను వస్తువులుగా ఎలా సూచిస్తుందో తెలుపుతుంది, తద్వారా అవి ఆబ్జెక్ట్-ఓరియెంటెడ్ ప్రోగ్రామ్‌లలో ఉపయోగించబడతాయి.



HTML DOM కాదు

డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ డేటా నిర్మాణాల సమితి కాదు, ఇది ఇంటర్ఫేస్లను నిర్దేశించే ఆబ్జెక్ట్ మోడల్. ఈ పత్రంలో తల్లిదండ్రుల / పిల్లల సంబంధాలను చూపించే రేఖాచిత్రాలు ఉన్నప్పటికీ, ఇవి ప్రోగ్రామింగ్ ఇంటర్‌ఫేస్‌లచే నిర్వచించబడిన తార్కిక సంబంధాలు, ఏదైనా నిర్దిష్ట అంతర్గత డేటా నిర్మాణాల ప్రాతినిధ్యాలు కాదు.

డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ XML లేదా HTML యొక్క “నిజమైన అంతర్గత అర్థాలను” నిర్వచించలేదు. ఆ భాషల అర్థాలను భాషలే నిర్వచించాయి.

pl / sql మినహాయింపు నిర్వహణ

డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ ఈ సెమాంటిక్స్ను గౌరవించటానికి రూపొందించిన ప్రోగ్రామింగ్ మోడల్. మీరు XML మరియు HTML పత్రాలను వ్రాసే విధానానికి డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్‌కు ఎలాంటి మార్పులు లేవు, ఈ భాషలలో వ్రాయగల ఏదైనా పత్రాన్ని డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్‌లో సూచించవచ్చు.

డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్, దాని పేరు ఉన్నప్పటికీ, కాంపోనెంట్ ఆబ్జెక్ట్ మోడల్ (COM) కు పోటీదారు కాదు. COM, CORBA లాగా, ఇంటర్ఫేస్లు మరియు వస్తువులను పేర్కొనడానికి ఒక భాషా స్వతంత్ర మార్గం డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ అనేది HTML మరియు XML పత్రాల నిర్వహణ కోసం రూపొందించిన ఇంటర్ఫేస్లు మరియు వస్తువుల సమితి. DOM కావచ్చుCOM లేదా CORBA వంటి భాష-స్వతంత్ర వ్యవస్థలను ఉపయోగించి అమలు చేయబడుతుంది, ఈ పత్రంలో పేర్కొన్న జావా లేదా ECMAScript బైండింగ్ వంటి భాష-నిర్దిష్ట బైండింగ్లను ఉపయోగించి కూడా ఇది అమలు చేయబడవచ్చు.

డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ ఎక్కడ నుండి వచ్చింది

జావాస్క్రిప్ట్ స్క్రిప్ట్‌లు మరియు జావా ప్రోగ్రామ్‌లను వెబ్ బ్రౌజర్‌లలో పోర్టబుల్ చేయడానికి అనుమతించడానికి డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ ఒక స్పెసిఫికేషన్‌గా ఉద్భవించింది. డైనమిక్ HTML డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ యొక్క తక్షణ పూర్వీకుడు, మరియు ఇది మొదట బ్రౌజర్‌ల పరంగా ఎక్కువగా భావించబడింది.

ఏదేమైనా, డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ వర్కింగ్ గ్రూప్ ఏర్పడినప్పుడు, HTML లేదా XML ఎడిటర్లు మరియు డాక్యుమెంట్ రిపోజిటరీలతో సహా ఇతర డొమైన్లలోని విక్రేతలు కూడా చేరారు. XML అభివృద్ధి చెందడానికి ముందే ఈ విక్రేతలు చాలా మంది SGML తో పనిచేశారు, డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ SGML గ్రోవ్స్ మరియు హైటైమ్ ప్రమాణాలచే ప్రభావితమైంది. ఈ విక్రేతలలో కొందరు అందించడానికి పత్రాల కోసం వారి స్వంత వస్తువు నమూనాలను కూడా అభివృద్ధి చేశారుSGML / XML ఎడిటర్స్ లేదా డాక్యుమెంట్ రిపోజిటరీల కోసం ప్రోగ్రామింగ్ API లు మరియు ఈ ఆబ్జెక్ట్ మోడల్స్ డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్‌ను కూడా ప్రభావితం చేశాయి.

HTML DOM యొక్క లక్షణాలు

పత్రం వస్తువు ద్వారా ప్రాప్యత చేయగల మరియు సవరించగల పత్ర వస్తువుల లక్షణాలను చూద్దాం.

DOM-Graph
  1. విండో ఆబ్జెక్ట్: విండో ఆబ్జెక్ట్ ఎల్లప్పుడూ సోపానక్రమంలో అగ్రస్థానంలో ఉంటుంది.
  2. పత్రం వస్తువు: ఒక HTML పత్రం విండోలోకి లోడ్ అయినప్పుడు, అది డాక్యుమెంట్ ఆబ్జెక్ట్ అవుతుంది.
  3. ఫారం ఆబ్జెక్ట్: ఇది ప్రాతినిధ్యం వహిస్తుంది రూపం టాగ్లు.
  4. లింక్ వస్తువులు: ఇది ప్రాతినిధ్యం వహిస్తుంది లింక్ టాగ్లు.
  5. యాంకర్ వస్తువులు: ఇది ప్రాతినిధ్యం వహిస్తుంది a href టాగ్లు.
  6. ఫారమ్ కంట్రోల్ ఎలిమెంట్స్: ఫారం టెక్స్ట్ ఫీల్డ్‌లు, బటన్లు, రేడియో బటన్లు మరియు చెక్‌బాక్స్‌లు వంటి అనేక నియంత్రణ అంశాలను కలిగి ఉంటుంది.

పద్ధతులు డాక్యుమెంట్ ఆబ్జెక్ట్ :

  1. వ్రాయండి (“స్ట్రింగ్”): పత్రంలో ఇచ్చిన స్ట్రింగ్ వ్రాస్తుంది.
  2. getElementById (): ఇచ్చిన ఐడి విలువను కలిగి ఉన్న మూలకాన్ని అందిస్తుంది.
  3. getElementsByName (): ఇచ్చిన పేరు విలువను కలిగి ఉన్న అన్ని అంశాలను తిరిగి ఇస్తుంది.
  4. getElementsByTagName (): ఇచ్చిన ట్యాగ్ పేరు ఉన్న అన్ని అంశాలను అందిస్తుంది.
  5. getElementsByClassName (): ఇచ్చిన తరగతి పేరు ఉన్న అన్ని అంశాలను తిరిగి ఇస్తుంది.

HTML ఎలిమెంట్లను కనుగొనడం

మీరు జావాస్క్రిప్ట్‌తో HTML మూలకాలను యాక్సెస్ చేయాలనుకున్నప్పుడు, మీరు మొదట మూలకాలను కనుగొనాలి.

దీన్ని చేయడానికి కొన్ని మార్గాలు ఉన్నాయి:

  • ఐడి ద్వారా HTML మూలకాలను కనుగొనడం
  • ట్యాగ్ పేరు ద్వారా HTML మూలకాలను కనుగొనడం
  • తరగతి పేరు ద్వారా HTML మూలకాలను కనుగొనడం

ఐడి ద్వారా HTML ఎలిమెంట్‌ను కనుగొనడం

DOM లో ఒక HTML మూలకాన్ని కనుగొనడానికి సులభమైన మార్గం, మూలకం ఐడిని ఉపయోగించడం.

ఉదాహరణ

ట్యాగ్ పేరు ద్వారా HTML ఎలిమెంట్లను కనుగొనడం

ఈ ఉదాహరణ ఐడి = ”మెయిన్” తో మూలకాన్ని కనుగొంటుంది, ఆపై అన్నీ కనుగొంటుంది

“ప్రధాన” లోపల అంశాలు:

దీనితో, మేము ఈ HTML DOM వ్యాసం ముగింపుకు వచ్చాము. HTML DOM, డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ యొక్క వివిధ అంశాలపై మీకు అవగాహన ఉందని నేను ఆశిస్తున్నాను.

జావాలో క్లయింట్ సర్వర్ సాకెట్ ప్రోగ్రామింగ్

మా చూడండి ఇది బోధకుడు నేతృత్వంలోని ప్రత్యక్ష శిక్షణ మరియు నిజ జీవిత ప్రాజెక్ట్ అనుభవంతో వస్తుంది. ఈ శిక్షణ బ్యాక్ ఎండ్ మరియు ఫ్రంట్ ఎండ్ వెబ్ టెక్నాలజీలతో పనిచేయడానికి మీకు నైపుణ్యాలలో నైపుణ్యం కలిగిస్తుంది. ఇందులో వెబ్ డెవలప్‌మెంట్, j క్వెరీ, కోణీయ, నోడ్జెఎస్, ఎక్స్‌ప్రెస్‌జెఎస్ మరియు మొంగోడిబిపై శిక్షణ ఉంటుంది.

మాకు ప్రశ్న ఉందా? దయచేసి దీనిని “HTML ఇమేజెస్” బ్లాగ్ యొక్క వ్యాఖ్యల విభాగంలో పేర్కొనండి మరియు మేము మిమ్మల్ని సంప్రదిస్తాము.