Document.write가 페이지를 지우는 이유는 무엇입니까?

JavaScript에서 document.write() 메서드를 사용할 때 프로그래머는 종종 이상한 문제에 직면합니다. 동작: onClick과 같은 이벤트 핸들러 내에서 document.write()를 호출하면 문서가 지워질 수 있습니다.

이 예상치 못한 결과를 이해하려면 document.write()의 특성을 이해하는 것이 중요합니다. 이 함수는 브라우저에 표시되는 문서를 나타내는 데이터의 지속적인 흐름인 문서 스트림에 씁니다.

제공된 코드 예제에서:

validator() 함수는 "유효성 검사" 버튼을 클릭하면 실행됩니다. 상황은 다음과 같습니다.

1. 이 시점에서 문서 로드가 완료되었을 가능성이 높습니다. 이는 문서 스트림이 닫혀 있음을 의미합니다.
2. document.write()를 호출하면 document.open(이 자동으로 트리거됩니다. ), 현재 문서를 지우고 기존 요소를 모두 제거합니다.
3. 그 후 document.write()에 지정된 텍스트가 이제 비어 있는 문서에 렌더링됩니다.

결과적으로, 전체 문서가 새로 고쳐지고 이전 내용이 document.write()의 출력으로 바뀌기 때문에 양식 요소(체크박스 및 버튼)가 페이지에서 제거됩니다.

따라서 document.write()로 작업할 때 , 문서 스트림에 쓰기 전에 명시적으로 document.open()을 사용하여 문서 스트림이 열려 있는지 확인하는 것이 중요합니다. 그렇지 않으면 문서를 지우는 예측할 수 없는 동작으로 인해 의도한 기능이 중단될 수 있습니다.