जावास्क्रिप्ट में बच्चे और बच्चे के बीच अंतर क्या है?

305

मैंने अपने आप को जावास्क्रिप्ट का उपयोग करते हुए पाया है और मैं भाग गया childNodesऔर childrenगुण मैं सोच रहा हूं कि उनमें क्या अंतर है। भी एक दूसरे के लिए पसंदीदा है?

javascript dom

— जॉन
स्रोत

330

समझें कि .childrenयह एक तत्व की संपत्ति है । ¹ केवल तत्व हैं .children, और ये बच्चे सभी प्रकार के तत्व हैं। ²

हालांकि, नोड .childNodes की एक संपत्ति है । किसी भी नोड हो सकते हैं। ³.childNodes

एक ठोस उदाहरण होगा:

let el = document.createElement("div");
el.textContent = "foo";

el.childNodes.length === 1; // Contains a Text node child.
el.children.length === 0;   // No Element children.

अधिकांश समय, आप उपयोग करना चाहते हैं .childrenक्योंकि आम तौर पर आप अपने DOM हेरफेर में पाठ या टिप्पणी नोड्स पर लूप नहीं करना चाहते हैं ।

यदि आप पाठ नोड्स में हेरफेर करना चाहते हैं, तो आप शायद .textContentइसके बजाय चाहते हैं। ⁴

^{1. तकनीकी रूप से, यह ParentNode का एक गुण है , जो एक तत्व है जो तत्व द्वारा शामिल किया गया है।}
^{2. वे सभी तत्व हैं क्योंकि .childrenएक है HTMLCollection है, जो केवल तत्व हो सकते हैं।}
^{3. इसी तरह, .childNodesकोई भी नोड पकड़ सकता है क्योंकि यह एक नोडलिस्ट है ।}
^{4. या .innerText। यहां या यहां अंतर देखें ।}

— Raynos
स्रोत

3

हाँ, IE के लिए कुछ समस्याएं हैं: quirksmode.org/dom/w3c_core.html#t71

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

4

दरअसल, बच्चे पेरेंटोड इंटरफ़ेस का एक गुण है, तत्व नहीं। usonsci.wordpress.com/2014/09/30/html-children-vs-childnodes

— विजेता

IOS 8.3 लगता है (शायद अन्य?) XML दस्तावेजों पर समर्थन नहीं करता है.children : jsfiddle.net/fbwbjvch/1

— Saebekassebil

4

केवल XML नोड्स के साथ Microsoft एज पर इसके साथ परेशानी थी। ऐसा प्रतीत होता है कि Microsoft Edge बच्चों को पसंद नहीं है। यह अच्छा है, मैं नहीं चाहूंगा कि ब्राउज़र पुन: पेश हो।

— दान-नोलन

1

"एलिमेंट बनाम नोड" का प्राकृतिक अनुवर्ती: stackoverflow.com/questions/132564/…

— user1454265

23

Element.childrenकेवल तत्व बच्चों को Node.childNodesदेता है , जबकि सभी नोड बच्चों को देता है । ध्यान दें कि तत्व नोड हैं, इसलिए दोनों तत्वों पर उपलब्ध हैं।

मेरा मानना childNodesहै कि अधिक विश्वसनीय है। उदाहरण के लिए, एमडीसी (ऊपर लिंक किया गया) नोट करता है कि IE केवल childrenIE 9 में सही childNodesहै। ब्राउज़र कार्यान्वयनकर्ताओं द्वारा त्रुटि के लिए कम जगह प्रदान करता है।

— मैथ्यू Flaschen
स्रोत

2

डार, अगर यह केवल IE 6-8 पर काम करता है, तो यह एक सपना सच होगा।

— Ry-

3

@ मिनिटेक यह काम करता है (काम के कुछ मूल्य के लिए)। जाहिरा तौर पर .childrenटिप्पणी नोड्स को फ़िल्टर नहीं करता है, लेकिन यह टेक्स्ट नोड्स को फ़िल्टर करता है।

