जावास्क्रिप्ट में किसी भी बच्चे के तत्व की जांच कैसे करें?

Question

सरल प्रश्न, मेरे पास एक तत्व है जिसे मैं पकड़ रहा हूं .getElementById ()। अगर मेरे कोई बच्चे हैं तो मैं कैसे जांच करूं?

Answer 1

कुछ तरीके:

if (element.firstChild) {
    // It has at least one
}

या hasChildNodes()समारोह:

if (element.hasChildNodes()) {
    // It has at least one
}

या की lengthसंपत्ति childNodes:

if (element.childNodes.length > 0) { // Or just `if (element.childNodes.length)`
    // It has at least one
}

यदि आप सभी आधुनिक ब्राउज़रों (और IE8 - वास्तव में, यहां तक ​​कि IE6) पर बाल तत्वों के बारे में जानना चाहते हैं (पाठ नोड्स, विशेषता नोड्स आदि के विपरीत), तो आप यह कर सकते हैं: (धन्यवाद फ्लोरियन !)

if (element.children.length > 0) { // Or just `if (element.children.length)`
    // It has at least one element as a child
}

यही कारण है कि पर निर्भर करता है childrenसंपत्ति है, जो में परिभाषित नहीं किया गया था DOM1 , Dom2 , या DOM3 , लेकिन जो लगभग सार्वभौमिक समर्थन हासिल है। (यह IE6 और ऊपर और क्रोम, फ़ायरफ़ॉक्स और ओपेरा में कम से कम नवंबर 2012 तक काम करता है , जब यह मूल रूप से लिखा गया था।) यदि पुराने मोबाइल उपकरणों का समर्थन करते हैं, तो समर्थन की जांच करना सुनिश्चित करें।

यदि आपको IE8 और पूर्व समर्थन की आवश्यकता नहीं है, तो आप यह भी कर सकते हैं:

if (element.firstElementChild) {
    // It has at least one element as a child
}

उस पर निर्भर है firstElementChild। जैसे children, इसे DOM1-3 में परिभाषित नहीं किया गया था, लेकिन इसके विपरीत childrenIE में IE9 तक जोड़ा नहीं गया था।

यदि आप DOM1 में परिभाषित किसी चीज़ से चिपके रहना चाहते हैं (हो सकता है कि आपको वास्तव में अस्पष्ट ब्राउज़रों का समर्थन करना है), तो आपको अधिक काम करना होगा:

var hasChildElements, child;
hasChildElements = false;
for (child = element.firstChild; child; child = child.nextSibling) {
    if (child.nodeType == 1) { // 1 == Element
        hasChildElements = true;
        break;
    }
}

यह सब DOM1 का हिस्सा है , और लगभग सार्वभौमिक रूप से समर्थित है।

इसे एक फंक्शन में लपेटना आसान होगा, जैसे:

function hasChildElement(elm) {
    var child, rv;

    if (elm.children) {
        // Supports `children`
        rv = elm.children.length !== 0;
    } else {
        // The hard way...
        rv = false;
        for (child = element.firstChild; !rv && child; child = child.nextSibling) {
            if (child.nodeType == 1) { // 1 == Element
                rv = true;
            }
        }
    }
    return rv;
}

Comments

ओह, मुझे एहसास नहीं था childrenकि केवल DOM4 में जोड़ा गया था। यह जानते हुए कि यह किसी भी ज्ञात ब्राउज़र में समर्थित है, मुझे लगा कि यह बहुत ज्यादा DOM0 / 1 था।

— फ्लोरियन मार्गाइन

अगर किसी विशिष्ट वर्ग के divतत्व हैं, तो मैं कैसे जांच करूं ? divxyz

— पूजा देसाई

FirstChild और hashildNodes किसी भी नोड को वापस करते हैं, न केवल बच्चों (नोड टाइप == 1)। आपको इसे सही करना चाहिए। ;-)

— एड्रियन माइयर

कभी लूप की हालत नहीं देखी for (child = element.firstChild; child; child = child.nextSibling ), जैसे मतदान किया। धन्यवाद TJ

— NiCk Newman

@Aaron: यह पूरी तरह संभव है element.firstChildगैर होने के लिए nullजब element.children.lengthहै 0: firstChildऔर इस तरह से संबंधित नोड्स तत्वों, पाठ नोड्स, टिप्पणी नोट, आदि सहित .; childrenविशुद्ध रूप से तत्व बच्चों की एक सूची है । आधुनिक ब्राउज़रों पर आप firstElementChildइसके बजाय उपयोग कर सकते हैं ।

— टीजे क्राउडर

Answer 2

जैसा कि स्लैशनिक और बॉबिसन का उल्लेख है, व्हॉट्सएप hasChildNodes()(टेक्स्ट नोड्स) के लिए सही वापस आएगा। हालाँकि, मैं यह व्यवहार नहीं चाहता था, और यह मेरे लिए काम था :)

