ఈ కోడ్ లైన్ల ప్రకారం:

• ఫంక్షన్ నిర్వచించండి “డిస్ప్లే పేరెంట్()” దీని ద్వారా దాని తరగతిని సూచించడం ద్వారా “” మూలకాన్ని యాక్సెస్ చేస్తుంది “document.querySelector()” పద్ధతి.
  ది ' ఎంపికలు ” సేకరణ డ్రాప్-డౌన్ జాబితాలోని అన్ని “
  ” మూలకాల సేకరణను పొందుతుంది మరియు “ ఎంచుకున్న సూచిక ”ప్రాపర్టీ డ్రాప్-డౌన్ జాబితా కోసం ఎంచుకున్న ఎంపిక యొక్క సూచికను తిరిగి పొందుతుంది.
  చివరగా, ఉపయోగించండి “document.querySelector()” “

  ” మూలకాన్ని యాక్సెస్ చేయడానికి మరియు దానిని “” మూలకం యొక్క పేరెంట్ ఎలిమెంట్‌తో వర్తింపజేయడం ద్వారా జోడించడానికి మళ్లీ పద్ధతి పేరెంట్ ఎలిమెంట్ 'మరియు' నోడ్ పేరు ” (పేరెంట్ నోడ్ పేరును ప్రదర్శిస్తుంది) లక్షణాలు.

  మొత్తం కోడ్

  
  < html >
  < శరీరం >
  < h1 > జావాస్క్రిప్ట్‌లో పేరెంట్ ఎలిమెంట్ ప్రాపర్టీ < / h1 >
  < h2 > భాషను ఎంచుకోండి: < / h2 >
  < ఎంచుకోండి తరగతి = 'మూలకం' >
  < ఎంపిక > కొండచిలువ < / ఎంపిక >
  < ఎంపిక > జావా < / ఎంపిక >
  < ఎంపిక > జావాస్క్రిప్ట్ < / ఎంపిక >
  < / ఎంచుకోండి >
  < బటన్ క్లిక్ చేయండి = 'డిస్ప్లే పేరెంట్()' తరగతి = 'బటన్' > 'ఎంపిక' మూలకం యొక్క పేరెంట్ ఎలిమెంట్‌ను ప్రదర్శించండి < / బటన్ >
  < div తరగతి = 'ఉష్ణోగ్రత' >< / div >< / శరీరం >
  < శైలి >
  శరీరం
  టెక్స్ట్-అలైన్: సెంటర్;
  రంగు:#fff;
  నేపథ్య రంగు: బూడిద రంగు;
  ఎత్తు:100%;
  }
  .బటన్{
  ఎత్తు: 2 రెం;
  సరిహద్దు-వ్యాసార్థం:2px;
  వెడల్పు:35%;
  మార్జిన్:2rem ఆటో;
  ప్రదర్శన: బ్లాక్;
  రంగు:#ba0b0b;
  కర్సర్:పాయింటర్;
  }
  .temp{
  ఫాంట్-పరిమాణం:1.5rem;
  ఫాంట్-వెయిట్: బోల్డ్;
  }
  < / శైలి >
  < స్క్రిప్ట్ >
  ఫంక్షన్ displayParent() {
  var get = document.querySelector('.elem');
  var sel=get.options[get.selectedIndex];
  var append = document.querySelector('.temp');
  append.innerHTML='ఆప్షన్ మూలకం యొక్క పేరెంట్ ఎలిమెంట్ -> ' + sel.parentElement.nodeName;
  }
  < / స్క్రిప్ట్ >

  అవుట్‌పుట్
  

  ఇక్కడ, అన్ని చైల్డ్ నోడ్‌ల యొక్క పేరెంట్ ఎలిమెంట్ అంటే, డ్రాప్‌డౌన్ నుండి ఎంపిక చేయబడిన ఎంపికను చూడవచ్చు. “” మూలకం తిరిగి ఇవ్వబడింది అనగా, ' ఎంచుకోండి ”.

  ఉదాహరణ 2: జావాస్క్రిప్ట్‌లోని “పేరెంట్ ఎలిమెంట్” మరియు “చిల్డ్రన్” ప్రాపర్టీస్ ద్వారా పేరెంట్ మరియు చైల్డ్ ఎలిమెంట్స్ రెండింటినీ యాక్సెస్ చేయడం

  కింది కోడ్ ఉదాహరణ నిర్దిష్ట మూలకం యొక్క పేరెంట్ మరియు చైల్డ్ ఎలిమెంట్స్ రెండింటినీ యాక్సెస్ చేస్తుంది.

  HTML కోడ్

  < html >
  < శరీరం >
  < div id = 'తల్లిదండ్రులు' >
  < div id = 'పిల్ల' >
  < h1 >మొదటి చైల్డ్ ఎలిమెంట్< / h1 >
  < h1 >రెండవ చైల్డ్ ఎలిమెంట్< / h1 >
  < / div >
  < / div >
  < / శరీరం >
  < / html >

  ఈ కోడ్ బ్లాక్‌లో, రెండు “

  ” ఎలిమెంట్‌లను మరియు రెండు “

  ” ఎలిమెంట్‌లను తరువాతి “

  ” మూలకం యొక్క చైల్డ్ ఎలిమెంట్‌లను సూచిస్తాయి.

  జావాస్క్రిప్ట్ కోడ్

  < స్క్రిప్ట్ >
  వీలు పొందండి = పత్రం. getElementById ( 'బిడ్డ' ) ;
  తల్లిదండ్రులను అనుమతించండి = పొందండి . పేరెంట్ ఎలిమెంట్ ;
  కన్సోల్. లాగ్ ( 'పేరెంట్ ఎలిమెంట్ ->' , తల్లిదండ్రులు. బాహ్య HTML ) ;
  కన్సోల్. లాగ్ ( 'పేరెంట్ ఎలిమెంట్ నోడ్ పేరు -> ' , తల్లిదండ్రులు. నోడ్ పేరు ) ;
  పిల్లలను అనుమతించండి = పొందండి . పిల్లలు ;
  కోసం ( నేను అనుమతించు = 0 ; i < పిల్లలు. పొడవు ; i ++ ) {
  కన్సోల్. లాగ్ ( `చైల్డ్ ఎలిమెంట్ $ { i } : ` , పిల్లలు [ i ] . బాహ్య HTML ) ;
  }
  కోసం ( నేను అనుమతించు = 0 ; i < పిల్లలు. పొడవు ; i ++ ) {
  కన్సోల్. లాగ్ ( `చైల్డ్ ఎలిమెంట్ నోడ్ పేరు $ { i } : ` , పిల్లలు [ i ] . నోడ్ పేరు ) ;
  }
  స్క్రిప్ట్ >

  పై కోడ్ యొక్క వివరణ క్రింది విధంగా ఉంది:

  
  

  
  

  • తరువాతి “
    ” మూలకాన్ని దాని “id” ద్వారా యాక్సెస్ చేయండి “document.getElementById()” పద్ధతి మరియు దాని మాతృ మూలకాన్ని '' ద్వారా పొందండి పేరెంట్ ఎలిమెంట్ ”ఆస్తి.
  • ఇప్పుడు, పేరెంట్ ఎలిమెంట్‌ను లక్షణాలతో ప్రదర్శించండి మరియు వర్తించే “ ద్వారా ట్యాగ్‌లను ప్రారంభించండి మరియు ముగించండి బాహ్య HTML ”ఆస్తి.
  • అలాగే, పేరెంట్ ఎలిమెంట్ పేరును అంటే, నోడ్ పేరుని తిరిగి ఇవ్వండి ' నోడ్ పేరు ”ఆస్తి.
  • ఆ తర్వాత, 'పిల్లలు' ఆస్తిని ఉపయోగించి మూలకం యొక్క పిల్లలను యాక్సెస్ చేయండి.
  • వర్తించు ' కోసం ”అన్ని చైల్డ్ ఎలిమెంట్‌లను మళ్ళించడానికి మరియు చర్చించబడిన “ఔటర్‌హెచ్‌టిఎమ్‌ఎల్” ప్రాపర్టీ ద్వారా ట్యాగ్‌లతో వాటిని తిరిగి ఇవ్వడానికి లూప్ చేయండి.
  • అదేవిధంగా, చైల్డ్ ఎలిమెంట్స్ యొక్క నోడ్ పేర్లను కూడా తిరిగి ఇవ్వడానికి 'ఫర్' లూప్‌ని మళ్లీ ఉపయోగించండి.

  మొత్తం కోడ్

  < html >
  < శరీరం >
  < div id = 'తల్లిదండ్రులు' >
  < div id = 'పిల్ల' >
  < h1 > మొదటి చైల్డ్ ఎలిమెంట్ < / h1 >
  < h1 > రెండవ చైల్డ్ ఎలిమెంట్ < / h1 >
  < / div >
  < / div >
  < / శరీరం >
  < / html >
  < స్క్రిప్ట్ >
  let get = document.getElementById('child');
  లెట్ పేరెంట్ = get.parentElement;
  console.log('పేరెంట్ ఎలిమెంట్ -> ', parent.outerHTML);
  console.log('పేరెంట్ ఎలిమెంట్ నోడ్ పేరు -> ', parent.nodeName);
  పిల్లలను = పొందండి.పిల్లలను;
  కోసం (నేను =0; i < పిల్లలు.పొడవు; i++ ) {
  console.log ( `చైల్డ్ ఎలిమెంట్ $ { i } : `, పిల్లలు [ i ] .outerHTML ) ;
  }
  కోసం ( నేను అనుమతించు = 0 ; i < పిల్లలు.పొడవు; i++ ) {
  console.log ( `చైల్డ్ ఎలిమెంట్ నోడ్ పేరు $ { i } : `, పిల్లలు [ i ] .nodeName ) ;
  }
  < / స్క్రిప్ట్ >

  అవుట్‌పుట్
  

  లక్ష్య మూలకం యొక్క పేరెంట్ మరియు చైల్డ్ ఎలిమెంట్స్ తదనుగుణంగా వివరంగా (నోడ్ పేర్లతో పాటు) ప్రదర్శించబడతాయని ఈ ఫలితం సూచిస్తుంది.

  ఉదాహరణ 3: “పేరెంట్‌నోడ్” ప్రాపర్టీని ఉపయోగించి పేరెంట్ ఎలిమెంట్‌ను యాక్సెస్ చేయడం

  ఈ ప్రదర్శనలో, ఒక నిర్దిష్ట మూలకం యొక్క పేరెంట్ ఎలిమెంట్‌ను ప్రారంభించవచ్చు మరియు ఈ నిర్దిష్ట మూలకం యొక్క పేరెంట్ ఎలిమెంట్ కూడా పొందబడుతుంది, తద్వారా సమూహ ప్రవర్తన ఏర్పడుతుంది. దీని ద్వారా సాధించవచ్చు ' పేరెంట్ నోడ్ ” ఆస్తి బదులుగా మూలకం యొక్క పేరెంట్ నోడ్‌ని పొందుతుంది.

  HTML కోడ్

  < html >
  < శరీరం >
  < div id = 'తల్లిదండ్రులు' >
  < ఓల్ id = 'ఉష్ణోగ్రత' >
  < అని id = 'శిశువు' > పైథాన్ < / అని >
  < అని >జావా< / అని >
  < అని >జావాస్క్రిప్ట్< / అని >
  < / ఓల్ >
  < / div > < / శరీరం >
  < / html >

  ఇక్కడ, “

  ” మూలకాన్ని సృష్టించండి, అది “

  (ఆర్డర్ చేసిన జాబితా)” మరియు “
  1. (జాబితా అంశాలు)” అందించిన idలను కలిగి ఉంటుంది.

     జావాస్క్రిప్ట్ కోడ్

     < స్క్రిప్ట్ >
     వీలు పొందండి = పత్రం. getElementById ( 'టెంఛైల్డ్' ) ;
     తల్లిదండ్రులను అనుమతించండి = పొందండి . పేరెంట్ నోడ్ ;
     కన్సోల్. లాగ్ ( ''li' యొక్క పేరెంట్ ఎలిమెంట్ నోడ్-> ' , తల్లిదండ్రులు ) ;
     2 పొందనివ్వండి = పత్రం. getElementById ( 'ఉష్ణోగ్రత' ) ;
     తల్లిదండ్రులను అనుమతించండి2 = పొందండి2. పేరెంట్ నోడ్ ;
     కన్సోల్. లాగ్ ( 'ఓల్' యొక్క పేరెంట్ ఎలిమెంట్ నోడ్-> ' , తల్లిదండ్రులు2 ) ;
     స్క్రిప్ట్ >

     ఈ కోడ్ స్నిప్పెట్ ఆధారంగా, దిగువ అందించిన దశలను చేయండి:

     • “
     • ” మూలకాన్ని “ ద్వారా ప్రారంభించండి getElementById() “పద్ధతి, దాని పేరెంట్ ఎలిమెంట్ నోడ్‌ని “ని ఉపయోగించి యాక్సెస్ చేయండి పేరెంట్ నోడ్ ” ఆస్తి, మరియు పేరెంట్ నోడ్‌ను ప్రదర్శించండి.
     • అదేవిధంగా, ఇప్పుడు అదే పద్దతిని పునరావృతం చేయడం ద్వారా ప్రదర్శించబడిన పేరెంట్ నోడ్ అంటే “
       ” పేరెంట్‌ని ప్రారంభించండి.

     మొత్తం కోడ్

     < html >
     < శరీరం >
     < div id = 'తల్లిదండ్రులు' >
     < ఓల్ id = 'ఉష్ణోగ్రత' >
     < అని id = 'శిశువు' > కొండచిలువ < / అని >
     < అని > జావా < / అని >
     < అని > జావాస్క్రిప్ట్ < / అని >
     < / ఓల్ >
     < / div >
     < స్క్రిప్ట్ >
     let get = document.getElementById('tempchild');
     లెట్ పేరెంట్ = get.parentNode;
     console.log('li' యొక్క పేరెంట్ ఎలిమెంట్ నోడ్-> ', పేరెంట్);
     let get2 = document.getElementById('temp');
     లెట్ parent2 = get2.parentNode;
     console.log('ఓల్' యొక్క పేరెంట్ ఎలిమెంట్ నోడ్-> ', పేరెంట్2);
     < / స్క్రిప్ట్ >
     < / శరీరం >
     < / html >

     అవుట్‌పుట్
     

     రెండు సందర్భాలలో పేరెంట్ నోడ్‌లు తదనుగుణంగా ప్రదర్శించబడతాయని ఈ ఫలితం సూచిస్తుంది.

     ముగింపు

     HTML DOM 'ని ఉపయోగించడం ద్వారా పేరెంట్ ఎలిమెంట్‌ను యాక్సెస్ చేయవచ్చు పేరెంట్ ఎలిమెంట్ 'ఆస్తి'తో కలిపి నోడ్ పేరు ”ప్రాపర్టీ లేదా పేరెంట్ నోడ్‌ని “పేరెంట్‌నోడ్” ప్రాపర్టీ ద్వారా తిరిగి పొందడం. అయితే, బదులుగా చైల్డ్ ఎలిమెంట్‌ని యాక్సెస్ చేయడానికి, “ని ఉపయోగించండి బిడ్డ ”ఆస్తి.

     ఇతర

  వర్గం

  • రాస్ప్బెర్రీ పై
  • ఈథర్నెట్
  • ఇతర
  • నానో
  • జూమ్
  • దాల్చిన చెక్క
  • సమీక్షలు
  • జోరినోస్
  • రేడియో
  • Minecraft
  • Ssh
  • ఓపెన్‌వాస్
  • కుదింపు
  • లారావెల్
  • ఎయిర్ క్రాక్
  • ఆఫీస్ ప్రొడక్టివిటీ సాఫ్ట్‌వేర్
  • బూట్
  • సిస్టమ్ కాల్స్
  • Sysctl
  • నెట్‌వర్కింగ్
  • Gpu
  • జింప్
  • ప్లెక్స్
  • Uefi
  • డాకర్
  • ఫైర్వాల్
  • వైర్‌షార్క్
  • సైనాలజీ
  • Pdf
  • Ethereum
  • చిలుక Os
  • ఉత్కృష్టమైనది
  • సెలినక్స్
  • హైపర్- V
  • ఫోన్
  • కోడ్
  • గ్నోమ్
  • రుచికరమైన
  • మౌస్
  • Nmap
  • మెటాస్ప్లోయిట్
  • ప్రవాహం
  • టాబ్లెట్
  • పైచార్మ్
  • వంకరగా
  • ఎక్కడ
  • Gcc
  • ఫాంట్‌లు
  • Ssl
  • ఎన్విడియా
  • చిత్రాలు
  • Usb
  • స్క్విడ్
  • సహచరుడు
  • Vlc మీడియా ప్లేయర్
  • Dns
  • వికీపీడియా
  • కీబోర్డ్
  • ఇంక్ స్కేప్
  • గుప్తీకరణ
  • ఫెడోరా
  • సొంత క్లౌడ్
  • స్కానర్
  • అణువు
  • రెడ్ టోపీ
  • టీమ్ వ్యూయర్
  • స్కైప్
  • Vpn
  • Xfce
  • జూపిటర్ నోట్బుక్
  • Nfs
  • బ్లాగ్
  • Lvm
  • Suse
  • మీడియా ప్లేయర్లు
  • Posix
  • ఆవిరి
  • జెంకిన్స్
  • శక్తి
  • ఒరాకిల్ లైనక్స్
  • నెట్‌స్టాట్
  • Sqm
  • బ్లూటూత్
  • Ssd
  • పట్టు
  • జెంటూ
  • ఒడిస్సీ
  • ఆడియో
  • Cpu
  • టెన్సర్ఫ్లో
  • ఆటోడెస్క్
  • లుబుంటు
  • Llvm
  • విండోస్
  • మైక్రోసాఫ్ట్ ఎడ్జ్ (లెగసీ)
  • ఇంటర్నెట్ ఎక్స్ ప్లోరర్
  • కార్యాలయం
  • ఇతర
  • స్కైప్
  • రాస్ప్బెర్రీ పై
  • వెబ్క్యామ్
  • మీడియా ప్లేయర్లు
  • cPanel
  • హాప్రాక్సీ
  • గ్నోమ్
  • బూట్
  • ఉత్కృష్టమైన
  • ఉబుంటు 24.04
  • తదుపరి క్లౌడ్
  • ధర్మం
  • ఎన్విడియా
  • usb-పాస్‌త్రూ
  • ఫెడోరా
  • #సురక్షిత-బూట్

  ప్రముఖ పోస్ట్లు

  ఉబుంటు 22.04 LTSలో సబ్‌లైమ్ టెక్స్ట్ 4ను ఎలా ఇన్‌స్టాల్ చేయాలి

  ఉత్కృష్టమైన

  విండోస్ ప్యాకేజీ మేనేజర్ అంటే ఏమిటి

  ఇతర

  జావాస్క్రిప్ట్‌ని ఉపయోగించి డైనమిక్‌గా HTML కోడ్‌ని ఎలా వ్రాయాలి

  ఇతర

  డెబియన్ 12 బుక్‌వార్మ్‌లో డాకర్ కంపోజ్‌ను ఎలా ఇన్‌స్టాల్ చేయాలి

  ఇతర

  Checkmk ద్వారా రాస్ప్బెర్రీ పైని పర్యవేక్షించండి

  ఇతర

  Linux Mint 21లో అడ్మినర్‌ను ఎలా ఇన్‌స్టాల్ చేయాలి

  ఇతర

  MATLABలో వివిధ రకాలను కలిగి ఉన్న నేమ్డ్ వేరియబుల్స్‌తో టేబుల్ అర్రేని ఎలా సృష్టించాలి

  ఇతర

  Androidలో నాకు ఇష్టమైనవి ఎక్కడ ఉన్నాయి

  ఇతర

  SQL సర్వర్ లాస్ట్_వాల్యూ() ఫంక్షన్

  ఇతర

  Gitలో HEAD^ మరియు HEAD~ మధ్య తేడా ఏమిటి?

  ఇతర

  GitLab UIలో ట్యాగ్‌లను ఎలా సృష్టించాలి?

  ఇతర

  SQL సర్వర్ వినియోగదారుని సృష్టించండి

  ఇతర

  URLకి దారి మళ్లించే HTML రద్దు బటన్‌ను ఎలా సృష్టించాలి

  ఇతర

  Tailwindలో 'జస్టిఫై-కంటెంట్'తో బ్రేక్‌పాయింట్‌లు మరియు మీడియా ప్రశ్నలను ఎలా దరఖాస్తు చేయాలి?

  ఇతర

  ఐఫోన్‌లో ఖాళీని ఖాళీ చేయడానికి ఆఫ్‌లోడ్ ఉపయోగించని యాప్‌లను ఎలా ఉపయోగించాలి

  ఇతర

  PostGIS సర్వర్‌ను డాకర్ కంటైనర్‌గా అమలు చేయండి

  ఇతర

  జావా భాషలో ఫైబొనాక్సీ సంఖ్యలు

  ఇతర

  C++ బైట్అర్రే

  ఇతర

  Gitలో చరిత్రను తిరిగి వ్రాయడం సాధనం | వివరించారు

  ఇతర

  పాండాలు మరియు పరిస్థితి

  ఇతర