Entradas

Mostrando las entradas etiquetadas como childNodes

DOM Extensions

DOM Extensions Objetivos: Entender Selectors API Utilizar HTML5 DOM extensions Trabajar con propietary DOM extensions Selectors API   querySelector()   Acepta   query selector y devuelve  el primer elemento descendente que coincide con el patrón o null si no hay ningún elemento coincidente. Ejemplo: querySelectorAll() Acepta   query selector Este método retorna una static instance of NodeList Devuelve todos los nodos coincidentes en lugar de uno Ejemplo: matchesSelector() Acepta   query selector Retorna true si el elemento es seleccionado por el selector Ejemplo : Element traversal API childElementCount:  Devuelve el número de  child elements  (excluye  text nodes  y  comments ) firstElementChild: Apunta al first child que es un element lastElementChild:  Apunta al last  child  que es un  element previousElementChild:  Apunta al  previous sibling...

Document Object Model (DOM)

Imagen
DOM Objetivos: Entender el DOM y herencia de los nodes Trabajar con varios node types Javascript & DOM Javascript & DOM (codepen) - En páginas  HTML,   "document element" es siempre   "<html> element" - Cada pieza está representada por un "node" de hasta 12 tipos diferentes. Node Type:   someNode.nodeType Node.ELEMENT_NODE (1) Node.ATTRIBUTE_NODE (2) Node.TEXT_NODE (3) Node.CDATA_SECTION_NODE (4) Node.ENTITY_REFERENCE_NODE (5) Node.ENTITY_NODE (6) Node.PROCESSING_INSTRUCTION_NODE (7) Node.COMMENT_NODE (8) Node.DOCUMENT_NODE (9) Node.DOCUMENT_TYPE_NODE (10) Node.DOCUMENT_FRAGMENT_NODE (11) Node.NOTATION_NODE (12) if (someNode.nodeType == 1) { value = someNode.nodeName}  // será el nombre del TAG if (someNode.nodeType == 1) {var tipoNode = someNode.attributes[0].nodeType} // tipoNode = 2 Node Relationships Todos los nodos en un documento tienen relaciones sobre otros nodos. Cada nodo ti...