element.getElementsByTagName('*').length > 0

संपादित करें : समान कार्यक्षमता के लिए, यह एक बेहतर समाधान है:

 element.children.length > 0

children[]का एक सबसेट है childNodes[], जिसमें केवल तत्व हैं।

अनुकूलता

Answer 3

आप जांच सकते हैं कि तत्व में बाल नोड्स हैं या नहीं element.hasChildNodes()। मोज़िला में खबरदार यह सच है अगर टैग के बाद व्हाट्सएप है तो आपको टैग प्रकार को सत्यापित करने की आवश्यकता होगी।

https://developer.mozilla.org/En/DOM/Node.hasChildNodes

Comments

सिर्फ मोज़िला में नहीं। यह सही व्यवहार है; यह IE है कि यह गलत हो जाता है।

— बोबिन्स

Answer 4

आप निम्न कार्य भी कर सकते हैं:

if (element.innerHTML.trim() !== '') {
    // It has at least one
} 

यह खाली तत्वों के इलाज के लिए ट्रिम () पद्धति का उपयोग करता है जिसमें केवल व्हाट्सएप (जिस स्थिति में hasChildNodesसच होता है) खाली होने के रूप में होता है।

JSBin डेमो

Comments

यह HTML टिप्पणियों के साथ कैसे व्यवहार करता है?

— विक्टर ज़मानियन

Answer 5

देर से लेकिन दस्तावेज़ टुकड़ा एक नोड हो सकता है:

function hasChild(el){
    var child = el && el.firstChild;
    while (child) {
        if (child.nodeType === 1 || child.nodeType === 11) {
            return true;
        }
        child = child.nextSibling;
    }
    return false;
}
// or
function hasChild(el){
    for (var i = 0; el && el.childNodes[i]; i++) {
        if (el.childNodes[i].nodeType === 1 || el.childNodes[i].nodeType === 11) {
            return true;
        }
    }
    return false;
}

देखें:
https://github.com/k-gun/so/blob/master/so.dom.js#L42
https://github.com/k-gun/so/blob/master/so.dom.js # L741

Answer 6

चाइल्ड क्लेमेंट का प्रयास करें :

if ( element.childElementCount !== 0 ){
      alert('i have children');
} else {
      alert('no kids here');
}

Answer 7

एक पुन: प्रयोज्य isEmpty( <selector> )कार्य।
आप इसे तत्वों के संग्रह की ओर भी चला सकते हैं (उदाहरण देखें)

const isEmpty = sel =>
    ![... document.querySelectorAll(sel)].some(el => el.innerHTML.trim() !== "");

console.log(
  isEmpty("#one"), // false
  isEmpty("#two"), // true
  isEmpty(".foo"), // false
  isEmpty(".bar")  // true
);

<div id="one">
 foo
</div>

<div id="two">
 
</div>

<div class="foo"></div>
<div class="foo"><p>foo</p></div>
<div class="foo"></div>

<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>

रिटर्न true(और लूप से बाहर निकलता है) जैसे ही एक तत्व में रिक्त स्थान या न्यूलाइन्स के पास किसी भी प्रकार की सामग्री होती है।

Answer 8

<script type="text/javascript">

function uwtPBSTree_NodeChecked(treeId, nodeId, bChecked) 
{
    //debugger;
    var selectedNode = igtree_getNodeById(nodeId);
    var ParentNodes = selectedNode.getChildNodes();

    var length = ParentNodes.length;

    if (bChecked) 
    {
/*                if (length != 0) {
                    for (i = 0; i < length; i++) {
                        ParentNodes[i].setChecked(true);
                    }
    }*/
    }
    else 
    {
        if (length != 0) 
        {
            for (i = 0; i < length; i++) 
            {
                ParentNodes[i].setChecked(false);
            }
        }
    }
}
</script>

<ignav:UltraWebTree ID="uwtPBSTree" runat="server"..........>
<ClientSideEvents NodeChecked="uwtPBSTree_NodeChecked"></ClientSideEvents>
</ignav:UltraWebTree>

Comments

कृपया केवल कोड-केवल समाधान प्रदान न करें। इसके अलावा, आपने वहां कोड-आउट टिप्पणी क्यों की है?

— ली टेलर

डाउनवोट: यह कोड अस्पष्ट है, कोड का हिस्सा अपवित्र है, कोई टिप्पणी या स्पष्टीकरण नहीं है और यह कॉपी / अतीत जैसा दिखता है। इसके अलावा XML भाग का यहां कोई लेना-देना नहीं है।

— एड्रियन मैयर

ये क्या पागलपन हे?

— NiCk न्यूमैन