No sé por qué mi consola me dice que el resultado no está definido. Estoy aprendiendo DOM y encontré el problema en mi primer código que no entiendo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> let head = document.getElementsByClassName(".main"); console.log(head.textContent); let tail = document.getElementsByTagName("p"); console.log(tail.textContent); </script> </head> <body> <div class="main"> <p>hello</p> </div> </body> </html>.main a main en getElementsByClassNamegetElementsByClassName devuelve una lista, así que agregue [0] a getElementsByClassName("main") para obtener el primer elemento <div class="main"> <p>hello</p> </div> <script> let head = document.getElementsByClassName("main")[0]; console.log(head.textContent); let tail = document.getElementsByTagName("p")[0]; console.log(tail.textContent); </script>document.getElementsByClassName devuelve una colección de elementos HTML, no un solo elementodocument.getElementsByClassName debe pasar main , no .mainmain probablemente no sea lo que esperasquerySelector que es más simple (pero más lento). Aquí hay una versión funcional: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="main"> <p>hello</p> </div> <script> let head = document.querySelector(".main"); console.log(head.textContent); let tail = document.querySelector("p"); console.log(tail.textContent); </script> </body> </html>