variable - ¿Cuál es la diferencia entre child y childNodes en JavaScript?
modificar dom javascript (3)
Buenas respuestas hasta ahora, solo quiero agregar que usted podría verificar el tipo de nodo usando nodeType :
yourElement.nodeType
Esto te dará un número entero: (tomado de here )
| 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. | |
Tenga en cuenta que según here :
Las siguientes constantes han quedado en desuso y ya no deben utilizarse: Node.ATTRIBUTE_NODE, Node.ENTITY_REFERENCE_NODE, Node.ENTITY_NODE, Node.NOTATION_NODE
Me encontré usando JavaScript y encontré propiedades de childNodes y childNodes . Me pregunto cuál es la diferencia entre ellos. ¿También es una preferida a la otra?
.children es una propiedad de un Element . Solo los Elementos tienen hijos, y estos niños son todos de tipo Elemento.
Sin embargo .childNodes es una propiedad de Node . .childNodes puede contener cualquier nodo.
Así que un ejemplo concreto sería
var el = document.createElement("div");
el.textContent = "foo"
el.childNodes.length === 1; // TextNode is a node child
el.children.length === 0; // no Element children
Por supuesto, .children es DOM4, por lo que la compatibilidad con el navegador es inestable. Sin embargo, si usa el DOM-shim , ¡los problemas de su navegador cruzado desaparecerán!
La mayoría de las veces desea usar .children porque, en general, no quiere pasar por encima de TextNodes o Comentarios en su manipulación DOM.
Si desea manipular TextNodes, probablemente desee .textContent en .textContent lugar.
Element.children solo devuelve elementos Node.childNodes , mientras que Node.childNodes devuelve todos los elementos Node.childNodes nodo. Tenga en cuenta que los elementos son nodos, por lo que ambos están disponibles en los elementos.
Creo que childNodes es más confiable. Por ejemplo, MDC (vinculado arriba) señala que IE solo tuvo children en IE 9. childNodes proporciona menos margen de error para los implementadores del navegador.