HTML DOM Object data 속성 완벽 정리

HTML DOM의 Object data 속성은 <object> 요소의 data 애트리뷰트에 설정된 값에 해당하는 문자열을 반환합니다. 이 속성을 활용하면 객체에 연결된 리소스 URL을 자바스크립트로 읽어오거나 동적으로 변경할 수 있습니다.

문법(Syntax)

1. data 속성 값 읽기(반환)

ObjectElement.data

위 구문은 <object> 요소에 지정된 리소스의 URL 문자열을 반환합니다.

2. data 속성 값 설정

ObjectElement.data = URLString

URL 문자열을 할당하면 해당 객체가 표시하는 리소스를 다른 파일이나 이미지로 교체할 수 있습니다.

예제(Example)

아래는 HTML DOM Object data 속성의 실제 동작을 확인할 수 있는 예제입니다. 버튼을 클릭하면 <object> 요소에 설정된 이미지의 URL을 화면에 출력합니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Object data</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-data</legend>
           <object id="objSelect" height="200" data="https://www.tutorialspoint.com/python_blockchain/images/python-blockchain-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>

실행 결과(Output)

'Get URL' 버튼을 클릭하기 전 화면 −

HTML DOM Object data 속성 완벽 정리 – 문법과 실전 예제

'Get URL' 버튼을 클릭한 후 화면 −

HTML DOM Object data 속성 완벽 정리 – 문법과 실전 예제

정리

HTML DOM의 Object data 속성은 <object> 요소가 참조하는 리소스의 URL을 나타냅니다. 값을 읽으면 현재 설정된 URL 문자열을 얻을 수 있고, 새로운 URL 문자열을 할당하면 표시되는 리소스를 동적으로 변경할 수 있습니다. 멀티미디어나 외부 문서를 삽입하는 웹 페이지에서 유용하게 활용됩니다.