Desplazarse al índice de navegación
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]);
}
Celda de encabezado | Celda de encabezado | Celda de encabezado |
---|---|---|
Celda en pie | ||
Celda | Celda | Celda |
Celda | Celda | Celda |
Celda | Celda | Celda |
Celda | Celda | Celda |
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]);
}
}
}
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).