자바스크립트 기초부터 하고있는 중인데.
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에 대해 다시 한번 찬찬히 읽어봐라'고 말씀하셔도 이해를 못할 가능성이 높습니다...
(IP보기클릭)211.212.***.***
(IP보기클릭)126.227.***.***
<span> 태그가 왜 있지..? 제가 작성한 내용을 복붙한 과정에서 뭔가 문제가 있었던것 같습니다. 실제로 작성한 코드에는 쓰여있지 않습니다. 캡처 다시 떴어요! | 21.12.14 17:03 | |
(IP보기클릭)211.212.***.***
document 는 브라우저에서 실행해야 정의될거에요. 코드런너 말고 한번 브라우저에서 실행해보세요 | 21.12.14 17:04 | |
(IP보기클릭)126.227.***.***
한번만 더 부탁드릴게요. 크롬 브라우저에서 실행한 결과를 F12(개발자도구) 눌러서 확인한 결과입니다. 지금 Console에 표시한 결과가 나오는게 정상일까요? 그러면 코드러너에서 실행이 안되는 이유는 'document 객체는 편집기인 vscode가 아니라 브라우저에 내장되어있기 때문'이 맞나요? 아니라면 초등학생 가르치는셈... 치고 부탁드립니다 | 21.12.14 17:13 | |
(IP보기클릭)211.212.***.***
(IP보기클릭)126.227.***.***
역시 객체 문제였군요 감사합니다!! | 21.12.14 17:25 | |
(IP보기클릭)116.121.***.***