DOM Navegación y Rango

Desplazarse al índice de navegación

Nota: Los scripts de esta página realizan una comprobación previa, basada en el método hasFeature de la interfaz DOMImplementation, para determinar si deben ejecutarse o no. Es posible que, aun sin ser plenamente compatible con el módulo correspondiente, el navegador sea capaz de interpretar correctamente algún script, por lo que se ofrece la posibilidad de deshabilitar dicho test pulsando el botón dispuesto a continuación. Obviamente, el caso contrario también es posible, y puede ocurrir que un script no funcione aunque haya dado positivo en la prueba.

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()
}

Este párrafo tiene algunos subelementos, como un trozo de texto enfatizado, un enlace cualquiera u otra porción de texto importante.

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).