DOM Navegación y Rango

Desplazarse al índice de navegación

Métodos y propiedades utilizados en los ejemplos

getElementById (Identificador)

(DOM Núcleo: Método de Document) Devuelve el nodo Elemento cuyo id es Identificador.

documentElement

(DOM Núcleo: Atributo de Document) Devuelve el elemento raíz del documento.

createElement (Tipo)

(DOM Núcleo: Método de Document) Crea un nodo tipo Element del tipo especificado en Tipo.

createTextNode (Cadena)

(DOM Núcleo: Método de Document) Crea un nodo tipo Text con el valor Cadena.

appendChild (nuevoNodo)

(DOM Núcleo: Método de Node) Añade el nodo nuevoNodo al final del conjunto de hijos del nodo al que se aplica.

childNodes

(DOM Núcleo: Propiedad de Node) Devuelve una lista ordenada con los hijos del nodo.

parentNode

(DOM Núcleo: Propiedad de Node) Devuelve el padre del nodo dado.

nodeValue

(DOM Núcleo: Propiedad de Node) El valor del nodo. Dependiendo del tipo de nodo, esto tiene un sentido u otro (el valor del atributo en nodos Attr, el texto de los nodos Text, null en los nodos Element, etc.).

firstChild

(DOM Núcleo: Propiedad de Node) El primer hijo del nodo al que se aplica.

nodeName

(DOM Núcleo: Propiedad de Node) El nombre del nodo. Dependiendo del tipo de nodo, esto tiene un sentido u otro (el nombre del atributo en nodos Attr, el nombre de la etiqueta en los nodos Element, etc.).

hasAttribute

(DOM Núcleo: Método de Node) Devuelve verdadero si el nodo tiene atributos.

createTreeWalker (Raiz, queMostrar, Filtro, Entidad)

(DOM Navegación: Método de DocumentTraversal) Crea un objeto TreeWalker, a partir de la Raiz especificada, mostrando los nodos especificados por el valor de queMostrar, usando Filtro y expandiendo las referencias a entidades dependiendo del valor de Entidad.

nextNode ()

(DOM Navegación: Método de TreeWalker) Devuelve el siguiente nodo visible a través del filtro del objeto al que se aplica.

createRange ()

(DOM Rango: Método de DocumentRange) Devuelve un nuevo objeto Range, sin contenido y con sus límites situados al principio del documento.

setStart (Node, Número) y setEnd (Node, Número)

(DOM Rango: Métodos de Range) Definen los límites del rango al que se aplica, situándolos en el nodo Node en el carácter Número.

extractContents ()

(DOM Rango: Método de Range) Mueve el contenido del rango a un objeto DocumentFragment y devuelve una referencia a este último.

deleteContents ()

(DOM Rango: Método de Range) Elimina el contenido del rango de aplicación.

detach ()

(DOM Rango: Método de Range) Indica a la aplicación que el rango puede desecharse y liberar cualquier recurso que se esté asociando con él.

Uso de la interfaz TreeWalker

Obtención de los atributos href de los enlaces de la página utilizando un filtro asociado a un TreeWalker.

function listarURLs (elmSPAN) {
  var elmDOC = document.documentElement;
  var elmDIV = document.getElementById('DivEj');
  var elmUL = document.createElement('ul');
  var elmLI;
  var elmText;
  var Nodo;
  var Filtro = {
     acceptNode : function(n) {
        if (n.nodeName == "A" && n.hasAttribute("href")) {
           return NodeFilter.FILTER_ACCEPT;
           }
        else return NodeFilter.FILTER_SKIP;
        }
     }
  var Tipos = NodeFilter.SHOW_ELEMENT;
  var proArbol = document.createTreeWalker(elmDOC, Tipos, Filtro, false);
  while ((Nodo = proArbol.nextNode())) {
     elmLI = document.createElement('li');
     elmText = document.createTextNode(Nodo.getAttribute('href'));
     elmLI.appendChild(elmText);
     elmUL.appendChild(elmLI);
     }
  elmDIV.appendChild(elmUL);
}

Manejo de rangos

Un par de simples ejemplos de juego con rangos.

function borrarContenido(elmSPAN){
  var elmP = document.getElementById('ParrafoEj');
  var Rango = document.createRange();
  Rango.setStart(elmP.childNodes[0], 19);
  Rango.setEnd(elmP.childNodes[0], 27);
  Rango.deleteContents();
  Rango.detach()
}
 
function moverContenido(elmSPAN){
  var elmPo = document.getElementById('ParrafoEj');
  var elmPd;
  var Fragmento;
  var Rango = document.createRange();
  Rango.setStart(elmPo.childNodes[3].firstChild, 7);
  Rango.setEnd(elmPo.childNodes[5].firstChild, 6);
  Fragmento = Rango.extractContents();
  elmPd = document.createElement('p');
  elmPd.appendChild(Fragmento);
  elmPo.parentNode.appendChild(elmPd);
  Rango.detach()
}

· tierra de nómadas · tallerWeb · debates · recortes · diccionario · búsqueda · contactar ·

Estás en: tierra de nómadas > tallerWeb > Introducción al DOM > DOM Navegación y Rango

Volver a: Introducción al DOM (DOM Navegación y Rango).