Después de ejecutar estos comandos simples en vscode:
let pageBanner = document.getElementById('page-banner'); console.log(pageBanner);El complemento Code Runner está instalado, pero POR QUÉ la salida en la terminal es esta:
PS D:\VSprojs\vs-advanced-one> node "d:\VSprojs\vs-advanced-one\two\script.js" d:\VSprojs\vs-advanced-one\two\script.js:3 let pageBanner = document.getElementById('page-banner'); ^ ReferenceError: document is not defined at Object.<anonymous> (d:\VSprojs\vs-advanced-one\two\script.js:3:18) at Module._compile (node:internal/modules/cjs/loader:1101:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) at node:internal/main/run_main_module:17:47en el archivo html hay esto:
<body> <div id="container"> <header> <div id="page-banner"> <h1 class="title">OpenBook</h1> <form id="search-books"> <input type="text" placeholder="Search books..." /> </form> </div> </header>en su archivo css:
#page-banner{ background: #eee ; padding: 10px 0; } #page-banner h1, #page-banner p{ width: 100%; text-align: center; margin: 10px 0; } #page-banner input{ width: 90%; max-width: 300px; margin: 20px auto; display: block; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; color: #444; }Soy un programador principiante, pero sé que el objeto del documento almacena elementos de un documento HTML como html, head, body y otras etiquetas HTML como objetos. Mi pregunta principal es si el resultado de este problema en vscode es claro y suficiente para un programador novato?
El objeto del document es una API del navegador ( https://developer.mozilla.org/en-US/docs/Web/API/Document ), por lo que si ejecuta su código en el nodo, allí no existe. Tienes que ejecutar el código en el navegador para poder usar el objeto del document .