자바스크립트 기초부터 하고있는 중인데.
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에 대해 다시 한번 찬찬히 읽어봐라'고 말씀하셔도 이해를 못할 가능성이 높습니다...
