자바스크립트 기초부터 하고있는 중인데.
DOM에 대한 부분을 연습하고 있는 중입니다만 에러가 발생했습니다.
아무리 검색해도 풀 방법이 없어서 여기에라도 좀 여쭙고 싶어서 올립니다.
(VS code로 작성. Code Runner를 설치해서 ctrl+alt+n으로 코드 실행)
작성한 코드는 아래와 같습니다.
1. index.html
DOCTYPE html>
<html>
<head>
<title>ja-vascript로 DOM조작</</span>title>
<meta charset="utf-8" />
<link rel="stylesheet" href="src/styles.css" />
</</span>head>
<body>
<hl id="title">Hello world..?</</span>hl>
<div class="container">
<p>Area1</</span>p>
</</span>div>
<div class="container">
<p>Area2</</span>p>
</</span>div>
<script src="src/index.js"></</span>script>
</</span>body>
</</span>html>
2. styles.css
.container{
border: solid 1px #ccc;
padding: 16px;
margin: 8px;
}
3. index.js
const title1 = document.getElementById("title");
// const title2 = document.querySelector("#title");
// const containers = document.getElementsByClassName("container");
console.log(title1);
// console.log(title2);
// console.log(containers);
4. 에러 메시지( ------------ 라고 표시한 부분은 제 이름이라 가린 부분입니다.)
c:\Users\------------\Desktop\VScode\doc_test\src\index.js:1
const title1 = document.getElementById("title");
^
ReferenceError: document is not defined
at Object. (c:\Users\------------\Desktop\VScode\doc_test\src\index.js:1:16)
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:47
제가 보고있는 책의 코드 예제대로 그대로 써서 실행했는데 오류가 나오는 경우입니다...
왜 이런 에러가 발생하는지,
이런 에러를 막기 위해서는 어떤 조치를 할 필요가 있는지
자세히 설명을 부탁드리고자 합니다.
말 그대로 기초부터 하는중이라 'DOM에 대해 다시 한번 찬찬히 읽어봐라'고 말씀하셔도 이해를 못할 가능성이 높습니다...
</</span>title> 책에 이렇게 적혀있나요? </title>가 아니고요?
<span> 태그가 왜 있지..? 제가 작성한 내용을 복붙한 과정에서 뭔가 문제가 있었던것 같습니다. 실제로 작성한 코드에는 쓰여있지 않습니다. 캡처 다시 떴어요!
document 는 브라우저에서 실행해야 정의될거에요. 코드런너 말고 한번 브라우저에서 실행해보세요
한번만 더 부탁드릴게요. 크롬 브라우저에서 실행한 결과를 F12(개발자도구) 눌러서 확인한 결과입니다. 지금 Console에 표시한 결과가 나오는게 정상일까요? 그러면 코드러너에서 실행이 안되는 이유는 'document 객체는 편집기인 vscode가 아니라 브라우저에 내장되어있기 때문'이 맞나요? 아니라면 초등학생 가르치는셈... 치고 부탁드립니다
콘솔에는 id 가 title 인 객체가 정상적으로 표시된거 같고요. 저도 웹을 안 한지가 오래되어서 정확하게 설명해드리긴 힘든데, window 객체나 document 객체는 브라우저에서 생성되는 객체라서 vscode 에서 코드러너로 실행했을때는 없기 때문에 처음의 오류가 발생했을거에요. 아무래도 해당 객체들은 눈에 보이는 부분들을 처리하기위한 기능들이 대부분이라.
역시 객체 문제였군요 감사합니다!!
ReferenceError: document is not defined document라는 변수가 정의되지 않았다는 이야기입니다. document는 현재 페이지의 DOM 관련 정보를 담고 있는 객체로 웹 브라우저에서 실행 될 때만 접근 가능합니다. VS code의 code runner로 실행할 경우 node.js 환경으로 실행될 것이고 여기는 docuemnt가 없어 레퍼런스 에러가 나는 것입니다. 자바스크립트는 웹 브라우저 실행 환경과 node.js 실행 환경이 크게 다르므로 코드가 어느 환경을 대상으로 하고 있는지 확인할 필요가 있습니다.