DOM Script 객체는 HTML 문서 내의 <script> 요소를 나타내는 객체입니다. 이 객체를 활용하면 자바스크립트만으로 <script> 태그에 접근하거나, 새로운 스크립트 요소를 동적으로 생성하고 조작할 수 있습니다.
Script 객체 생성하기
문법
다음은 Script 객체를 생성하는 기본 문법입니다.
document.createElement("SCRIPT");
document.createElement() 메서드에 "SCRIPT"를 인자로 전달하면 새로운 <script> 요소가 메모리에 생성되며, 이후 appendChild() 등으로 문서에 추가하면 실제로 실행됩니다.
Script 객체의 주요 속성
| 속성 | 설명 |
|---|---|
| async | 스크립트를 비동기적으로 실행할지 여부를 반환하고 설정합니다. |
| charset | script 요소의 charset 속성 값을 반환하고 수정합니다. |
| defer | 페이지 파싱이 모두 끝난 후에 스크립트를 실행할지 여부를 반환하고 설정합니다. |
| src | 외부 스크립트 파일의 URL을 지정하는 src 속성 값을 반환하고 수정합니다. |
| crossOrigin | 스크립트의 CORS(교차 출처 리소스 공유) 설정을 반환하고 수정합니다. |
| text | script 요소의 자식 텍스트 노드 전체의 텍스트 내용을 반환하고 수정합니다. |
| type | script 요소의 type 속성 값을 반환하고 수정합니다. |
예제
버튼을 클릭하면 새로운 script 객체를 동적으로 생성하는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:#fff;
color:#0197F6;
}
h1{
color:#23CE6B;
}
.drop-down{
width:35%;
border:2px solid #fff;
font-weight:bold;
padding:8px;
}
.btn{
background-color:#fff;
border:1.5px dashed #0197F6;
height:2rem;
border-radius:2px;
width:60%;
margin:2rem auto;
display:block;
color:#0197F6;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM Script 객체 데모</h1>
<button onclick="createScript()" class="btn">스크립트 객체 생성하기</button>
<script>
function createScript() {
var scriptElement = document.createElement("SCRIPT");
scriptElement.innerHTML="confirm('스크립트 요소가 정상적으로 생성되었나요?')";
document.body.appendChild(scriptElement);
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
“스크립트 객체 생성하기” 버튼을 클릭해 보세요.
버튼을 클릭하면 createScript() 함수가 호출되어 document.createElement("SCRIPT")로 새로운 script 요소를 만들고, 그 안에 확인 대화상자(confirm)를 띄우는 코드를 삽입한 뒤 document.body.appendChild()로 문서에 추가합니다. 그 결과 화면에 확인 대화상자가 나타나는 것을 볼 수 있습니다.
이처럼 DOM Script 객체를 사용하면 외부 라이브러리 로딩, 조건부 스크립트 실행 등 다양한 상황에서 스크립트를 유연하게 제어할 수 있습니다.