HTML DOM Object name 속성이란?
HTML DOM의 name 속성은 <object> 요소의 name 어트리뷰트 값을 설정하거나 반환하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트를 통해 객체의 이름을 동적으로 변경할 수 있습니다.
단, name 어트리뷰트는 객체의 이름만 지정하며, 그 외의 동작에는 영향을 주지 않는다는 점에 유의해야 합니다.
name 속성 값을 설정하는 문법
obj.name = name
name 속성 값을 반환하는 문법
obj.name
예제로 살펴보기
다음 예제는 버튼을 클릭했을 때 <object> 요소의 name 속성을 변경하고, 변경 결과를 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<object id="obj1" width="570" height="350" data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" name="obj"></object>
<button onclick="display()">객체 이름 변경하기</button>
<p id="demo"></p>
<script>
function display() {
document.getElementById("obj1").name = "obj2";
document.getElementById("demo").innerHTML = "이름이 obj2로 변경되었습니다";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같이 초기 화면이 표시됩니다.
이제 버튼을 클릭하면 객체의 name 속성이 'obj'에서 'obj2'로 업데이트되고, 아래와 같이 변경 메시지가 출력됩니다.
정리
- 설정:
obj.name = "새이름"형태로 객체의 이름을 변경합니다. - 반환:
obj.name형태로 현재 설정된 이름 값을 읽어옵니다. - name 어트리뷰트는 객체 식별용으로만 사용되며, 렌더링이나 기능에는 영향을 주지 않습니다.