왜 문서가.내 자바스크립트에서 바디 널?
여기 저의 간략한 HTML 문서가 있습니다.
Chrome Console에서 이 오류를 지적하는 이유는 무엇입니까?
"Uncatched TypeError: 메서드를 호출할 수 없습니다. "의 'adpendChild'입니다.
null"?
<html>
<head>
<title>Javascript Tests</title>
<script type="text/javascript">
var mySpan = document.createElement("span");
mySpan.innerHTML = "This is my span!";
mySpan.style.color = "red";
document.body.appendChild(mySpan);
alert("Why does the span change after this alert? Not before?");
</script>
</head>
<body>
</body>
</html>
시신은 아직 정의되지 않았습니다일반적으로 이러한 요소를 사용하는 자바스크립트를 실행하기 전에 모든 요소를 생성하기를 원합니다.이 경우 당신은 자바스크립트를 가지고 있습니다.head사용하는 섹션body. 시원치 않아요.
당신은 이 코드를 a로 포장하길 원합니다.window.onload핸들러 또는 뒤에 배치합니다.<body>태그(e-bacho 2.0에서 언급한 바와 같이).
<head>
<title>Javascript Tests</title>
<script type="text/javascript">
window.onload = function() {
var mySpan = document.createElement("span");
mySpan.innerHTML = "This is my span!";
mySpan.style.color = "red";
document.body.appendChild(mySpan);
alert("Why does the span change after this alert? Not before?");
}
</script>
</head>
스크립트가 실행되기 전에body요소가 로드되기도 했습니다.
이 문제를 해결하는 몇 가지 방법이 있습니다.
코드를 DOM 로드 콜백에 래핑합니다.
이벤트 수신기에 논리를 랩핑합니다.
DOMContentLoaded.그러면 콜백이 실행됩니다.
body요소가 로드되었습니다.document.addEventListener('DOMContentLoaded', function () { // ... // Place code here. // ... });필요에 따라 A/S를 첨부할 수 있습니다.
load이벤트 청취자.window개체:window.addEventListener('load', function () { // ... // Place code here. // ... });사이의 차이에 대해서는
DOMContentLoaded그리고.load이벤트, 이 질문을 참조하십시오.위치 이동
<script>element, 마지막으로 자바스크립트 로드:지금, 당신의.
<script>요소를 로드하는 중입니다.<head>문서의 요소입니다.이것은 그것이 실행될 것이라는 것을 의미합니다.body로드했습니다.구글 개발자들은 그것을 옮기는 것을 추천합니다.<script>페이지 끝에 태그를 지정하여 모든 HTML 콘텐츠가 자바스크립트가 처리되기 전에 렌더링되도록 합니다.<!DOCTYPE html> <html> <head></head> <body> <p>Some paragraph</p> <!-- End of HTML content in the body tag --> <script> <!-- Place your script tags here. --> </script> </body> </html>
코드를 onload 이벤트에 추가합니다.승인된 답변은 이를 정확하게 보여주지만, 작성 시 다른 모든 답변과 마찬가지로 스크립트 태그를 닫는 본문 태그 뒤에 넣을 것을 제안합니다.
유효한 html이 아닙니다.그러나 브라우저가 너무 친절하기 때문에 코드가 작동하게 됩니다 ;)
자세한 내용은 이 답변 참조 </body> 태그 뒤에 <script> 태그를 배치하는 것이 잘못된 것입니까?
이런 이유로 다른 답변들을 반대표로 던졌습니다.
또는 이 부분을 추가합니다.
<script type="text/javascript">
var mySpan = document.createElement("span");
mySpan.innerHTML = "This is my span!";
mySpan.style.color = "red";
document.body.appendChild(mySpan);
alert("Why does the span change after this alert? Not before?");
</script>
HTML 뒤에 다음과 같이 입력합니다.
<html>
<head>...</head>
<body>...</body>
<script type="text/javascript">
var mySpan = document.createElement("span");
mySpan.innerHTML = "This is my span!";
mySpan.style.color = "red";
document.body.appendChild(mySpan);
alert("Why does the span change after this alert? Not before?");
</script>
</html>
당신은 당신이 필요합니다.<script src="...">...</script>본문 태그 끝에 있는 파일:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>you can see this</title>
//-------------------------*** not here ***---------------------
</head>
<body>
<div class="container">
<div class="no">this is my dummy div1</div>
<div class="no">this is my dummy div2</div>
<div class="no">this is my dummy div2</div>
<div class="no">this is my dummy div2</div>
</div>
//-------------------------*** here ***---------------------
<script src="...js">...</script>
</body>
</html>
브라우저는 html을 위에서부터 아래로 파싱하며 스크립트는 본문이 로드되기 전에 실행됩니다.스크립트를 차례로 수정하는 것입니다.
<html>
<head>
<title> Javascript Tests </title>
</head>
<body>
</body>
<script type="text/javascript">
var mySpan = document.createElement("span");
mySpan.innerHTML = "This is my span!";
mySpan.style.color = "red";
document.body.appendChild(mySpan);
alert("Why does the span change after this alert? Not before?");
</script>
</html>
document.body코드가 실행될 때 아직 사용할 수 없습니다.
대신 수행할 수 있는 작업:
var docBody=document.getElementsByTagName("body")[0];
docBody.appendChild(mySpan);
언급URL : https://stackoverflow.com/questions/9916747/why-is-document-body-null-in-my-javascript
'programing' 카테고리의 다른 글
| jQuery에서 마우스 휠 이벤트를 얻습니까? (0) | 2023.10.27 |
|---|---|
| Spring 보안에서 하나를 제외한 모든 URL 허용 (0) | 2023.10.27 |
| 열의 MySQL 합 요소 (0) | 2023.10.22 |
| C의 매크로 범위? (0) | 2023.10.22 |
| Laravel에서 Wordpress Database로 인증 사용자 (0) | 2023.10.22 |