CSS Y

JAVASCRIPT
CSS
Antes de comenzar, debes tener claro un
concepto clave: una página web es
realmente un documento de texto. En dicho
documento se escribe código HTML, con el
que se que crea el contenido de una web.
Por otro lado, existe el código CSS, que
unido al código HTML permite darle forma,
color, posición (y otras características
visuales) a un documento web.

2
¿POR QUÉ SE USA
CSS?
La idea de CSS es la de utilizar el concepto de separación de presentación y contenido. Este
concepto se basa en que, como programadores, lo ideal es separar claramente el código que
escribimos. ¿Por qué? Porque con el tiempo, esto hará que el código sea más fácil de modificar y
mantener.

La idea es la siguiente:

• Los documentos HTML (contenido) incluirán sólo información y datos, todo lo relativo a la
información a transmitir.
• Los documentos CSS (presentación) incluirán sólo los aspectos relacionados con el estilo
(diseño, colores, formas, etc...).

3
FORMAS DE
ENLAZAR CSS

4
FORMAS DE
ENLAZAR CSS

5
 SINTAXIS CSS

Vamos a centrarnos ahora en el contenido de nuestro documento index.css. El código CSS

de dicho documento, se basa en una serie de conceptos que debemos tener claros antes de
continuar. Demos un repaso a cada uno de ellos:

6
PROPIEDADES DE
ELEMENTOS

7
JAVASCRIPT
Es un lenguaje de programación de alto nivel, interpretado
y orientado a objetos, utilizado principalmente en el
desarrollo web, pensado para agregar potencial de
interacción y dinamismo a las páginas web.

Es compatible con todos los navegadores modernos y se

ejecuta del lado del cliente, lo que significa que se ejecuta
en el navegador web del usuario final. Además de su uso en
el desarrollo web, JavaScript también se utiliza en
aplicaciones de servidor (con tecnologías como Node.js) y
en el desarrollo de aplicaciones móviles y de escritorio.

9
PARA QUÉ SIRVE
JAVASCRIPT
En el contexto actual, JavaScript se utiliza para todo, gracias a la introducción de Node.js. Esta
tecnología crea software robusto para empresas en todo el mundo.

Hablemos de algunos usos específicos de JavaScript en desarrollo web.

• Interactividad de interfaz o front-end: el desarrollo web mejora solamente por el aumento de

la interactividad y funciones que JavaScript ofrece.
• Aplicaciones Web: las aplicaciones web son similares a los sitios, pero en su lugar pueden
empacarse en una caja más compacta, que mejora el control de la seguridad y otros aspectos.
• Juegos de navegador: los navegadores web actuales han cambiado mucho; los
desarrolladores pueden crear juegos robustos que funcionan en ellos.
• Desarrollo web dorsal o back-end: el desarrollo web se ha transformado tanto, que
JavaScript puede utilizarse para gestionar el back-end de sitios y aplicaciones.

10
FORMAS DE ENLAZAR
JAVASCRIPT

11
¿QUÉ ES EL DOM?
Las siglas DOM significan Document Object Model, o lo que es lo mismo, la estructura del
documento HTML. Una página HTML está formada por múltiples etiquetas HTML, anidadas una
dentro de otra, formando un árbol de etiquetas relacionadas entre sí, que se denomina árbol DOM (o
simplemente DOM).

En Javascript, cuando nos referimos al DOM nos referimos a esta estructura de árbol, mediante la
cuál podemos acceder a ella y modificar los elementos del HTML desde Javascript, añadiendo
nuevas etiquetas, modificando o eliminando otras, cambiando sus atributos HTML, añadiendo

12
clases, cambiando el contenido de texto, etc...
EL OBJETO DOCUMENT
En Javascript, la forma de acceder al DOM es a través de un objeto llamado document, que
representa el árbol DOM de la página o, más concretamente, la página de la pestaña del navegador
donde nos encontramos. En su interior pueden existir varios tipos de elementos, pero
principalmente serán ELEMENT o NODE :

• ELEMENT no es más que la representación genérica de una etiqueta: HTMLElement.

• NODE es una unidad más básica, la cuál puede ser o un nodo de texto.
Todos los elementos HTML, dependiendo del elemento que sean, tendrán un tipo de dato específico.
Algunos ejemplos:

13
MODIFICAR DOM
MÉTODO TRADICIONAL
Los métodos más clásicos y tradicionales para realizar búsquedas de elementos en el DOM son más
sencillos, pero menos potentes. Si lo que buscas es un elemento específico, lo mejor sería utilizar el
método getElementById(). En caso contrario, utilizaremos alguno de los otros tres métodos, que nos
devuelven siempre un array :

14
MÉTODO TRADICIONAL
• El primer método, .getElementById(id) busca un elemento HTML con el id especificado. En
principio, un documento HTML bien construído no debería tener más de un elemento con el
mismo id, por lo tanto, este método devolverá siempre un solo elemento:

