Skip to content

Commit

Permalink
Merge pull request #3 from shirley-suarez/02-interactive-site
Browse files Browse the repository at this point in the history 
agrego contenido en stilos por javascript
  • Loading branch information
@shirley-startary
shirley-startary authored Sep 1, 2017
2 parents 5c47f3d + e622831 commit c6bcc0f
Showing 1 changed file with 109 additions and 52 deletions.
161 changes: 109 additions & 52 deletions 02-interactive-site/03-making-your-site-interactive/03-modifying-the-dom.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,21 @@ En esta unidad aprenderemos:
- `style.property`

***

http://eloquentjavascript.net/13_dom.html

## Modificando elementos y contenido del DOM
En el tema anterior vimos qué es el DOM y cómo seleccionar nodos utilizando JavaScript. En esta ocasión vamos a utilizar el DOM para modificar el documento – html – utilizando JavaScript.

## Modificando contenido
En la publicación anterior vimos qué es el DOM y cómo seleccionar nodos utilizando JavaScript. En esta ocasión vamos a utilizar el DOM para modificar el documento – html – utilizando JavaScript.

Los siguientes atributos innerHTML, textContent funcionan como métodos para obtener y establecer el valor de una propiedad específico.
Los siguientes atributos innerHTML, textContent funcionan como métodos para obtener y establecer el valor de una propiedad específico.

#### textContent
Al utilizar textContent sobre un nodo se va a mostrar el contenido en texto que exista en el nodo y en los hijos del mismo. Si hay etiquetas de html son ignoradas.
Si se le asigna un valor, va a reemplazar todo el contenido del nodo por la cadena de texto que se le asigne. Si la cadena de texto contiene etiquetas HTML, estas se van a escapar y se van a visualizar como texto. Los cambios realizados no van a ser permanentes, el documento va a regresar a su estado original una vez que se cargue el sitio.
Al utilizar textContent sobre un nodo se va a mostrar el contenido en texto que exista en el nodo y en los hijos del mismo.
Si hay etiquetas de html son ignoradas.
Si se le asigna un valor, va a reemplazar todo el contenido del nodo por la cadena de texto que se le asigne.
Si la cadena de texto contiene etiquetas HTML, estas se van a escapar y se van a visualizar como texto.

Los cambios realizados no van a ser permanentes, el documento va a regresar a su estado original una vez que se cargue el sitio.

