JavaScript'teki children ve childNodes arasındaki fark nedir?

306

JavaScript kullanarak kendimi buldum childNodesve childrenözellikleri ve koştu . Aralarındaki farkın ne olduğunu merak ediyorum. Ayrıca biri diğerine tercih edilir mi?

javascript dom

— John
kaynak

331

Bunun .childrenbir Öğe özelliği olduğunu anlayın . ¹ Yalnızca Elementler vardır .childrenve bu çocukların tümü Element tipindedir. ²

Ancak, Düğümün .childNodes bir özelliğidir . herhangi bir düğüm içerebilir. ³.childNodes

Somut bir örnek şöyle olabilir:

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

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

Çoğu zaman kullanmak istersiniz, .childrençünkü genellikle DOM manipülasyonunuzdaki Metin veya Yorum düğümleri üzerinde döngü yapmak istemezsiniz .

Metin düğümlerini değiştirmek istiyorsanız, .textContentbunun yerine büyük olasılıkla istersiniz . ⁴

^{1. Teknik olarak, Element tarafından dahil edilen bir karışım olan ParentNode özelliğidir .}
^{2. Hepsi birer elementtir çünkü sadece elementler içerebilen .childrenbir HTMLC seçimidir .}
^{3. Benzer şekilde, .childNodesbir DüğümListesi olduğu için herhangi bir düğümü tutabilir .}
^{4. Veya .innerText. Farklılıkları burada veya burada görün .}

— Raynos
kaynak

3

Evet, IE'nin

— Felix Kling

4

Aslında, çocuklar öğe değil, ana düğüm arabiriminin bir özelliğidir. usonsci.wordpress.com/2014/09/30/html-children-vs-childnodes

— victor

İOS 8.3 (belki diğerleri?) XML belgelerinde desteklenmiyor.children gibi görünüyor : jsfiddle.net/fbwbjvch/1

— Saebekassebil

4

Yalnızca XML düğümlü Microsoft Edge'de bu konuda sorun vardı. Microsoft Edge çocuklardan hoşlanmıyor gibi görünüyor. Bu iyi, o tarayıcının yeniden üretilmesini istemezdim.

— Dan-Nolan

1

"Element

— vs.Nod

23

Element.childrenSadece döner eleman ederken, çocukları Node.childNodesgetiri tüm düğüm çocuklar. Öğelerin düğüm olduğunu unutmayın, bu nedenle her ikisi de öğeler üzerinde kullanılabilir.

childNodesDaha güvenilir olduğuna inanıyorum . Örneğin, MDC (yukarıda bağlantılıdır) IE'nin childrenIE 9'da doğru olduğunu belirtir childNodes.

— Matthew Flaschen
kaynak

2

Lanet olsun, bu sadece IE 6-8'de çalışsaydı, bir rüya gerçek olurdu.

— Ry-

3

@minitech işe yarıyor (işin bir değeri için). Görünüşe göre .childrenyorum düğümlerini filtrelemez, ancak metin düğümlerini filtreler.

— Raynos

2

@Raynos: Kesinlikle - ile aynı .getElementsByTagName('*'). IE bazen çok sinir bozucu olabilir ...

— Ry-

childrenIE'yi destekleyen shim / polyfill uygulamaları vardır.

— 18'de

7

Şimdiye kadar iyi cevaplar, sadece kullanarak bir düğüm türünü kontrol edebileceğinizi eklemek istiyorum nodeType:

yourElement.nodeType

Bu size bir tamsayı verecektir: ( buradan alınır )

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

Mozilla'ya göre :

Aşağıdaki sabitler kullanımdan kaldırılmıştır ve artık kullanılmamalıdır: Düğüm.ATTRIBUTE_NODE, Düğüm.ENTITY_REFERENCE_NODE, Düğüm.ENTITY_NODE, Düğüm.NOTATION_NODE

— Csaba
kaynak

0

Birini seçmek aradığınız yönteme bağlıdır !?

ParentNode.children ile gideceğim :

Çünkü namedItemtüm çocuklardan döngü yapmadan veya kullanmaktan kaçınmadan doğrudan çocuk elemanlarından birini almamı sağlayan bir yöntem sağlar getElementById.

Örneğin

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

Node.childNodes ile gideceğim :

Örneğin forEachile çalışırken yöntem sağlar gibiwindow.IntersectionObserver

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

Chrome 83'te

Node.childNodes sağlar entries, forEach, item, keys, lengthvevalues

ParentNode.children sağlar item, lengthvenamedItem

— Max Ma
kaynak