• .getElementsByClassName(class) permite buscar los elementos que tengan la clase especificada

en class. Es importante darse cuenta del matiz de que el método tiene getElements en plural, es
decir, puede devolver varias clases ya que al contrario que los id, pueden existir varios elementos
con la misma clase:

15
MODIFICAR DOM
MÉTODO MODERNO
Aunque los métodos tradicionales anteriores son más suficiente para buscar elementos, actualmente
tenemos a nuestra disposición dos nuevos métodos de búsqueda de elementos que son mucho más
cómodos y prácticos si conocemos y dominamos los selectores CSS.

Es el caso de los métodos .querySelector() y .querySelectorAll():

16
MÉTODO MODERNO
• querySelector() devuelve el primer elemento que encuentra que encaja con el selector CSS
suministrado por parámetro. Siempre devuelve un solo elemento y en caso de no coincidir con
ninguno, devuelve NULL:

• querySelectorAll() realiza una búsqueda de elementos en el DOM, sólo que como podremos
intuir por ese All(), devuelve un ARRAY con todos los elementos que coinciden con el selector
CSS.

17
CREAR ELEMENTOS
HTML
Existen una serie de métodos para crear de forma eficiente diferentes elementos HTML o nodos, y
que nos pueden convertir en una tarea muy sencilla el crear estructuras dinámicas, mediante bucles
o estructuras definidas:

18
CREANDO ELEMENTOS
CON CREATEELEMENT()
Mediante el método .createElement() podemos crear un element HTML en memoria (¡no estará
insertado aún en nuestro documento HTML!). Con dicho elemento almacenado en una variable o
constante, podremos modificar sus características o contenido, para posteriormente insertarlo en una
posición determinada del DOM o documento HTML.

19
CONTENIDO EN EL DOM
La propiedad .textContent nos devuelve el contenido de texto de un elemento HTML. Es útil para
obtener (o modificar) sólo el texto dentro de un elemento, obviando el marcado o etiquetado
HTML:

Como puedes ver, no sólo podemos utilizar la propiedad .textContent para acceder a la información
de texto que contiene, sino también para reemplazar su contenido, simplemente asignándolo como
si fuera una variable o constante.
20
LAS PROPIEDADES .INNERTEXT Y
.OUTERTEXT
La propiedad .innerText es muy similar a .textContent, pero tiene una diferencia clave: accede al
texto renderizado visualmente por el navegador. Por ejemplo, observa el siguiente fragmento de
código:

21
LA PROPIEDAD .INNERHTML
Por otro lado, tenemos la propiedad .innerHTML, que nos permite acceder al contenido de un
elemento, pero en lugar de devolver su contenido de texto, nos devuelve su contenido HTML, es
decir, su marcado HTML. Esto tiene varias implicaciones que explicaremos más adelante.

Primero, un ejemplo con la diferencia entre .textContent y .innerHTML:

22
LA PROPIEDAD .OUTERHTML
La propiedad .outerHTML es muy similar a la anterior. Mientras que .innerHTML devuelve el
código HTML del interior de un elemento HTML, .outerHTML devuelve el código HTML desde el
exterior, es decir, incluyendo al propio elemento implicado:

23
INSERTAR ELEMENTOS EN EL
DOM
La API de nodos de Javascript es la más tradicional y antigua, y aunque cumple bien determinados
aspectos, suele ser más complicado llegar al objetivo porque no hay ciertos métodos explícitos para
hacer determinadas cosas. No obstante, suele ser la más extendida que te encuentras, ya
que .appendChild() está muy extendido al ser uno de los más usados:

24
API DE NODOS
• El método .appendChild(): Uno de los métodos más comunes para añadir un elemento HTML creado
con Javascript es .appendChild(). Como su propio nombre indica, este método añade o inserta un
nuevo elemento, como si fuera un hijo al final de todos los hijos del elemento sobre el que se
realiza.

• El método .removeChild():En algunos casos, nos puede interesar eliminar un nodo hijo de un
elemento. Para esas situaciones, podemos utilizar el método .removeChild(node) donde node es el
nodo hijo que queremos eliminar:

25
INSERTAR ELEMENTOS EN EL
DOM
Los métodos mencionados con anterioridad sirven en muchos casos, sin embargo, son poco
específicos y puede que no cubran todas las posibles situaciones. Existe otra familia de métodos
para añadir e insertar elementos que quizás sea mucho más versátil.

Todos los métodos permiten pasar por parámetro un elemento o una lista de elementos. También
puedes pasar un string (para insertar un fragmento de texto). Echemos un vistazo a estos métodos:

26
EL MÉTODO .BEFORE() Y .AFTER()
• Con el método .before() podemos insertar uno o varios elementos antes del elemento que llama al
before (en el ejemplo, container). Con el método .after() ocurre exactamente lo mismo, pero después
del elemento en lugar de antes:

27
MUCHAS https://lenguajejs.com/javascript/
dom/que-es/

GRACIAS