माता-पिता की शुद्ध जावास्क्रिप्ट का बाल तत्व खोजना

Question

केवल शुद्ध जावास्क्रिप्ट का उपयोग करके किसी विशेष मूल तत्व के (कक्षा या आईडी के) बच्चे तत्व को खोजने के लिए सबसे कुशल विधि क्या होगी। कोई jQuery या अन्य चौखटे नहीं।

इस मामले में, मुझे लगता है की आवश्यकता होगी child1 या child2 के माता-पिता , यह मानते हुए डोम पेड़ कई हो सकता है child1 या child2 पेड़ में वर्ग तत्वों। मुझे केवल माता-पिता के तत्व चाहिए

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

Comments

stackoverflow.com/questions/7815374/…

— दिमित्री वोलोक

आईडी सबसे आसान तरीका होगा। उन्हें अद्वितीय होना है, इसलिए आप बस कर सकते हैं document.getElementById('element-id')।

— फेलिक्स क्लिंग

नियमित डोम प्रश्नों का उपयोग करें, फिर: बच्चे के नोड्स प्राप्त करने के लिए

— एलियास वान ओटगेम

Answer 1

childrenसंपत्ति तत्वों की एक सरणी, इसलिए की तरह प्रस्तुत करती है:

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

करने के लिए विकल्प हैं querySelector, जैसे document.getElementsByClassName('parent')[0]अगर आप की इच्छा है।

---

संपादित करें: अब जब मैं इसके बारे में सोचता हूं, तो आप केवल कक्षा का नाम रखने का querySelectorAllनिर्णय लेने के लिए उपयोग कर सकते parentहैं child1:

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

QS और qSA के बीच अंतर यह है कि उत्तरार्द्ध चयनकर्ता से मेल खाते सभी तत्वों को लौटाता है , जबकि पूर्व केवल पहले ऐसे तत्व को वापस करता है।

Answer 2

यदि आपके पास पहले से ही है, तो var parent = document.querySelector('.parent');आप इस खोज को parentबच्चों के लिए कर सकते हैं :

parent.querySelector('.child')

Comments

आप parent.querySelectorAll('.child')एक

— नोडलिस्ट

Answer 3

बस एक और विचार जोड़कर आप तत्काल बच्चों को पाने के लिए एक बच्चे के चयनकर्ता का उपयोग कर सकते हैं

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

वर्ग .child1 के साथ सभी तत्काल बच्चों को वापस करना चाहिए

Comments

मैं देख रहा हूँ हर कोई getElementBy ** की तुलना में querySelector का सुझाव दे रहा है। क्या यह अधिक कुशल है?

— आंद्रे

शायद इससे मदद मिलेगी। stackoverflow.com/questions/14377590/…

— Waleed

Answer 4

आपके पास माता-पिता तत्व है, आप विशिष्ट विशेषता के सभी बच्चे प्राप्त करना चाहते हैं। 1. माता-पिता को प्राप्त करें। माता-पिता का नाम बदलकर parent.nodeName.toLowerCase()निम्न मामले में नोडेनम का उपयोग करके प्राप्त करें। माता पिता उदा parent.getAttribute("id")। यह आपको idमाता-पिता के 4 देगा। फिर 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")