DOM Núcleo

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.
getElementsByTagName (Nombre)
(DOM Núcleo: Método de Document) Devuelve una lista ordenada de todos los nodos Element que tengan como nombre de etiqueta Nombre.
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.
insertBefore (nuevoNodo, Nodo)
(DOM Núcleo: Método de Node) Inserta el nodo nuevoNodo antes del nodo Nodo existente.
cloneNode (Recurrir)
(DOM Núcleo: Método de Node) Devuleve un nodo libre, copia del nodo al que se aplica y con sus mismos atributos. Si Recurrir es verdadero se clonan también sus descencientes.
hasChildNodes ()
(DOM Núcleo: Método de Node) Devuelve verdadero si el nodo tiene algún hijo.
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.).
setAttribute (Nombre, Valor)
(DOM Núcleo: Método de Element) Añade al elemento un nuevo atributo Nombre, estableciendo Valor.

Agregar elementos

Algo básico en el contexto del DOM: creación de nodos y su colocación en el documento.

function agregarElementos(elmSPAN) {
  var elmP = document.getElementById('ParrafoEj');
  var elmH = document.createElement('h3');
  var elmBR = document.createElement('br');
  var elmText;
  elmText = document.createTextNode('Palabras huecas');
  elmH.appendChild(elmText);
  elmP.parentNode.insertBefore(elmH,elmP);
  elmP.appendChild(elmBR);
  elmText = document.createTextNode('(Y más palabras huecas... )');
  elmP.appendChild(elmText);
}

Este texto no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas, que no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas, que no tiene ningún propósito razonable, ni aporta absolutamente ningún dato en especial, ya que es un simple relleno. Podría bromear un poco, y reproducir el discurso de un político, un fragmento de la legislación educativa o cualquier otro texto del mismo nivel de erudición, pero, pensándomelo mejor, prefiero dejarlo en este inútil fluir de palabras huecas...

Clonando nodos

Obtención del conjunto de enlaces del documento y su "clonación".

function clonarEnlaces() {
  var elmDIV = document.getElementById('DivEj');
  var elmUL;
  var elmLI;
  var elmA;
  elmUL = document.createElement('ul');
  var cnjA = document.getElementsByTagName('a');
  for (var i=0; i<cnjA.length; i++) {
     elmLI = document.createElement('li');
     elmA = cnjA[i].cloneNode(true);
     elmLI.appendChild(elmA);
     elmUL.appendChild(elmLI);
     }
  elmDIV.appendChild(elmUL);
}

Representar el árbol del documento

Un proyecto ligeramente más audaz. Crear una réplica del árbol del documento en forma de grupo de listas desplegables. No recomiendo tratar de desplegar el árbol completo, porque es como perseguir el infinito. Cada vez que se despliega un nodo, la propia acción crea nuevos nodos en el documento.

function generarArbol(elmSPAN,Ruta) {
  var refNodo = 'document';
  if (Ruta!='') {
     RutaNod = Ruta.split('/');
     for (var i=0; i<RutaNod.length; i++) {
        refNodo += '.childNodes['+RutaNod[i]+']';
        }
     Ruta+='/';
     }
  var elmNodo = eval(refNodo);
  var elmUL = document.createElement('ul');
  var elmLI;
  var elmX;
  var elmText;
  var valText;
  var cnjHijos = elmNodo.childNodes;
  for (var i=0; i<cnjHijos.length; i++) {
     elmLI = document.createElement('li');
     elmText = document.createTextNode(cnjHijos[i].nodeName);
     if (cnjHijos[i].hasChildNodes()) {
        elmX = document.createElement('span');
        elmX.appendChild(elmText);
        elmX.setAttribute('onclick','generarArbol(this,\''+Ruta+i+'\');');
        elmLI.appendChild(elmX);
        }
     else {
        elmLI.appendChild(elmText);
        elmX = document.createElement('samp');
        valText = String(cnjHijos[i].nodeValue).substring(0, 24);
        valText += (String(cnjHijos[i].nodeValue).length > 24) ? '...' : '';
        elmText = document.createTextNode(valText);
        elmX.appendChild(elmText);
        elmLI.appendChild(elmX);
        }
     elmUL.appendChild(elmLI);
     }
  elmSPAN.parentNode.appendChild(elmUL);
}

Estás en: tierra de nómadas > tallerWeb > Introducción al DOM > DOM Núcleo

Volver a: Introducción al DOM (DOM Núcleo).