DOM HTML

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.
removeChild (Nodo)
(DOM Núcleo: Método de Node) Retira Nodo del conjunto de hijos del nodo al que se aplica.
attributes
(DOM Núcleo: Atributo de Node) Devuelve un conjunto desordenado de atributos del nodo dado.
getNamedItem (Nombre)
(DOM Núcleo: Método de NamedNodeMap) Obtiene el valor del atributo especificado por Nombre.
value
(DOM Núcleo: Atributo de Attr) Devuelve la cadena del valor del atributo.
getAttribute (Nombre)
(DOM Núcleo: Método de Element) Devuelve el valor del atributo Nombre.
setAttribute (Nombre, Valor)
(DOM Núcleo: Método de Element) Añade al elemento un nuevo atributo Nombre, estableciendo Valor.
images
(DOM HTML: Atributo de HTMLDocument) El conjunto ordenado de elementos HTMLImageElement del documento.
className
(DOM HTML: Atributo de HTMLElement) El valor asignado al atributo class del elemento.
elements
(DOM HTML: Atributo de HTMLFormElement) Devuelve el conjunto ordenado de elementos de control del formulario al que se aplica.
value
(DOM HTML: Atributo de HTMLInputElement) El contenido del control de formulario correspondiente.
src
(DOM HTML: Atributo de HTMLImageElement) El URI del origen de la imagen.
width
(DOM HTML: Atributo de HTMLImageElement) La anchura del elemento.
height
(DOM HTML: Atributo de HTMLImageElement) La altura del elemento.
insertRow (Número)
(DOM HTML: Método de HTMLTableSectionElement) Inserta en la sección una fila vacía antes de la fila que ocupa el lugar Número.
deleteRow (Número)
(DOM HTML: Método de HTMLTableSectionElement) Elimina de la sección la fila que ocupa el lugar Número.
insertCell (Número)
(DOM HTML: Método de HTMLTableRowElement) Inserta una celda en la fila antes de la celda que ocupa el lugar Número.

Agregar y eliminar elementos

El manido ejemplo de agregar y eliminar filas del cuerpo de una tabla. Aquí se compara la utilización del módulo Núcleo y del módulo HTML.

function insertarFila(Modo) {
  var elmTBODY = document.getElementById('CuerpoTabla');
  var elmTR;
  var elmTD;
  var elmText;
  if (Modo==0) { // Modo HTML
     elmTR = elmTBODY.insertRow(2);
     for (var i=0; i<3; i++) {
        elmTD = elmTR.insertCell(i);
        elmText = document.createTextNode('Nueva celda.');
        elmTD.appendChild(elmText);
        }
     }
  if (Modo==1) { // Modo Núcleo
     elmTR = document.createElement('tr');
     for (var i=0; i<3; i++) {
        elmTD = document.createElement('td');
        elmText = document.createTextNode('Nueva celda.');
        elmTD.appendChild(elmText);
        elmTR.appendChild(elmTD);
        }
     elmTBODY.insertBefore(elmTR,elmTBODY.childNodes[3])
     }
}
 
function eliminarFila(Modo) {
  var elmTBODY = document.getElementById('CuerpoTabla');
  if (Modo==0) elmTBODY.deleteRow(2);
  if (Modo==1) elmTBODY.removeChild(elmTBODY.childNodes[2]);
}

Tabla
Celda de encabezadoCelda de encabezadoCelda de encabezado
Celda en pie
CeldaCeldaCelda
CeldaCeldaCelda
CeldaCeldaCelda
CeldaCeldaCelda

Cambiando propiedades

En este ejemplo se cambian los atributos de las imágenes del documento, y también se comparan los métodos de ambos módulos.

function redimensionarIMG(Modo) {
  var cnjIMG;
  if (Modo==0) { // Modo HTML
     cnjIMG = document.images;
     for (var i=0; i<cnjIMG.length; i++) {
        cnjIMG[i].width /= 2;
        cnjIMG[i].height /= 2;
        }
     }
  if (Modo==1) { // Modo Núcleo
     cnjIMG = document.getElementsByTagName('img');
     for (var i=0; i<cnjIMG.length; i++) {
        cnjIMG[i].attributes.getNamedItem('width').value /= 2;
        cnjIMG[i].attributes.getNamedItem('height').value /= 2;
        }
     }
}
 
function rotarIMG(Modo) {
  var cnjIMG;
  srcIMG = new Array();
  if (Modo==0) { // Modo HTML
     cnjIMG = document.images;
     for (var i=0; i<cnjIMG.length; i++) {
        srcIMG.push(cnjIMG[i].src);
        }
     for (var i=0; i<cnjIMG.length; i++) {
        cnjIMG[i].src = srcIMG[(i+2)%3];
        }
     }
  if (Modo==1) { // Modo Núcleo
     cnjIMG = document.getElementsByTagName('img');
     for (var i=0; i<cnjIMG.length; i++) {
        srcIMG.push(cnjIMG[i].getAttribute('src'));
        }
     for (var i=0; i<cnjIMG.length; i++) {
        cnjIMG[i].setAttribute('src', srcIMG[(i+2)%3]);
        }
     }
}

víbora de cascabel erizo de mar gato montés

Trabajando con formularios

Un ejemplo muy básico de comprobación de valores en los controles de un formulario.

function chequearFORM(elmFORM) {
  var Chequeo = 1;
  var cnjFORM = elmFORM.elements;
  for (var i=0; i<cnjFORM.length; i++) {
     if (cnjFORM[i].className=='Requerido') {
        Chequeo &= (cnjFORM[i].value.length > 0);   
        }
     }
  if (Chequeo==0) alert('¿No falta rellenar algo?');
  return (Chequeo==1);
}




Estás en: tierra de nómadas > tallerWeb > Introducción al DOM > DOM HTML

Volver a: Introducción al DOM (DOM HTML).