জাভাস্ক্রিপ্টে শিশু এবং চাইল্ড নোডের মধ্যে পার্থক্য কী?

305

আমি নিজেকে জাভাস্ক্রিপ্ট ব্যবহার করে দেখেছি এবং আমি জুড়েছি childNodesএবং childrenবৈশিষ্ট্যগুলি। আমি ভাবছি তাদের মধ্যে পার্থক্য কী। একজনকে কি অন্যের চেয়ে পছন্দ হয়?

javascript dom

— জন
সূত্র

330

বুঝুন যে .childrenএকটি একটি সম্পত্তি উপাদান । ¹ কেবলমাত্র উপাদান রয়েছে .childrenএবং এই শিশুরা সব ধরণের উপাদান রয়েছে। ²

তবে নোডের .childNodes সম্পত্তি । যে কোনও নোড থাকতে পারে ³.childNodes

এর একটি দৃ concrete় উদাহরণ হ'ল:

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কারণ সাধারণত আপনি পাঠ্য বা মন্তব্যে লুপ করতে চান না আপনার ডিওএম ম্যানিপুলেশনের নোডগুলি ।

আপনি যদি পাঠ্য নোডগুলি পরিচালনা করতে চান তবে আপনি সম্ভবত এর .textContentপরিবর্তে চান । ⁴

^{1. প্রযুক্তিগতভাবে, এটি প্যারেন্টনোডের একটি বৈশিষ্ট্য , এলিমেন্টের অন্তর্ভুক্ত একটি মিশ্রণ।}
^{২. এগুলি সমস্ত উপাদান কারণ .childrenএকটি এইচটিএমএল সংগ্রহ , যাতে কেবল উপাদান থাকতে পারে।}
^{৩. একইভাবে, .childNodesকোনও নোড ধরে রাখতে পারে কারণ এটি নোডলিস্ট ।}
^{4. বা .innerText। পার্থক্য এখানে বা এখানে দেখুন ।}

— Raynos
সূত্র

3

হ্যাঁ, আইই কিছু সমস্যা বলে মনে হচ্ছে: quirksmode.org/dom/w3c_core.html#t71

— ফেলিক্স ক্লিং

4

প্রকৃতপক্ষে, শিশুরা মূল উপাদান নয়, প্যারেন্টনড ইন্টারফেসের সম্পত্তি। usonsci.wordpress.com/2014/09/30/html-children-vs-childnodes

— বিজয়ী

আইওএস 8.3 বলে মনে হচ্ছে (সম্ভবত অন্যরা?) এক্সএমএল নথিগুলিতে সমর্থন করে না.children : jsfiddle.net/fbwbjvch/1

— সায়েবাকাসেবিলে

4

মাইক্রোসফ্ট এজ এ এটি এক্সএমএল নোডের সাথে কেবল সমস্যা হয়েছিল। এটি মাইক্রোসফ্ট এজ শিশুদের পছন্দ করে না। এটি বেশ ভাল, আমি ব্রাউজারটি পুনরুত্পাদন করতে চাই না।

— ড্যান-নোলান

1

প্রাকৃতিক ফলো-আপ "উপাদান বনাম নোড" এর: stackoverflow.com/questions/132564/...

— user1454265

23

Element.childrenকেবলমাত্র মৌলিক শিশুদের Node.childNodesফিরিয়ে দেয় , যখন সমস্ত নোডের শিশুদের প্রদান করে। দ্রষ্টব্য যে উপাদানগুলি নোড, তাই উভয়ই উপাদানগুলিতে উপলব্ধ।

আমি বিশ্বাস করি childNodesআরও নির্ভরযোগ্য। উদাহরণস্বরূপ, এমডিসি (উপরে লিঙ্কযুক্ত) নোট করেছেন যে আইই কেবলমাত্র childrenআই 9 তে পেয়েছিল childNodesব্রাউজার বাস্তবায়নকারীদের দ্বারা ত্রুটির জন্য কম স্থান সরবরাহ করে।

— ম্যাথিউ ফ্ল্যাশেন
সূত্র

2

ডার্ন, যদি এটি কেবল 6-8-8- এ কাজ করে, তবে এটি একটি স্বপ্ন বাস্তব হতে পারে।

— রাই-

3

@ মিনিটেক এটি কাজ করে (কাজের কিছু মূল্যের জন্য)। দৃশ্যত .childrenমন্তব্য নোডগুলি ফিল্টার করে না, তবে এটি পাঠ্য নোডগুলি ফিল্টার করে।

— রায়নোস

2

@ রায়নোস: হুবহু - একই সাথে .getElementsByTagName('*')। আইই কখনও কখনও বিরক্তিকর হতে পারে ...

— রাই-

childrenসেই সমর্থন IE এর শিম / পলফিল বাস্তবায়ন রয়েছে ।

— ক্রেলি

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.   |  |

মজিলা অনুযায়ী নোট করুন :

নিম্নলিখিত ধ্রুবকগুলি অবচিত করা হয়েছে এবং এটি আর ব্যবহার করা উচিত নয়: নোড.এটিটিআরআইবিউটিস ননডে, নোড.এন্টিটি_এফটিএনসি_এনওডি, নোড.এনটিটি_নোডি, নোড.নোটেশন_নোডি

— Csaba
সূত্র

0

আপনি যে পদ্ধতিটি সন্ধান করছেন তার উপর একটি বাছাই করুন !?

আমি প্যারেন্টনোড.চাইল্ডেনদের সাথে যাব :

এটি উপলব্ধ করা হিসাবে namedItemপদ্ধতি যে আমাকে দেয় সরাসরি সব শিশুদের মাধ্যমে looping বা ব্যবহার করতে এড়ানো ছাড়া শিশুদের উপাদান এক পেতে getElementByIdইত্যাদি

যেমন

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

আমি নোড.চাইল্ড নোডের সাথে যাব :

এটি উপলব্ধ করা হিসাবে 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

— সর্বোচ্চ মা
সূত্র