var name = document.firstElementChild.lastElementChild.lastElementChild.lastElementChild; name.innerHTML = "XYZ";
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>My Website</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello</h1> <input type="checkbox"> <button style=":active color:red;">Click Me</button> <ul> <li class="list"> <a href="https://www.google.com">Google</a> </li> <li class="list">Second</li> <li class="list">Third</li> </ul> </body> </html>
Entonces, este es el código para un sitio web, y quería cambiar el texto del último elemento del documento: "Tercero" cambia a "XYZ".
Cuando uso el siguiente código, el texto no cambia.
var name=document.firstElementChild.lastElementChild.lastElementChild.lastElementChild; name.innerHTML="XYZ";
Sin embargo, cuando uso esto:
document.firstElementChild.lastElementChild.lastElementChild.lastElementChild.innerHTML="XYZ";
El texto en el sitio web cambia inmediatamente. ¿Por qué está pasando esto? Todo lo que he hecho es dividir el código en dos líneas en lugar de escribirlo en una.
En el ámbito global, la variable de name
está predefinida y solo se le pueden asignar cadenas.
Puedes:
let
en lugar de var
para sombrear (en lugar de mapear) variables globales.