এই কোড লাইন অনুযায়ী:

• ফাংশন সংজ্ঞায়িত করুন 'displayParent()' যেটি '' এলিমেন্ট অ্যাক্সেস করে তার ক্লাসের মাধ্যমে উল্লেখ করে 'document.querySelector()' পদ্ধতি
  দ্য ' বিকল্প ' সংগ্রহটি ড্রপ-ডাউন তালিকার সমস্ত '
  ' উপাদানগুলির সংগ্রহ এবং ' নির্বাচিত সূচক ” সম্পত্তি ড্রপ-ডাউন তালিকার জন্য নির্বাচিত বিকল্পের সূচক পুনরুদ্ধার করে।
  অবশেষে, ব্যবহার করুন 'document.querySelector()' পদ্ধতিটি আবার '

  ' উপাদানটি অ্যাক্সেস করতে এবং প্রয়োগ করা 'এর মাধ্যমে '' উপাদানের মূল উপাদানের সাথে যুক্ত করুন। প্যারেন্ট এলিমেন্ট ' এবং ' নোড নেম ” (প্যারেন্ট নোডের নাম প্রদর্শন করে) বৈশিষ্ট্য।

  সম্পূর্ণ কোড

  
  < html >
  < শরীর >
  < h1 > জাভাস্ক্রিপ্টে প্যারেন্ট এলিমেন্ট প্রপার্টি < / h1 >
  < h2 > ভাষা নির্বাচন করুন: < / h2 >
  < নির্বাচন করুন ক্লাস = 'উপাদান' >
  < বিকল্প > পাইথন < / বিকল্প >
  < বিকল্প > জাভা < / বিকল্প >
  < বিকল্প > জাভাস্ক্রিপ্ট < / বিকল্প >
  < / নির্বাচন করুন >
  < বোতাম অনক্লিক = 'displayParent()' ক্লাস = 'বোতাম' > 'বিকল্প' এলিমেন্টের প্যারেন্ট এলিমেন্ট প্রদর্শন করুন < / বোতাম >
  < div ক্লাস = 'তাপ' < / div < / শরীর >
  < শৈলী >
  শরীর{
  পাঠ্য-সারিবদ্ধ: কেন্দ্র;
  রঙ:#fff;
  ব্যাকগ্রাউন্ড-রঙ: ধূসর;
  উচ্চতা: 100%;
  }
  .বোতাম{
  উচ্চতা: 2rem;
  সীমানা-ব্যাসার্ধ: 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 আইডি = 'পিতামাতা' >
  < div আইডি = 'শিশু' >
  < h1 >প্রথম শিশু উপাদান< / h1 >
  < h1 >দ্বিতীয় শিশু উপাদান< / h1 >
  < / div >
  < / div >
  < / শরীর >
  < / html >

  এই কোড ব্লকে, দুটি '

  ' উপাদান তৈরি করুন এবং পরবর্তী '

  ' এলিমেন্টের চাইল্ড এলিমেন্টের উল্লেখ করে দুটি '

  ' এলিমেন্ট তৈরি করুন।

  জাভাস্ক্রিপ্ট কোড

  < লিপি >
  দিন পাওয়া = নথি getElementById ( 'শিশু' ) ;
  অভিভাবক যাক = পাওয়া . প্যারেন্ট এলিমেন্ট ;
  কনসোল লগ ( 'অভিভাবক উপাদান ->' , অভিভাবক outerHTML ) ;
  কনসোল লগ ( 'প্যারেন্ট এলিমেন্ট নোডের নাম ->' , অভিভাবক নোড নেম ) ;
  শিশুদের যাক = পাওয়া . শিশু ;
  জন্য ( যাক আমি = 0 ; i < শিশুদের দৈর্ঘ্য ; i ++ ) {
  কনসোল লগ ( `শিশু উপাদান $ { i } : ` , শিশু [ i ] . outerHTML ) ;
  }
  জন্য ( যাক আমি = 0 ; i < শিশুদের দৈর্ঘ্য ; i ++ ) {
  কনসোল লগ ( `চাইল্ড এলিমেন্ট নোডের নাম $ { i } : ` , শিশু [ i ] . নোড নেম ) ;
  }
  লিপি >

  উপরের কোডের ব্যাখ্যা নিম্নরূপ:

  • পরবর্তী “
    ” উপাদানটিকে এর “id” ব্যবহার করে অ্যাক্সেস করুন 'document.getElementById()' পদ্ধতি এবং 'এর মাধ্যমে এর মূল উপাদান আনুন প্যারেন্ট এলিমেন্ট 'সম্পত্তি।
  • এখন, অ্যাট্রিবিউট সহ প্যারেন্ট এলিমেন্ট প্রদর্শন করুন এবং প্রয়োগের মাধ্যমে শুরু এবং শেষ ট্যাগগুলি দেখান outerHTML 'সম্পত্তি।
  • এছাড়াও, প্যারেন্ট এলিমেন্টের নাম যেমন, নোডের নাম ' ব্যবহার করে ফেরত দিন নোড নেম 'সম্পত্তি।
  • এর পরে, 'শিশুদের' সম্পত্তি ব্যবহার করে উপাদানের শিশুদের অ্যাক্সেস করুন।
  • প্রয়োগ করুন ' জন্য সমস্ত চাইল্ড এলিমেন্টের পুনরাবৃত্তি করতে লুপ করুন এবং আলোচিত 'outerHTML' প্রপার্টির মাধ্যমে ট্যাগ সহ ফেরত দিন।
  • একইভাবে, চাইল্ড এলিমেন্টের নোডের নাম ফেরত দিতে আবার 'for' লুপ ব্যবহার করুন।

  সম্পূর্ণ কোড

  
  

  
  < html >
  < শরীর >
  < div আইডি = 'পিতামাতা' >
  < div আইডি = 'শিশু' >
  < h1 > প্রথম শিশু উপাদান < / h1 >
  < h1 > দ্বিতীয় শিশু উপাদান < / h1 >
  < / div >
  < / div >
  < / শরীর >
  < / html >
  < লিপি >
  let get = document.getElementById('child');
  let parent = get.parentElement;
  console.log('প্যারেন্ট এলিমেন্ট -> ', parent.outerHTML);
  console.log('প্যারেন্ট এলিমেন্ট নোডের নাম -> ', parent.nodeName);
  let Children = get.children;
  জন্য (আসুন আমি =0; i < children.length; i++ ) {
  console.log ( `শিশু উপাদান $ { i } : `, শিশু [ i ] .outerHTML ) ;
  }
  জন্য ( যাক আমি = 0 ; i < children.length; i++ ) {
  console.log ( `চাইল্ড এলিমেন্ট নোড নাম $ { i } : `, শিশু [ i ] .নোড নেম ) ;
  }
  < / লিপি >

  আউটপুট
  

  এই ফলাফলটি বোঝায় যে লক্ষ্য উপাদানটির পিতামাতা এবং শিশু উপাদানগুলি সেই অনুযায়ী বিস্তারিতভাবে (নোডের নাম সহ) প্রদর্শিত হয়।

  উদাহরণ 3: 'প্যারেন্টনোড' প্রপার্টি ব্যবহার করে প্যারেন্ট এলিমেন্ট অ্যাক্সেস করা

  এই প্রদর্শনীতে, একটি নির্দিষ্ট উপাদানের মূল উপাদানটি আহ্বান করা যেতে পারে এবং তারপরে এই নির্দিষ্ট উপাদানটির মূল উপাদানটিও আনা হবে যার ফলে একটি নেস্টেড আচরণ হবে। এটি 'এর মাধ্যমে অর্জন করা যেতে পারে প্যারেন্ট নোড ' এর পরিবর্তে বৈশিষ্ট্য যা উপাদানটির মূল নোড নিয়ে আসে।

  HTML কোড

  < html >
  < শরীর >
  < div আইডি = 'পিতামাতা' >
  < ol আইডি = 'তাপ' >
  < যে আইডি = 'টেম্পশিল্ড' >পাইথন< / যে >
  < যে >জাভা< / যে >
  < যে >জাভাস্ক্রিপ্ট< / যে >
  < / ol >
  < / div > < / শরীর >
  < / html >

  এখানে, একটি '

  ' উপাদান তৈরি করুন যাতে প্রদত্ত আইডি সহ '

  (অর্ডার করা তালিকা)' এবং '
  1. (তালিকা আইটেম)' উপাদান রয়েছে।

     জাভাস্ক্রিপ্ট কোড

     < লিপি >
     দিন পাওয়া = নথি getElementById ( 'টেমচাইল্ড' ) ;
     অভিভাবক যাক = পাওয়া . প্যারেন্ট নোড ;
     কনসোল লগ ( ''li'-> এর মূল উপাদান নোড' , অভিভাবক ) ;
     পেতে দিন = নথি getElementById ( 'তাপ' ) ;
     যাক পিতামাতা2 = get2. প্যারেন্ট নোড ;
     কনসোল লগ ( ''ol'-> এর প্যারেন্ট এলিমেন্ট নোড' , পিতামাতা2 ) ;
     লিপি >

     কোডের এই স্নিপেটের উপর ভিত্তি করে, নীচের প্রদত্ত পদক্ষেপগুলি সম্পাদন করুন:

     • 'এর মাধ্যমে '
     • ' উপাদানটি আহ্বান করুন getElementById() ' পদ্ধতি, ' ব্যবহার করে এর মূল উপাদানের নোড অ্যাক্সেস করুন প্যারেন্ট নোড ” সম্পত্তি, এবং প্যারেন্ট নোড প্রদর্শন করুন।
     • একইভাবে, এখন একই পদ্ধতির পুনরাবৃত্তি করে প্রদর্শিত প্যারেন্ট নোডের অর্থাৎ “
       ” প্যারেন্টকে আহ্বান করুন।

     সম্পূর্ণ কোড

     < html >
     < শরীর >
     < div আইডি = 'পিতামাতা' >
     < ol আইডি = 'তাপ' >
     < যে আইডি = 'টেম্পশিল্ড' > পাইথন < / যে >
     < যে > জাভা < / যে >
     < যে > জাভাস্ক্রিপ্ট < / যে >
     < / ol >
     < / div >
     < লিপি >
     let get = document.getElementById('tempchild');
     let parent = get.parentNode;
     console.log(''li'->' এর প্যারেন্ট এলিমেন্ট নোড, প্যারেন্ট);
     let get2 = document.getElementById('temp');
     let parent2 = get2.parentNode;
     console.log(''ol'->' এর প্যারেন্ট এলিমেন্ট নোড, parent2);
     < / লিপি >
     < / শরীর >
     < / html >

     আউটপুট
     

     এই ফলাফলটি নির্দেশ করে যে উভয় ক্ষেত্রেই প্যারেন্ট নোডগুলি সেই অনুযায়ী প্রদর্শিত হয়।

     উপসংহার

     মূল উপাদানটি HTML DOM ব্যবহার করে অ্যাক্সেস করা যেতে পারে “ প্যারেন্ট এলিমেন্ট 'এর সাথে মিলিত সম্পত্তি ' নোড নেম ' সম্পত্তি বা 'প্যারেন্টনোড' সম্পত্তির মাধ্যমে প্যারেন্ট নোড পুনরুদ্ধার করা। যাইহোক, পরিবর্তে চাইল্ড উপাদান অ্যাক্সেস করতে, ' শিশু 'সম্পত্তি।

     অন্যান্য

  বিভাগ

  • রাস্পবেরি পাই
  • ইথারনেট
  • অন্যান্য
  • ন্যানো
  • জুম
  • দারুচিনি
  • পর্যালোচনা
  • জোরিনোস
  • রেডিও
  • মাইনক্রাফ্ট
  • Ssh
  • Openvas
  • সঙ্কোচন
  • লারাভেল
  • এয়ারক্র্যাক
  • অফিস প্রোডাক্টিভিটি সফটওয়্যার
  • বুট
  • সিস্টেম কল
  • Sysctl
  • নেটওয়ার্কিং
  • জিপিইউ
  • জিম্প
  • প্লেক্স
  • উয়েফি
  • ডকার
  • ফায়ারওয়াল
  • ওয়্যারশার্ক
  • সিনোলজি
  • পিডিএফ
  • ইথেরিয়াম
  • তোতা ওএস
  • মহৎ
  • সেলিনাক্স
  • হাইপার-ভি
  • ফোন
  • কোড
  • জিনোম
  • উপাদেয়তা
  • ইঁদুর
  • Nmap
  • মেটাসপ্লয়েট
  • টরেন্ট
  • ট্যাবলেট
  • পাইচার্ম
  • কার্ল
  • কোথায়
  • Gcc
  • ফন্ট
  • Ssl
  • এনভিডিয়া
  • ছবি
  • ইউএসবি
  • স্কুইড
  • সঙ্গী
  • ভিএলসি মিডিয়া প্লেয়ার
  • ডিএনএস
  • বিটকয়েন
  • কীবোর্ড
  • Inkscape
  • জোড়া লাগানো
  • ফেডোরা
  • নিজস্ব ক্লাউড
  • স্ক্যানার
  • পরমাণু
  • লাল টুপি
  • টিম ভিউয়ার
  • স্কাইপ
  • ভিপিএন
  • Xfce
  • জুপিটার নোটবুক
  • Nfs
  • ব্লগ
  • Lvm
  • Suse
  • মিডিয়া প্লেয়ার
  • পজিক্স
  • বাষ্প
  • জেনকিন্স
  • ক্ষমতা
  • ওরাকল লিনাক্স
  • নেটস্ট্যাট
  • বর্গমিটার
  • ব্লুটুথ
  • এসএসডি
  • খপ্পর
  • Gentoo
  • ওডিসি
  • শ্রুতি
  • সিপিইউ
  • Tensorflow
  • অটোডেস্ক
  • লুবুন্টু
  • Llvm
  • উইন্ডোজ
  • মাইক্রোসফ্ট এজ (উত্তরাধিকার)
  • ইন্টারনেট এক্সপ্লোরার
  • দপ্তর
  • অন্যান্য
  • স্কাইপ
  • ডিএনএস
  • রাস্পবেরি পাই
  • ওয়েবক্যাম
  • মিডিয়া প্লেয়ার
  • cPanel
  • হ্যাপ্রক্সি
  • জিনোম
  • বুট
  • মহৎ
  • উবুন্টু 24.04
  • পরবর্তী মেঘ
  • পুণ্য
  • এনভিডিয়া
  • ইউএসবি-পাসথ্রু
  • ফেডোরা
  • #নিরাপদ বুট
  • ডিভাইস-পাসথ্রু
  • এসডিএন
  • ড্রাইভার-ইনস্টলেশন

  জনপ্রিয় পোস্ট

  সি প্রোগ্রামিং এ ফাইল হ্যান্ডলিং কি?

  অন্যান্য

  জাভাস্ক্রিপ্ট রেকর্ড ব্যাখ্যা?

  অন্যান্য

  রাস্পবেরি পাইতে কীভাবে RAM চেক করবেন

  অন্যান্য

  কীভাবে একটি কালি লিনাক্স বুটেবল ইউএসবি তৈরি করবেন

  অন্যান্য

  কিভাবে স্ট্রিমলিটে একটি মানচিত্রে ডেটা প্লট করবেন?

  অন্যান্য

  কোথায় ডিসকর্ড ভয়েস সার্ভারগুলি শারীরিকভাবে অবস্থিত এবং কীভাবে ভয়েস অঞ্চল স্যুইচ করবেন?

  অন্যান্য

  চলমান প্রক্রিয়াগুলির তালিকা এবং তাদের তৈরির সময় - উইনহেল্পলাইন

  উইন্ডোজ

  রাস্পবেরি পাই পাইথন শেখার জন্য ভাল

  অন্যান্য

  রিমোট ফাইল ওভাররাইট করতে 'গিট পুশ' বলুন

  অন্যান্য

  SQL কেস স্টেটমেন্ট যখন মান শূন্য হয়

  অন্যান্য

  কিভাবে WSL এর মাধ্যমে NVIDIA CUDA/cuDNN অ্যাক্সিলারেশন সহ Windows 10/11-এ সর্বশেষ TensorFlow ইনস্টল করবেন

  অন্যান্য

  গিট ক্লোন 'পাসওয়ার্ড প্রমাণীকরণের জন্য সমর্থন সরানো হয়েছে' ত্রুটি

  অন্যান্য

  আপনার রাস্পবেরি পাইতে কীভাবে একটি এয়ারপ্রিন্ট সার্ভার সেট আপ করবেন

  অন্যান্য

  লিনাক্সে রুফাস কীভাবে ব্যবহার করবেন

  অন্যান্য

  ওয়্যারশার্ক-এ TCP 3-ওয়ে হ্যান্ডসেক বিশ্লেষণ

  অন্যান্য

  গিট কমান্ডগুলি কীভাবে ড্রাই করবেন?

  অন্যান্য

  টেইলউইন্ড হোভার, ফোকাস এবং অ্যাক্টিভ স্টেট দিয়ে টেক্সট ডেকোরেশন কীভাবে প্রয়োগ করবেন

  অন্যান্য

  কিভাবে গোলং বিল্ড ট্যাগ যোগ করবেন

  অন্যান্য

  Tailwind-এ বেস স্টাইল যোগ করা হচ্ছে

  অন্যান্য

  মারিয়াডিবি ব্যবহারকারীদের তালিকা

  অন্যান্য