অভিভাবক খাঁটি জাভাস্ক্রিপ্টের শিশু উপাদান সন্ধান করা


142

কেবল খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করে কোনও নির্দিষ্ট পিতামাতার উপাদান (শ্রেণি বা আইডি সহ) এর একটি শিশু উপাদান খুঁজে পাওয়া সবচেয়ে কার্যকর পদ্ধতিটি কী হবে। কোনও jQuery বা অন্যান্য ফ্রেমওয়ার্ক নেই।

এই ক্ষেত্রে, ডিওএম গাছের গাছে একাধিক চাইল্ড 1 বা চাইল্ড 2 শ্রেণীর উপাদান থাকতে পারে এই ধরে নিয়ে আমার পিতামাতার চাইল্ড 1 বা চাইল্ড 2 খুঁজে পাওয়া দরকার । আমি কেবল পিতামাতার উপাদানগুলি চাই

    <div class="parent">
        <div class="child1">
            <div class="child2">
            </div>
        </div>
    </div>


1
আইডি সবচেয়ে সহজ উপায় হবে। এগুলি অনন্য হতে হবে, তাই আপনি ঠিক করতে পারেন document.getElementById('element-id')
ফেলিক্স ক্লিং

1
নিয়মিত ডোম কোয়েরিগুলি ব্যবহার করুন, তারপরে: শিশু নোডগুলি পাওয়ার জন্য
উপায়টি পড়ুন

উত্তর:


152

childrenসম্পত্তি উপাদানের একটি অ্যারের, তাই মত ফেরৎ:

parent = document.querySelector('.parent');
children = parent.children; // [<div class="child1">]

এর বিকল্পগুলি রয়েছে querySelector, যেমন document.getElementsByClassName('parent')[0]আপনি যদি ইচ্ছা করেন।


সম্পাদনা করুন: এখন যেহেতু আমি এটি সম্পর্কে চিন্তা করি, আপনি কেবল শ্রেণীর নাম রাখার querySelectorAllছদ্মবেশ পেতে ব্যবহার করতে পারেন :parentchild1

children = document.querySelectorAll('.parent .child1');

কিউএস এবং কিউএসএর মধ্যে পার্থক্যটি হ'ল পরেরটিটি নির্বাচকের সাথে মিলে সমস্ত উপাদানগুলি ফেরত দেয় , যখন প্রাক্তন কেবল এই জাতীয় উপাদানটি প্রথম প্রদান করে।


182

আপনার যদি ইতিমধ্যে থাকে তবে var parent = document.querySelector('.parent');আপনার parentবাচ্চাদের বাচ্চাদের অনুসন্ধানের সুযোগ দেওয়ার জন্য এটি করতে পারেন :

parent.querySelector('.child')

1
আপনি parent.querySelectorAll('.child')কোনও নোডলিস্টও ফিরিয়ে দিতে পারেন
স্কেমিওজস

19

কেবলমাত্র অন্য ধারণা যুক্ত করে আপনি তাত্ক্ষণিক শিশুদের পেতে শিশু নির্বাচনকারীকে ব্যবহার করতে পারেন

document.querySelectorAll(".parent > .child1");

শিশুদের ক্লাস। ch11 সহ সমস্ত তাত্ক্ষণিক শিশুদের ফিরিয়ে দেওয়া উচিত


আমি প্রত্যেকে দেখতে পেয়েছি getElementBy ** এর চেয়ে ক্যোয়ারিলেক্টরের পরামর্শ দিই। এটা আরও দক্ষ?
আন্দ্রে

সম্ভবত এটি সাহায্য করবে। stackoverflow.com/questions/14377590/…
ওয়ালিদ

2

আপনার একটি প্যারেন্ট উপাদান রয়েছে, আপনি নির্দিষ্ট বৈশিষ্ট্যের সমস্ত সন্তানের পেতে চান 1. পিতামাতাকে পান 2. পিতামাতার নোডনামটি parent.nodeName.toLowerCase()নোডনামকে নিম্নের ক্ষেত্রে রূপান্তর করে যেমন ডিআইভি ডিভিডি হবে 3. আরও নির্দিষ্ট উদ্দেশ্যে, একটি বৈশিষ্ট্য পান পিতামাতী উদা parent.getAttribute("id")। এটি আপনাকে idপিতামাতাদের 4 দেবে Then তারপরে document.QuerySelectorAll(paret.nodeName.toLowerCase()+"#"_parent.getAttribute("id")+" input " ); আপনি পিতামাতার নোডের ইনপুট বাচ্চাদের চান তবে ব্যবহার করুন

let parent = document.querySelector("div.classnameofthediv")
let parent_node = parent.nodeName.toLowerCase()
let parent_clas_arr = parent.getAttribute("class").split(" ");
let parent_clas_str = '';
  parent_clas_arr.forEach(e=>{
     parent_clas_str +=e+'.';
  })
let parent_class_name = parent_clas_str.substr(0, parent_clas_str.length-1)  //remove the last dot
let allchild = document.querySelectorAll(parent_node+"."+parent_class_name+" input")

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.