![alt text](http://blog.eamexicano.com/wp-content/uploads/2014/02/textcontent.png)

#### innerHTML
Expand All @@ -46,18 +49,63 @@ Si se le asigna un valor, se va a reemplazar el contenido del nodo incluyendo a
En el siguiente video vemos de forma practica, como utilizar innerHTML y textContent
- https://www.youtube.com/watch?v=KpiYwPLGEWs&list=PLhSj3UTs2_yVC0iaCGf16glrrfXuiSd0G&index=16


#### insertBefore
Nos permite elegir un nodo del documento e incluir otro antes que él.

`elemento_padre.insertBefore(nuevo_nodo,nodo_de_referencia);`

Si tuviéramos un fragmento de un documento como éste:

```html
<div id="padre">
<p>primer párrafo.</p>
<p>segundo párrafo.</p>
</div>
```
y quisiéramos añadir un nuevo párrafo antes del segundo, lo haríamos así:

```javascript
// Creamos el nuevo párrafo con su hijo texto
var nuevoParrafo = document.createElement('p')
var textoNuevoParrafo = document.createTextNode('Nuevo párrafo.')
nuevoParrafo.appendChild(textoNuevoParrafo);

// Guardamos en una variable el padre y en otra variable el segundo párrafo
var padre = document.getElementById('padre');
var segundoParrafo = padre.getElementsByTagName('p')[1];

// Y ahora lo insertamos
padre.insertBefore(nuevoParrafo, segundoParrafo);
```
#### replaceChild
Este método se utiliza para reemplazar un nodo secundario por otro. Toma como argumentos dos nodos: un nuevo nodo y el nodo a ser reemplazado. El nodo reemplazado debe ser un elemento secundario del elemento al que se llama el método.

* Sintaxis es:

`elemento_padre.replaceChild(nuevo_nodo,nodo_a_reemplazar);`

Con el mismo marcado que para el ejemplo de insertBefore, si quisiéramos sustituir el segundo párrafo por el que creamos, lo haríamos así:

```javascript
document.getElementById('padre').replaceChild(nuevoParrafo,segundoParrafo);
```

> Tenga en cuenta que tanto replaceChild como insertBefore esperan el nuevo nodo como su primer argumento.
## Creación de nodos
El DOM nos ofrece una serie de métodos para añadir nodos al árbol de un documento, pero los más básicos son createElement, que crea un elemento, y createTextNode, que crea un nodo de texto.

#### createElement
Teniendo en cuenta que por medio del DOM podemos crear un documento prácticamente de la nada1, no es de extrañar que proporcione un método para crear un elemento concreto.
Hay que recordar que el DOM es la interfaz que conecta el documento HTML con JavaScript. Es por eso que, al utilizar createElement, el nodo no va a ser visible en el navegador hasta que lo añidamos en el documento.
* Sintaxis
* Sintaxis:

`document.createElement('elemento_a_crear');`

Así, crear un nuevo párrafo es tan simple como document.createElement('p') —nota: atención a las comillas—. Eso sí, el elemento no será visible, no es más que una especie de fantasma que existe en el documento, pero hasta que no se le asigne una posición en el árbol no se mostrará al usuario. Cómo incluirlo en el árbol lo veremos en la secion de `añadir nodos al DOM`
Así, crear un nuevo párrafo es tan simple como document.createElement('p') —nota: atención a las comillas—. Eso sí, el elemento no será visible, no es más que una especie de fantasma que existe en el documento, pero hasta que no se le asigne una posición en el árbol no se mostrará al usuario. Cómo incluirlo en el árbol lo veremos en la secion de _añadir nodos al DOM_.

#### createElement
#### createTextNode

Al igual que podemos crear un elemento, podemos crear un texto con el que poblarlo por medio de createTextNode.
* Sintaxis:
Expand All @@ -66,11 +114,11 @@ Al igual que podemos crear un elemento, podemos crear un texto con el que poblar

Igual que para el elemento creado arriba con el metodo _createElement_, el texto a crear por medio de este método debe ir entrecomillado. Y de la misma manera también, el texto existe, pero en ninguna parte. Si quisieramos, por ejemplo, crear un nuevo párrafo en un documento con el texto «Menos que Macbeth, pero más grande», tendríamos que crear primero el elemento p, luego el nodo de texto, y por último convertir el nodo de texto en el hijo del párrafo por medio de appendChild, método que veremos en la seccion `añadir nodos al DOM`. Algo así:

```javascript
var parrafo = document.createElement('p');
var texto = document.createTextNode('Menos que Macbeth, pero más grande');
parrafo.appendChild(texto);
```
```javascript
var parrafo = document.createElement('p');
var texto = document.createTextNode('Menos que Macbeth, pero más grande');
parrafo.appendChild(texto);
```
Con ello nuestra variable parrafo contendría un elemento p con su texto correspondiente, listo para ser incluido en el árbol del documento.

## Añadir nodos al DOM
Expand All @@ -86,63 +134,58 @@ Por medio de este método podemos incluir a un nodo un nuevo hijo, de esta maner

__El nuevo nodo se incluye inmediatamente después de los hijos ya existentes —si hay alguno— y el nodo padre cuenta con una nueva rama.__

```javascript
// Crear nodo de tipo Element
var parrafo = document.createElement("p");
```javascript
// Crear nodo de tipo Element
var parrafo = document.createElement("p");

// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");
// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");

// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);
// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);

// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
```
#### insertBefore
Nos permite elegir un nodo del documento e incluir otro antes que él.
// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
```

`elemento_padre.insertBefore(nuevo_nodo,nodo_de_referencia);`
## Eliminar nodos del DOM
Dado que podemos incluir nuevos hijos en un nodo, tiene sentido que podamos eliminarlos. Para ello existe el método:

Si tuviéramos un fragmento de un documento como éste:
#### removeChild.
Para quitar un nodo del documento tenemos que seleccionar padre del nodo, y desde ahí, remover el nodo deseado.
Si no conocemos el padre del nodo podemos seleccionar directamente el nodo, obtener el padre – con parent – , para después utilizar removeChild y eliminarlo.

```
<div id="padre">
<p>primer párrafo.</p>
<p>segundo párrafo.</p>
</div>
```
y quisiéramos añadir un nuevo párrafo antes del segundo, lo haríamos así:
La sintaxis es:

```javascript
// Creamos el nuevo párrafo con su hijo texto
var nuevoParrafo = document.createElement('p')
var textoNuevoParrafo = document.createTextNode('Nuevo párrafo.')
nuevoParrafo.appendChild(textoNuevoParrafo);
`elemento_padre.removeChild(nodo_a_eliminar);`

// Guardamos en una variable el padre y en otra variable el segundo párrafo
var padre = document.getElementById('padre');
var segundoParrafo = padre.getElementsByTagName('p')[1];
```javascript
var contenedor = document.getElementById('contenedor');
var parrafo = document.getElementById('parrafo');
contenedor.removeChild(parrafo);

// Y ahora lo insertamos
padre.insertBefore(nuevoParrafo, segundoParrafo);
```
/*
Con el nodo seleccionado utilizamos parentNode
para seleccionar el padre. Desde el padre utilizamos
removeChild para eliminar el nodo seleccionado.
*/
var parrafo = document.getElementById('parrafo');
parrafo.parentNode.removeChild(parrafo);
```

## Eliminar nodos del DOM




AHORA VAMOS A PRACTICAR UN POCO:
### AHORA VAMOS A PRACTICAR UN POCO:
En los siguientes videos vamos a poner en practica la parte teorica ya que utiliza los metodos como crear, añadir y eliminar los nodos del DOM por medio de Javascript y así poder crear páginas dinámicas,te sugiero que lo vayas haciendo el ejercicio y si es necesario pauses los videos.


* En este video dura 8:18; en el minuto 2:25 empieza a utilizar los metodos `.createElement` `createTextNode`
- https://www.youtube.com/watch?v=b-ZWMiqsAeU&list=PLhSj3UTs2_yVC0iaCGf16glrrfXuiSd0G&index=14
* en el siguiete video agrega los nodos creados al DOM
- https://www.youtube.com/watch?v=yQdi_8nh9HE&index=15&list=PLhSj3UTs2_yVC0iaCGf16glrrfXuiSd0G

### Referencias:
Muchos de los conceptos fueron tomados de las siguientes referencias:
- http://blog.eamexicano.com/dom/manipular-nodos/
- http://www.codexexempla.org/curso/curso_4_3_c.php
- http://www.codexexempla.org/curso/curso_4_3_c.php
Expand All @@ -162,10 +205,24 @@ Los atributos con los que podemos trabajar directamente son los que utilizan la
## Añadiendo estilos por Javascript
"unlike most other attributes, the style property itself is an object."

style
####style

Esta propiedad se utiliza para mostrar o para establecer el estilo del nodo sobre el que se esté utilizando.

* Sintaxis

`_element_.style._property_ = value`

Tomar en cuenta que las propiedades de CSS que están separadas por un guión (font-family, font-size, border-bottom) tienen que ser escritas con notación camelCase (fontFamily, fontSize, borderBottom).

```javascript
var parrafo = document.getElementById('parrafo')
parrafo.style.padding = "5px"
parrafo.style.color = "color: rgb(242, 242, 242);"
parrafo.style.fontFamily = "helvetica"
```
![alt DOM](http://blog.eamexicano.com/wp-content/uploads/2014/02/style.png)


## DOM Animation
https://www.w3schools.com/js/js_htmldom_animate.asp
Expand Down

0 comments on commit c6bcc0f

Please sign in to comment.