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 (hermano anterior) que es un element
• nextElementChild: Apunta al next sibling (hermano siguiente) que es un element
• De esta manera ya no tenemos que preguntar antes si es un nodeType igual a 1
• Sin estos métodos
• let i, len, child = element.firstChild;
• while ( child ! = element.lastChild) {
• if ( child.nodeType == 1) {  // chequear si es un elemento
• processChild ( child );
• }
• child = child.nextSibling;
• }
• Sin estos métodos
• let i, len, child = element.firstElementChild;
• while ( child ! = element.lastElementChild) {
• processChild ( child );    // ya no es necesario chequear si es un elemento
• child = child.nextElementSibling;
• }

HTML5 : Incorpora propiedades y métodos útiles

• getElementsByClassName(): Disponible en document object y todos los HTML elements. Acepta un único argumento string que contiene una o más nombres de clases y retorna un nodeList que contienen todos los elementos que tienen los nombres de clases especificados.
• let allCurrentUsernames = document.getElementsByClassName("username current")
• let selected = document.getElementsById("myDiv").getElementsByClassName("selected")

• classList Property
• La propiedad className es un string con todas las clases que tiene un elemento. Por ejemplo: <div class="bd user disabled">...</div>.  Para eliminar las clase user del div deberíamos hacer un split, recorrer el array para buscar  la clase y al encontrarla hacer un splice para eliminar la clase en el array y hacer un join para convertir el array a string y grabarlo en className...... Es tedioso Por ésto classList Property es más útil.
• classList Property nos facilita trabajar con clases. 
• <div class="bd user disabled">...</div>
• div.classList.add("clasenueva1", "clasenueva2") Añade las clases al div
• div.classList.remove("disabled")
• div.classList.toggle("user")
• div.classList.contains("disabled")
• classList es iterable
• for (var I=0;  len =div.classList.length;  i<len; i++) {
• doSomeThing( div.classList[i] );
• }

• Focus management: HTML5 ayuda para el manejo del focus en el DOM
• document.activeElement: Apunta al elemento del DOM que tiene el focus. Por defecto, document.activeElement apunta al body en la primera carga de la página. Antes de cargarla es null.
• let button = document.getElementById("myButton");
• button.focus();
• alert( document.activeElement === button );   // true
• document.hasFocus(): devuelve un valor booleano si  document tiene focus.
• let button = document.getElementById("myButton");
• button.focus() ;
• alert( document.hasFocus() );  // true

• readyState Property: tiene dos valores: loading y complete
• if ( document.readyState == "complete" ) {
• // doSomeThing;
• }

• Compatibility Mode : compatMode tiene dos valores: CSS1Compat y BackCompat.
• if ( document.compatMode  == "CSS1Compat" ) {
• alert( "Standards mode");
• }
• if ( document.compatMode  == "BackCompat" ) {
• alert( "Quirks mode" );
• }

• head Property: A igual que document.body, document.head apunta al elemento head
• let head = document.head || document.getElementByTagName("head") [0]

• Character Set Properties: charset property indica el set de caracteres actual del documento
• alert(document.charset);    // "UTF-16"
• document.charset = "UTF-8";
• document.characterSet = "UTF-8";

• Custom data Attributes: Son atributos no standard con el prefijo data- y pueden accederse con la propiedad dataset de element. 
• La propiedad dataset es una instancia de DOMStringMap que es un mapeo de name-value.
• <div id = "myDiv" data-appId = "12345" data-myName="joan"> .... </div>
• let div = document.getElementById("myDiv");
• let appId = div.dataset.appId;
• let myName = div.dataset.myName;
• div.dataset.appId = 32478;
• div.dataset.myName = "Enric";
• if ( div.dataset.myName ) {
• alert("hello, " + div.dataset.myName);
• }

• innerHTML, outerHTML, innerText, outerText Property: 
• <div id="uno"><strong>Esto</strong> es un <a href="/"> Ejemplo</a></div>
• innerHTML del elemento #id nos devuelve el html interior de la etiqueta. Es interpretado en formato html
• <strong>Esto</strong> es un <a href="/"> Ejemplo</a>
• outerHTML del mismo nos devuelve el HTML completo del elemento
• <div id="uno"><strong>Esto</strong> es un <a href="/"> Ejemplo</a></div>
• innerText del mismo nos devuelve el texto interior del elemento, es decir, el texto contenido en las etiquetas html. Es interpretado como texto plano.
• "Esto es un ejemplo"
• outerText no es un atributo standard, pero habitualmente nos devolvería el texto interior (como innerText). La diferencia es que, si se le asigna algo, reemplazará todo el elemento en vez de solo su contenido.
• div.outerText = "hello!"; 
• La linea anterior se puede sustituir por:
• let text = document.createTextNode("Hello!");
• div.parentNode.replaceChild(text, div);
• Ejemplo:
• Ej: innerText 1:
• Ej: innerText 2:
• Ej: innerText 3:
• Ej: innerText 4:
• Ej: innerText 5:

• insertAdjacentHTML() Method: Acepta dos argumentos: la posición a insertar y el HTML text
• El primer argumento puede tener los siguientes valores
• "beforebegin": inserta justo antes del elemento como sibling(hermano) anterior.
• "afterbegin": inserta justo dentro del elemento como un nuevo hijo o una serie de hijos antes del primer hijo.
• "beforeend": inserta justo dentro del elemento como un nuevo hijo o una serie de hijos después del último hijo.
• "afterend": inserta justo después del elemento como un siguiente hermano
• Con listas, a veces es más eficiente que innerhtml
• Ejemplo:

• scrollIntoView() Method: Lleva el scroll del elemento actual al área visible de la ventana del navegador
• Ejemplo-1:
• Ejemplo-2:

• children Property: Esta propiedad es un HTMLCollection que contiene sólo los nodos hijos de un elemento que también son elementos.
• let childCount = element.children.length
• let firstChild = element.children[ 0 ];

• contains() Method: A menudo es necesario determinar si un node determinado es un descendiente de otro. Este descendiente puede ser un hijo, nieto, bisnieto..
• alert( document.documentElement.contains(document.body));  // true
• body es decendiente de html
• alert( document.childNodes[4].contains(document.body));   // true
• body es decendiente de html
• Ejemplo:

• compareDocumentPosition() Method: Este método compara la posición del nodo dado contra otro nodo en cualquier documento. Permite determinar donde están dos nodos DOM uno respecto al otro. Devuelve una bitmask indicando su relación.
• una máscara de bits  (bitmask) es una forma de almacenar múltiples puntos de datos dentro de un solo número. Terminas activando / desactivando los bits individuales del número, dándote un resultado final.
  
• Valores: NodeA.compareDocumentPosition(NodeB)

• Name	Value
  DOCUMENT_POSITION_DISCONNECTED	1 (los nodos están en documentos diferentes
  DOCUMENT_POSITION_PRECEDING	2 (el nodo B precede al nodo A)
  DOCUMENT_POSITION_FOLLOWING	4 (el nodo A precede al nodo B)
  DOCUMENT_POSITION_CONTAINS	8 (el nodo B contiene el nodo A)
  DOCUMENT_POSITION_CONTAINED_BY	16 (el nodo A contiene el nodo B)
  DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC	32 (para uso privado del navegador)

• let result = document.documentElement.compareDocumentPosition(document.body);
• alert (!! (result & 16) );    // true
• La aplicación de una másacar bitwise de 16 al resultado, devuelve un número distinto de cero y los operadores !! (not) convierten ese valor en un booleano.
• El valor de result es 20
• Dado que un nodo contiene otro "lo contiene" (+16) y lo precede (+4) el resultado es 20.
•