HTML DOM Object form 속성 완벽 정리 – 문법과 예제로 배우기

HTML DOM의 Object form 속성은 <object> 요소를 감싸고 있는 폼(form)에 대한 참조(reference)를 반환합니다. 즉, <object> 요소가 어떤 폼 내부에 위치해 있는지 알고 싶을 때 이 속성을 활용하면 해당 폼 객체에 바로 접근할 수 있습니다.

문법(Syntax)

form 객체에 대한 참조를 반환하는 기본 문법은 다음과 같습니다.

ObjectElement.form

예제(Example)

이제 Object form 속성을 실제로 사용하는 예제를 살펴보겠습니다. 아래 코드는 버튼을 클릭하면 <object> 요소가 속한 폼의 id 값을 화면에 출력하는 간단한 데모입니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Object form</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 id="Home Page">
        <fieldset>
            <legend>HTML-DOM-Object-form</legend>
            <object id="objSelect" height="200" data="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg"></object>
            <input type="button" onclick="getObjectForm()" value="Get location of pic in website">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var objSelect = document.getElementById("objSelect");
    function getObjectForm() {
        divDisplay.textContent = 'Location of above picture: '+objSelect.form.id;
    }
</script>
</body>
</html>

코드 설명

위 예제의 핵심 동작 흐름은 다음과 같습니다.

1. id가 objSelect인 <object> 요소가 id가 Home Page인 폼 안에 배치되어 있습니다.
2. 버튼을 클릭하면 getObjectForm() 함수가 호출됩니다.
3. 함수 내부에서 objSelect.form을 통해 상위 폼 객체에 접근하고, .id로 폼의 id 값을 가져옵니다.
4. 결과 텍스트가 divDisplay 영역에 출력됩니다.

실행 결과(Output)

'Get location of pic in website' 버튼을 클릭하기 전 화면입니다.

HTML DOM Object form 속성 완벽 정리 – 문법과 예제로 배우기

'Get location of pic in website' 버튼을 클릭한 후 화면입니다. 이미지가 속한 폼의 위치(id)가 표시됩니다.

HTML DOM Object form 속성 완벽 정리 – 문법과 예제로 배우기

정리

Object form 속성은 읽기 전용(read-only) 속성으로, <object> 요소가 폼 외부에 있거나 어떤 폼에도 속하지 않는 경우 null을 반환합니다. 폼과 관련된 요소들의 소속 관계를 자바스크립트로 확인하거나 검증할 때 유용하게 활용할 수 있습니다.