HTML DOM Object 객체 완벽 정리 – 주요 속성과 활용 예제

HTML DOM의 Object 객체는 HTML 문서 내의 <object> 요소를 나타냅니다. 이 객체를 활용하면 외부 리소스(이미지, PDF, 멀티미디어 등)를 페이지에 삽입하고, 자바스크립트로 해당 요소의 속성을 동적으로 제어할 수 있습니다.

Object 요소 생성하기

자바스크립트에서는 createElement() 메서드를 사용하여 새로운 <object> 요소를 만들 수 있습니다.

var objectElement = document.createElement("OBJECT");

Object 객체의 주요 속성

생성된 objectElement 객체는 아래와 같은 속성들을 가집니다.

속성	설명
data	객체 요소가 사용하는 리소스의 URL을 설정하거나 반환합니다.
form	객체 요소를 감싸고 있는 상위 폼(form)에 대한 참조를 반환합니다.
height	객체 요소의 높이를 설정하거나 반환합니다.
name	객체 요소의 이름(name)을 설정하거나 반환합니다.
type	data 속성을 통해 다운로드되는 데이터의 콘텐츠 타입(MIME 타입)을 설정하거나 반환합니다.
useMap	객체 요소와 함께 사용할 클라이언트 사이드 이미지 맵(client-side image map)의 이름을 설정하거나 반환합니다.
width	객체 요소의 너비를 설정하거나 반환합니다.

HTML DOM Object 객체 예제

다음은 Object 객체의 속성을 실제로 활용한 예제입니다. 버튼을 클릭하면 <object> 요소에 표시된 이미지의 URL을 화면에 출력합니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Object object</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style></head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-Object-Object</legend>
         <object id="objSelect" height="200"          data="https://www.tutorialspoint.com/spring/images/spring-mini-logo.jpg"></object>
         <input type="button" onclick="getObjectData()" value="Get URL">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var objSelect = document.getElementById("objSelect");
   function getObjectData() {
      objSelect.data
      divDisplay.textContent = 'URL of above picture: '+objSelect.data;
   }
</script>
</body>
</html>

실행 결과

'Get URL' 버튼을 클릭하기 전 화면은 다음과 같습니다.

HTML DOM Object 객체 완벽 정리 – 주요 속성과 활용 예제

'Get URL' 버튼을 클릭한 후, <object> 요소의 data 속성 값인 이미지 URL이 div 영역에 출력됩니다.

HTML DOM Object 객체 완벽 정리 – 주요 속성과 활용 예제

이처럼 HTML DOM의 Object 객체를 사용하면 <object> 요소가 참조하는 리소스 정보를 손쉽게 읽어오거나 수정할 수 있어, 동적인 웹 페이지 구현에 유용하게 활용됩니다.