DOM HTML

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.

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]);
}

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]);
        }
     }
}

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

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

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

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