dom

<div id="root"></div>

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);

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 class

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);

// 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 parameter

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