— रेयानोस

2

@ रेयानोस: बिल्कुल - उसी के साथ .getElementsByTagName('*')। आईई इतना परेशान कभी कभी हो सकता है ...

— Ry-

childrenउस समर्थन IE के शिम / पॉलीफ़िल कार्यान्वयन हैं ।

— 07

7

अब तक के अच्छे उत्तर, मैं केवल यह जोड़ना चाहता हूं कि आप एक नोड के प्रकार की जांच कर सकते हैं nodeType:

yourElement.nodeType

यह आपको एक पूर्णांक देगा: ( यहाँ से लिया गया )

| Value |             Constant             |                          Description                          |  |
|-------|----------------------------------|---------------------------------------------------------------|--|
|    1  | Node.ELEMENT_NODE                | An Element node such as <p> or <div>.                         |  |
|    2  | Node.ATTRIBUTE_NODE              | An Attribute of an Element. The element attributes            |  |
|       |                                  | are no longer implementing the Node interface in              |  |
|       |                                  | DOM4 specification.                                           |  |
|    3  | Node.TEXT_NODE                   | The actual Text of Element or Attr.                           |  |
|    4  | Node.CDATA_SECTION_NODE          | A CDATASection.                                               |  |
|    5  | Node.ENTITY_REFERENCE_NODE       | An XML Entity Reference node. Removed in DOM4 specification.  |  |
|    6  | Node.ENTITY_NODE                 | An XML <!ENTITY ...> node. Removed in DOM4 specification.     |  |
|    7  | Node.PROCESSING_INSTRUCTION_NODE | A ProcessingInstruction of an XML document                    |  |
|       |                                  | such as <?xml-stylesheet ... ?> declaration.                  |  |
|    8  | Node.COMMENT_NODE                | A Comment node.                                               |  |
|    9  | Node.DOCUMENT_NODE               | A Document node.                                              |  |
|   10  | Node.DOCUMENT_TYPE_NODE          | A DocumentType node e.g. <!DOCTYPE html> for HTML5 documents. |  |
|   11  | Node.DOCUMENT_FRAGMENT_NODE      | A DocumentFragment node.                                      |  |
|   12  | Node.NOTATION_NODE               | An XML <!NOTATION ...> node. Removed in DOM4 specification.   |  |

ध्यान दें कि मोज़िला के अनुसार :

निम्नलिखित स्थिरांक को हटा दिया गया है और अब इसका उपयोग नहीं किया जाना चाहिए: Node.ATTRIBUTE_NODE, Node.ENTITY_REFERENCE_NODE, Node.ENTITY_NODE, Node.NOTATION_NODE

— कसाबा
स्रोत

0

आप जिस विधि की तलाश कर रहे हैं, उस पर एक उठाओ !?

मैं ParentNode.children के साथ जाऊंगा :

जैसा कि यह ऐसी namedItemविधि प्रदान करता है जो मुझे सभी बच्चों में से किसी एक बच्चे के तत्वों को प्राप्त करने की अनुमति देता है या सभी बच्चों को इस्तेमाल करने से रोकता है getElementById।

जैसे

ParentNode.children.namedItem('ChildElement-ID'); // JS
ref.current.children.namedItem('ChildElement-ID'); // React
this.$refs.ref.children.namedItem('ChildElement-ID'); // Vue

मैं Node.childNodes के साथ जाऊंगा :

forEachजब मैं window.IntersectionObserver उदाहरण के साथ काम करता हूं तो यह विधि प्रदान करता है

nodeList.forEach((node) => { observer.observe(node) })
// IE11 does not support forEach on nodeList, but easy to be polyfilled.

क्रोम 83 पर

Node.childNodes प्रदान करता है entries, forEach, item, keys, lengthऔरvalues

ParentNode.children प्रदान करता है item, lengthऔरnamedItem

— मैक्स मा
स्रोत