Buenas!! Hoy vengo a seguir el curso de JavaScript ya que lo había dejado un poco tirado por motivo de tiempo o vagancia, jaja. Ya no se que decir así que comencemos.
¿Qué es Dom?
Cada vez que carga o se actualiza la página web, el navegador genera automáticamente una estructura llamada Document Object Model (DOM) el cual contiene todos los elementos (<div>, <p>, párrafos, <br> etc.) de la web. Javascript, entre otros lenguajes, pueden manipular o extraer cualquier información de forma dinámica, la única diferencia que puede haber entre los lenguajes es como podemos implementarlos o manipularlos. Esta estructura es como los árboles genealógicos, ¿Por que es una estructura genealógica? DOM convierte los documentos XHTML como un conjunto de elementos llamados nodos que se conectan entre sí, los cuales conforman una especie de árbol de nodos, por ejemplo, si un nodo depende de otro a ese nodo se le llama nodo hijo y al superior, nodo padre, (¿Ahora entiendes porque parecen un árbol genealógico?)
Dom es usado para webs dinámicas y aplicaciones web complejas, fue desarrollado por W3C para manipular webs XHTML como si fueran XML ya que principalmente quieren una manipulacion mas sencilla de XML. Las webs HTML son más difícil de manipular ya que son como; sucesión de caracteres y ya. Por eso los navegadores realizan todo esto de forma automática dejando también herramientas como DOM.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Web DOM</title>
</head>
<body>
<p>Hola soy Standby<b>y esto es una prueba DOM</b></p>
</body>
</html>
Ese es un ejemplo sencillo del árbol de nodos, el cual cada rectángulo es un nodo DOm y las flechas es como se conectan entre ellos mismo. Lo normal es que la web tenga cientos de nodos y que tenga un nodo principal que siempre es denominado como Documento.
Tipos de nodos.
Existen alrededor de 12 nodos y nosotros usamos los “Principales” así que iré nombrado según la captura.
- Documento: Como dije un poco más arriba es el principal nodo, el cual compone la web. También se puede llamar nodo raíz.
- Element/Elemento: Es el que representa cada etiqueta según el document, además, es el que deriva a los demás Nodos.
- Atributo: Representa el atributo del documento ya sea html o en este caso xhtml.
- Text/Texto: Es el nodo que contiene texto por alguna etiqueta (Como,
<p>Texto</p>) - Comment: Es cuando hacemos comentarios en la página.
Ahora veamos los demas nodos no presentes en el código
Acceso directo a los nodos.
Cuando se haya construido automáticamente el árbol de nodos por DOM podemos comenzar a acceder a cada uno de sus nodos para manipularlos de forma dinámica, por ejemplo, moverlo un elemento de la web, crear, eliminar, añadir elementos, darle un valor a un elemento, acceder a un elemento, editar un elemento, etc. Para poder acceder algún nodo hay dos maneras: acceso directo o a través de los nodos padres.
Funciones de acceso directo a los nodos.
- .getElementsByTagName()
Muchos se dirán “Esa mamada es muy larga” o “No me voy aprender todo eso”, no se preocupen con practica se lo pondrán aprender, además, de que esta función (Como las demás) son autoexplicativas, en este caso, getElementsByTagName(NombreEtiqueta). Lo que hace es tener todos los nodos mediante un array con una etiqueta determinada la cual tiene el mismo parámetro que le pasamos a la función
Sintaxis
1
element.getElementsByTagName(NombreEtiqueta)
Nota: El nodo es el parámetro: element, la función o string es el: getElementsByTagName, nombre de la etiqueta de los nodos hijos/padres que queramos acceder.
Si queremos tener todos los párrafos de nuestro documento.
1
var Parrafos = document.getElementsByTagName("p");
Esto nos dará todos las etiquetas que sean: <p>, ¿Cómo es posible?, no se si se dieron cuenta, pero puse document. al principio de getElementsByTagName para que empiece a recorrer todo el documento en busca del elemento o nodo que le asigne. También podemos decirle que solo queremos acceder a “x” párrafo de la siguiente manera:
1
var MiPrimerPárrafo = Párrafos[0];
Esto como resultado nos dará el primer párrafo del documento y si ponemos 1 iremos al 2 párrafo. Recuerden que los arrays empiezan desde 0, es decir, que el primer elemento de un array es igual a 0, el primero a 1 y así sucesivamente. Al mismo tiempo deben tener en cuenta que el array de DOM, no es lo mismo que uno de cadena de texto o un array de objetos.
Podemos recorrer todos los párrafos de la página, de la siguiente forma:
1
2
3
for(var i=0; i<parrafos.length; i++) {
var parrafo = párrafos[i];
}
También podemos usar esta función (getElementsByTagName()) para aplicarla de forma recursiva para cada nodo devueltos por la función, por ejemplo, si queremos todos los enlaces del primer párrafo podemos usar el siguiente código:
1
2
3
4
5
var parrafos = document.getElementsByTagName("p");
var primerParrafo = parrafos[0];
var enlaces = primerParrafo.getElementsByTagName("a");
Si queremos recorrer todos los enlaces de “x” web, podemos usar el siguiente código
1
2
3
4
5
var enlaces = document.getElementsByTagName("a");
for (x=0;x<enlaces.length;x++)
document.write(enlaces[x].name + ": " + enlaces[x].href + "<br>");
- .getElementsByName()
Esta función es similar a la de tag, lo único que cambia es que busca nodos cuyo atributo name sea igual al al parámetro mencionado.
1
2
var ParrafoNuevo = document.getElementsByName("NodoNuevo");
<p name="NodoNuevo">Texto</p>
Los elementos HTML radiobutton ya es algo normal encontrar este metodo ya que es una de las más usadas dentro de JavaScript para manipular elementos, además, de ser relacionados con todos los radiobutton.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
function TotalDeNodos(){
var AtributosName=document.getElementsByName("gender");
alert("Total de atributos: " + AtributosNam.length);
}
</script>
<form>
Pera <input type="radio" name="Atribito" value="male">
Manzana <input type="radio" name="Atributo" value="female">
<input type="button" onclick="TotalDeNodos()" value="Total Genders">
</form>
- .getElementById()
Esta función nos devuelve el elemento con tenga el atributo ID con el valor mencionado.
1
2
3
4
var Stand = document.getElementsById(“Stand”);
<div id=”Stand”>
Contenido
</div>
Esta función es muy utilizada para crear aplicaciones web dinámicas, y sino me crees puedes ver el código de cualquier web y veras contendrá el atributo id. Ejemplos:
1
2
3
4
5
6
7
8
9
10
11
12
13
<p id="Stand">Este nodo será cambiado</p>
<button onclick="myFunction()">Darle click!</button>
<script>
function myFunction() {
document.getElementById("Stand").innerHTML = "Por este otro";
}
</script>
Nota: innerHTML devuelve una cadena de texto que se encuentra en las etiquetas HTML.
- .getElementsByClassName()
Es igual a los demás, solo cambia el modo de selección de los elementos que en este caso es mediante la clase:
1
2
3
4
5
<div class="NombreDeLaClase"></div>
document.getElementsByClassName("NombreDeLaClase");
Ejemplo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="NombreClase">Pacman</div>
<button onclick="Funcion()">Precioname!</button>
<script>
function Funcion() {
var x = document.getElementsByClassName("NombreClase");
x[0].innerHTML = "Super Pacman";
}
</script>
Manipulando nodos.
Nosotros podemos manipular cualquier nodo ya sea creando uno nuevo, eliminándolo, insertándolo en otro, emplazándolos, etc. Hay muchas maneras.
**Creando nuevos nodos: **
- Para crear un nodo tipo elemento.
1
var Párrafo = document.createElement("p");
createElement() crea un nodo tipo element dentro de los () y y las “comillas” se escribe la etiqueta del elemento que se va a crear (“element”)
- Para crear un nodo tipo Texto.
1
var Texto = document.createTextNode("Texto que queramos poner")
createTextNode() crea un nodo tipo text es igual al createElement, lo único que cambia son las comillas ya que si guardamos el texto en alguna variable no es necesario ponerlas, y si queremos poner literalmente texto debemos ponerlas.
Añadir el nodo texto como hijo del nodo elemento.
- Párrafo.appendChild(Texto);
appendChild() lo que hace es que el nodo hijo (En este caso es Texto) sea padre de del nodo que pusimos antes del punto “.” (En este caso es Párrafo.appendChild) hay otras formas de insertar elementos como: inserBefore()
El método Node.insertBefore() inserta el nuevo elemento antes del elemento de referencia como hijo del nodo actual.
Sintaxis:
1
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
También podemos insertar el nodo elemento como hijo de la pagina
1
document.body.appendChild(Párrafo)
Eliminar nodos
Eliminar un nodo de nuestra web, es mas fácil que agregar uno. Es una tarea sencilla, solo es de usar la función removeChild(); para hacer esta tarea:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
function Funcion() {
var example = document.getElementById("Stand");
example.parentNode.removeChild(example);
}
</script>
<button onclick="Funcion()">Precioname!</button>
<p id="Stand">Hola</p>
Clonar nodos
Podemos clonar nodos con la función cloneNode:
1
var dupNode = node.cloneNode(deep);
- node el nodo que se desea clonar.
- dupNode el nuevo nodo que será un clon de node
- deep Optional true si los hijos del nodo también deben ser clonados, o false para clonar únicamente al nodo.
Ejemplos
Si queremos clonar un DIV, pero sin que los hijos de ese nodo se clonen debemos poner:
1
var example = document.getElementById('Nodo').cloneNode(false);
Si el deep es true si se clonara todo el subarbol de nodos que dependan de el. En caso de nodos que estén vacíos no importa si es true o falso.