HTML DOM의 Parameter 객체는 HTML 문서 내 <param> 요소를 나타내는 객체입니다. <param> 요소는 주로 <object> 요소와 함께 사용되며, 임베드된 콘텐츠(예: 오디오, 비디오, 플러그인)에 실행 시 필요한 매개변수를 전달하는 역할을 합니다.
Parameter 객체 생성하기
문법
JavaScript로 <param> 요소를 동적으로 생성하려면 다음과 같은 문법을 사용합니다.
document.createElement("PARAM");Parameter 객체의 주요 속성
Parameter 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| name | HTML 문서 내 param 요소의 name 속성값을 반환하거나 수정합니다. 매개변수의 이름을 지정하는 데 사용됩니다. |
| value | HTML 문서 내 param 요소의 value 속성값을 반환하거나 수정합니다. 매개변수에 전달될 실제 값을 지정합니다. |
예제 코드
버튼을 클릭하면 <object> 요소와 그 안에 <param> 요소를 동적으로 생성하는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:60%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM Parameter Object Demo</h1>
<button onclick="create()" class="btn">Create a Param element</button>
<script>
function create() {
var objectElement = document.createElement("OBJECT");
objectElement.setAttribute("data", "https://www.tutorialspoint.com/html/Kalimba.mp3");
objectElement.setAttribute("class", "object-element");
document.body.appendChild(objectElement);
var paramObject = document.createElement("PARAM");
paramObject.setAttribute("name", "autoplay");
paramObject.setAttribute("value", "true");
document.querySelector(".object-element").appendChild(paramObject);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
Create a Param element 버튼을 클릭하면 HTML 문서에 <object> 요소가 추가되고, 그 안에 name 속성이 "autoplay", value 속성이 "true"로 설정된 <param> 요소가 생성되어 오디오 파일이 자동 재생되도록 매개변수가 전달됩니다.
정리
HTML DOM Parameter 객체는 <param> 요소를 JavaScript로 제어할 수 있게 해주는 인터페이스입니다. document.createElement("PARAM")으로 동적으로 생성할 수 있으며, name과 value 속성을 통해 임베드된 콘텐츠에 필요한 설정값을 유연하게 전달할 수 있습니다.