<div id="root"></div>Obtencion de elementos
const myElement = document.getElementById('myId'); // {}
console.log('getElementById(myId)', myElement);
const pElements = document.getElementsByTagName('p'); // []
console.log('getElementsByTagName(p)', pElements);
const superElements = document.getElementsByClassName('super'); // []
console.log('getElementsByClassName(super)', superElements);
const notSuperElements = document.getElementsByClassName('notSuper'); // []
console.log('getElementsByClassName(notSuper)', notSuperElements);
const queryElement = document.querySelector('p.super'); // {} returns first.
// solo el primer elemento que encuentre
console.log('querySelector(p.super-class)', queryElement);
const allElements = document.querySelectorAll('p.super'); // [] returns all.
// todos los elementos que encuentre
console.log(allElements);Modificacion elementos
const emptyDiv = document.getElementById('emptyDiv');
emptyDiv.innerText = 'Escribo en el div vacio'; // To display text
emptyDiv.innerHTML = 'Escribo en el div vacio'; // to display HTML
emptyDiv.innerHTML = '<h1>Escribo en el div vacio</h1>'; // to include mixed ex. svg
emptyDiv.id = 'changedDiv';
emptyDiv.style.color = 'blue'; // NO HACER
emptyDiv.setAttribute('accesskey', 'modifiedAccesskey'); // changing atributes. ex. class (class, dark)
emptyDiv.setAttribute('class', 'nocturne');
emptyDiv.classList.add('myClass'); // add a class
emptyDiv.classList.remove('myClass'); // remove a classCreacion / eliminacion elementos
const nestedDiv = document.createElement('div'); //create in Js
const nestedP = document.createElement('p'); // create in Js
nestedDiv.appendChild(nestedP); // enclava en html
emptyDiv.appendChild(nestedDiv); // enclava en html
const firstDiv = document.createElement('div'); // should be valid html element
firstDiv.id = 'firstDiv';
emptyDiv.insertBefore(firstDiv, nestedDiv); // (where, BeforeWhat)
const replacedP = document.createElement('p');
replacedP.id = 'replacedP';
emptyDiv.replaceChild(replacedP, firstDiv); //
firstDiv.parentElement.replaceChild(replacedP, firstDiv);
//parentElement instead of replaceChild ex. we dont know the name for emptyDiv
emptyDiv.removeChild(replacedP);Events
// https://developer.mozilla.org/en-US/docs/Web/Events
function onEventFunction(param) { // param always is "event"
console.log('onEventFunction', param);
}
function addEventListenerFunction(param) {
console.log('addEventListenerFunction', param);
}
const myButton = document.getElementById('myButtonId');
myButton.onclick = onEventFunction;
myButton.addEventListener('click', addEventListenerFunction); // no"()" for function call as parameterFormularios
function manageMinMax() {
const myInput = document.forms.myFormName.myInputName; // the same as next line
const myInput = document.forms['myFormName']['myInputName']; // calls value instead of property
const min = myInput.getAttribute('min'); // 0
const max = myInput.getAttribute('max'); // 10
const message = document.getElementById('message');
if (message) {
document.forms['myFormName'].removeChild(message); // remove cause every input change is parsed and validated.
}
if (parseInt(myInput.value) < parseInt(min)) {
myInput.value = min;
const p = document.createElement('p');
p.id = 'message';
// p.innerText = 'El número mínimo es ' + min;
p.innerText = `El número mínimo es ${min}`;
document.forms['myFormName'].appendChild(p);
}
if (parseInt(myInput.value) > parseInt(max)) {
myInput.value = max;
const p = document.createElement('p');
p.id = 'message';
p.innerHTML = 'El número máximo es ' + max;
document.forms['myFormName'].appendChild(p);
}
}
document.forms['myFormName']['myInputName'].addEventListener('change', manageMinMax);onclick.dsd = functionName‘HTML elements’ are like arrays but to use as array need to be converted to array with map().