0

Aprendiendo DOM

22Mar
Escrito por en Code Snippets, Desarrollo web, Documentación, Javascript, Web

En este post voy a ponerles las funcionalidades del DOM más utilizadas. En cada caso mostraré un ejemplo de su uso.

getElementById(Identificador): Devuelve el nodo Elemento cuyo id es Identificador.

1
2
3
4
function quienSoy(identificador){
    var elemento = document.getElementById(identificador);
    alert("Soy un" + "\n" + elemento.nodeName);
}

getElementsByTagName(Nombre): Devuelve una lista ordenada de todos los nodos Element que tengan como nombre de etiqueta Nombre.

1
2
3
4
5
6
function cambiarEstilo(){
    var vinculos = document.getElementsByTagName('a');
    for(var i = 0;i < vinculos.length;i ++){
        vinculos[i].className = 'link';
    }
}

createElement(Tipo): Crea un nodo tipo Element del tipo especificado en Tipo.

1
2
3
4
5
6
7
8
9
function crearElemento(){
    var elemento = document.createElement('input');
    elemento.setAttribute('type','button');
    elemento.setAttribute('value','Nuevo elemento creado');
    elemento.className = 'button';
    var enter = document.createElement('p');
    enter.appendChild(elemento);
    document.body.appendChild(enter);
}

createTextNode(Cadena): Crea un nodo tipo Text con el valor Cadena.

1
2
3
4
5
6
function crearNodoTexto(){
    var p = document.createElement('p');
    var nodoTexto = document.createTextNode("Soy un nodo de tipo texto");
    p.appendChild(nodoTexto);
    document.body.appendChild(p);
}

appendChild(nuevoNodo): Adiciona el nodo nuevoNodo al final del conjunto de hijos del nodo al que se aplica.

1
2
3
4
5
6
function agregarNuevoHijo(){
    var item = document.createElement('li');
    var nodoTexto = document.createTextNode("Soy un nuevo hijo");
    item.appendChild(nodoTexto);
    document.getElementById('list').appendChild(item);
}</pre>

insertBefore(nuevoNodo, Nodo): Inserta el nodo nuevoNodo antes del nodo Nodo existente.

1
2
3
4
5
6
7
function insertarNodo(){
    var nuevoP = document.createElement('p');
    var nodoTexto = document.createTextNode("Otro parrafo, antes del primero");
    nuevoP.appendChild(nodoTexto);
    var anteriorP = document.getElementsByTagName('p')[0];
    document.body.insertBefore(nuevoP, anteriorP);
}

Esta parte del post es solo para la UCI:

Para poner ejemplos más completos de cada una de las funciones que vimos aquí, voy a utilizar una interesante herramienta. Se llama CTRLC y permite copiar códigos de fuente en una de distintos lenguajes para que sean utilizados por la comunidad.

getElementsByTagName   https://ctrlc.prod.uci.cu/paste/284/
getElementById   https://ctrlc.prod.uci.cu/paste/285/
createElement    https://ctrlc.prod.uci.cu/paste/286/
createTextNode    https://ctrlc.prod.uci.cu/paste/287/
appendChild    https://ctrlc.prod.uci.cu/paste/293/
insertBefore    https://ctrlc.prod.uci.cu/paste/292/

Dejar un comentario