programing

getElementById ()는 요소가 존재하더라도 null을 반환합니다.

itsource 2021. 1. 18. 07:59
반응형

getElementById ()는 요소가 존재하더라도 null을 반환합니다.


getElementById ()를 사용하여 요소를 가져 오려고하는데 요소가 존재하더라도 null을 반환합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

<html>
<head> 
    <title>blah</title>
    <script type="text/javascript">
        alert(document.getElementById("abc"));
    </script>
</head> 
<body>
    <div id="abc">

    </div>
</body>


이것을 document load이벤트 에 넣어야합니다 . DOM은 abc스크립트가 실행될 때 까지 도달하지 않았습니다 .


DOM이로드되기 전에 스크립트가 실행됩니다. 이 문제를 해결하려면 다음 window.onload과 같이 함수에 코드를 배치 할 수 있습니다 .

window.onload = function() {
    alert(document.getElementById("abc"));
};

대안은 script닫는 </body>태그 앞에 오른쪽 을 배치하는 것입니다 .


로드 이벤트에 연결하지 않으려면 본문 맨 아래에 스크립트를 넣으면 끝에서 실행됩니다.

<html>
<head> 
    <title>blah</title>    
</head> 
<body>
    <div id="abc">
    </div>
    <script type="text/javascript">
        alert(document.getElementById("abc"));
    </script>
</body>
</html>

페이지가 렌더링되기 전에 스크립트가 실행되기 때문입니다.

증명을 위해 다음 속성을 본문 태그에 추가하십시오.

<body onload="alert(document.getElementById('abc'));" >

그러나 그것은 존재하지 않습니다. HTML의 그 시점에는 없습니다. HTML 문서는 프로그램이 실행되는 것처럼 위에서 아래로 구문 분석됩니다. 가장 좋은 해결책은 페이지 하단에 스크립트 태그를 추가하는 것입니다. onload 이벤트에 JavaScript를 첨부 할 수도 있습니다.

참조 URL : https://stackoverflow.com/questions/5371047/getelementbyid-returns-null-even-though-the-element-exists

반응형