Módulo 4 THE DOM

COMO CREAR ELEMENTOS HTML
document.createElement
Nota: los elementos creados así están solo en memoria, no en el DOM. Hay que vaciarlos al DOM.

COMO AGREGAR CLASS CLASES A ELEMENTOS
// add a class of wrapper to it
myDiv.classList.add('wrapper');


COMO AGREGAR LOS ELEMENTOS AL DOM ( con el method de  Node.appendChild() )
document.body.appendChild()
Se toma del documento el body: document.body (no todos los elementos son accesables así directo, otra forma sería usando la notación regular de: const body = document.querySelector('body'); )


insertAdjacentText

insertAdjacentElement
"beforebegin" - Antes del targetElement
"afterbegin" - Justo dentro del targetElement, antes del primer child
"beforeend" - Justo dentro del targetElement, después del ultimo child
"afterend" - Después del targetElement

querySelector y querySelectorAll sirven para seleccionar objetos del DOM.
Con el método document.querySelector... se seleccionan cosas del "DOCUMENT", pero podemos usar un objeto + el método para seleccionar dentro del objeto, por ejemplo un div con class divsito, sería: divsito.querySelector('img') Que se encargaría de seecionar el primer  objeto "img" dentro de "divsito.
Tamb ién existe getElementById o getElementByClass, etc... pero ya no se usan tanto, pues existe ya el querySelector.

document.querySelector('.clase'); es para seleccionar elementos del DOM.

Hay "setters" y "selectors".

Los selectors permiten tomar elementos del dom dependiendo de sus posiciones respecto a otros elementos, o su tipo de elemento., por ejemplo:
const item = document.querySelector ('.item');

Los SETTERS permiten incorporar elementos al DOM.
item.innerHTML = `<h1>Hola, amigo!</hr>`;



method de .textContent nos da elementos "no legibles" por el usuario, como por ejemplo scripts o cosas escondidas con CSS, mientras que el método de .innerText nos muestra solo el texto en el elemento.

Se puede ingresar lo sig para crear un elemento:
const ELEMENTO = document.createElement('elemento');
elemento.textContent = 'texto del elemento, jeje';

De MDN 
elementoObjetivo.insertAdjacentElement(posicion, elemento);

para agregar atributos de datos adicionales a los elementos html, se puede con "data-". Por ej:
<img data-name="donato" src="https://wewewe" />

 Node vs Element: un nodo es un elemento

console.log(variable.children) te da todos los child elements del elemento seleccionado

console.log(variable.childNodes)

 Propiedades para elementos (element selectors):
  1. variable.children
  2. variable.firstElementChild
  3. variable.lastElementChild
  4. variable.previousElementSibling
  5. variable.nextElementSibling
  6. variable.parentElement

Comments

Post a Comment

Popular posts from this blog

Módulo 3, Scope, Hoisting, Closures

Scope Una variable tiene un alcance GLOBAL cuando está fuera de alguna función, módulo, fuera de un bloque de if, etc... las variables globales (menos const y let) están en el WINDOW object. Si una variable no está disponible adentro de la función, JS va a buscarla afuera arriba. Var, Let y Const son scopeadas diferente. Siempre usa CONST, usa LET si quieres reasignar, y usa VAR solo cuando sea necesario. Hoisting. el compilador de JS va a mover todas las funciones hasta arriba al compilar, así podrán correr antes de ser accesadas. Closures. Es cuando una función reside adentro de otra función y es accesada con una variable desde la función exterior.
Read more

Módulo 2

functions are a set of statements qué es un statement? es por ejemplo: una declaración de variable, un console.log, etc. javascript usa milisegundos para llevar el tiempo. adentro de una función hay que agregar el texto "return" para que la variable pueda ser accesada, ya que la variable solo puede ser accesada adentro. Después de hacer el RETURN hay que capturar el valor en otra variable, o mandar llamar directo la función donde existe la variable original (que si está dntro de una función, se manda al garbage collector de JS) Cuando defines una función() puedes definir parámetros (parameters) que fungen como variables sin declarar. Depsués al llamar la función en un cálculo, podemos acceder a los parámetros desde fuera de la función. BRACKETS GO FIRST, o sea, en una función como esta: yell(doctorize('wes')) primero calcula la función de adentro y luego la de afuera. Existen funciones anónimas (anon functions)  que son sin nombre, pero se pueden usar com...
Read more