Javascript DOM.md

Como modificar el DOM en Javascript

• Seleccionando Elementos del DOM (Document Object Model)
• Manipulando el DOM
• Recorriendo el DOM

DOM (Document Object Model)

El HTML DOM es un modelo de objetos estándar y una interfaz de programación para HTML. que define:

• Los elementos HTML como objetos
• Las propiedades de todos los elementos HTML.
• Los métodos para acceder a todos los elementos HTML
• Los eventos para todos los elementos HTML.

En otras palabras: el HTML DOM es un estándar sobre cómo obtener, cambiar, agregar o eliminar elementos HTML.

El árbol HTML DOM de objetos

Cuando se carga una página web, el navegador crea el Document Object Model de la página.

El modelo HTML DOM se construye como un árbol de objetos:

Seleccionando Elementos del DOM

• getElementById()
• getElementsByClassName()
• getElementsByTagName()
• querySelector()
• querySelectorAll()

Ejemplos Selectores Trasicionales

	/* Retorna un Elemento */
	document.getElementById('main-content'); 
	
	/* Aplicar estilos al elemento seleccionado */
	document.getElementById('main-content').style.border = 'solid 2px red';  
	
	/* Retorna multiples Elementos */
	document.getElementsByClassName('mascota');

	/* Retorna multiples Elementos */
	document.getElementsByTagName('li');

Ejemplos Selectores Nuevos

	/* Selector por consulta */
	document.querySelector('header')
	
	document.querySelector('header img')
	
	document.querySelector('#main-content')
	
	document.querySelector('.lista-mascotas')

Ejemplos Recorriendo Elementos con Selectores

	/* Selector por consulta y clase */
	document.querySelector('.mascota')
	
	/* 
		Selector por consulta y clase 
		Nos retorna un NodeList
	*/
	document.querySelectorAll('.mascota')
	

NodeList

• Más flexible
• Contiene cualquier tipo de nodo
• Se puede iterar a travez de el como un Array

HTMLCollection

• Como un Array
• Solamente contiene elementos de tipo de nodo
• No se puede iterar con metodos de Array (Ejemplo: Array.forEach())

	/*
		Selector por nombre de clase
		Rotorna HTMLCollection()
	*/
	document.getElementsByClassName('mascota')

	document.getElementsByClassName('mascota').length
	
	/*
		Selector por nombre de clase
		Aplicar estilos CSS
	*/
	document.getElementsByClassName('mascota')[0]
	
	document.getElementsByClassName('mascota')[0].style.color = "red"
	
	
	/*
		Selector por nombre de clase
		Aplicar estilos todos los elementos
	*/

	const mascotas = document.getElementsByClassName('mascota')
	
	for( let i = 0; i <= mascotas.length ; i++) { console.log(mascotas[i]) }

	for( let i = 0; i <= mascotas.length ; i++) { mascotas[i].style.color = 'blue' }
	
	/*
		Selector por nombre de clase
		Aplicar estilos todos los elementos
	*/

	const mascotas = document.querySelectorAll('.mascota')
	
	mascotas.forEach( mascota => mascota.style.border = 'solid 5px cornflowerBlue' )
	
	

Recorriendo el DOM

• Moverse de una parte del DOM a otra.

• Acceder a un elemento basado es sus relaciones con otros elementos

• parentNode

• parentElement

• firstElementChild

• nextElementSibling

	document.querySelector('ul')
	
	/*
		Acceder a los elementos hijos
		Retorn NodeList
	*/
	document.querySelector('ul').childNodes
	
	document.querySelector('ul').childNodes[2]
	
	/*
		Acceder al primer hijo
	*/
	document.querySelector('ul').firstElementChild
	
	/*
		Acceder al último hijo
	*/
	document.querySelector('ul').lastElementChild

	/*
		Acceder al padre
	*/
	document.querySelector('h1').parentElement

	document.querySelector('h1').parentNode
	
	/*
		Acceder al abuelo (padre del padre)
	*/
	document.querySelector('h1').parentNode.parentNode
		
	/*
		Acceder a los hermanos
	*/
	document.querySelector('h1').previousElementSibling

	document.querySelector('h1').nextElementSibling