Entradas

Mostrando entradas de julio, 2019

DOM: styles, ranges

DOM  styles, ranges. styles: style object es una instancia de CSSStyleDeclaration y contiene la información de estilos especificada en el HTML style atributte pero  no hay información sobre los estilos que han caído en cascada desde las hojas de estilo incluidas o en línea. Todas las CSS property especificadas en style attribute están representadas como propiedades de style  object.  let myDiv = document.getElementById("myDiv"); myDiv.style.backgroundcolor = "red";   // set the background color myDiv.style.border = "1px solid black"; Los estilos especificados en  style attribute  pueden también recuperarse usando  style object <div id"myDiv" style="background-color: blue; width:10px">...</div> alert( myDiv.style.backgroundcolor );  // "blue" alert( myDiv.style.width );   // "10px" DOM Style Properties and Methods cssText:   cssText:   Permite acceder al CSS code de style attrib...
Leer más

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...
Leer más

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...
Leer más