M06 UF3A1. Teoria
T1. Introducció al DOM
Comencem una nova UF (UF3) i en la sessió d'avui hem introduït els conceptes més importants del DOM. Sessió 1:
- JS HTML DOM (https://www.w3schools.com/js/js_htmldom.asp)
- DOM Intro
- DOM Methods
- DOM Document
- DOM Elements
- DOM HTML
- DOM Forms
T2. Continuem amb el DOM
- DOM CSS (https://www.w3schools.com/js/js_htmldom_css.asp)
- DOM Animations
- DOM Events
- DOM Event Listener
Compte amb les majúscules i minúscules
Partim d'aquest codi bàsic:
<!DOCTYPE html> <html> <body> <h2>JavaScript HTML Events</h2> <h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2> </body> </html>
També funciona:
<h2 onclick="this.innerHTML='Ooops!'"> <h2 ONCLICK="this.innerHTML='Ooops!'"> <h2 OnClick="this.innerHTML='Ooops!'"> ...
perquè aquest codi el processa el navegador, que no li importa les majúscules i minúscules.
Però si faig servir addEventListener, com que és Javascript pur, sí que importa majúscules i minúscules. He de fer servir click estrictament (no puc fer servir Clic, onclick, etc.).
<!DOCTYPE html>
<html>
<body>
<h2>Clicar aquí</h2>
</body>
</html>
<script>
let ele = document.getElementsByTagName("H2");
ele[0].addEventListener("click",function(){this.innerHTML = "Ep!!!"});
</script>
creat per Joan Quintana Compte, novembre 2021
