HTML DOM의 name 속성은 HTML 문서에서 입력 버튼(input button) 요소의 name 속성 값을 가져오거나 변경하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 버튼의 이름을 동적으로 읽어오고 수정할 수 있어, 폼 처리나 이벤트 핸들링 시 매우 유용하게 활용됩니다.
구문(Syntax)
name 속성의 기본 구문은 다음과 같습니다.
1. name 값 반환하기
object.name
2. name 값 변경하기
object.name="text"
여기서 "text"는 해당 입력 버튼에 새롭게 지정할 이름을 의미합니다.
예제(Example)
name 속성의 실제 동작 방식을 예제를 통해 살펴보겠습니다. 아래 코드에서는 버튼을 클릭하면 현재 설정된 name 속성 값을 화면에 출력한 뒤, 새로운 값으로 변경합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM name Property</title>
<style>
body{
text-align:center;
}
.btn{
display:block;
margin:1rem auto;
background-color:#db133a;
color:#fff;
border:1px solid #db133a;
padding:0.5rem;
border-radius:50px;
width:80%;
}
.show-name{
font-weight:bold;
font-size:1.4rem;
color:#ffc107;
}
</style>
</head>
<body>
<h1>name Property Example</h1>
<input type="submit" onclick="setName()" class="btn" value="Click me to change my Name attribute value" name="Red_Button">
<div class="show-name"></div>
<script>
function setName() {
var btn= document.querySelector(".btn");
document.querySelector(".show-name").innerHTML ="Previous Name = " + btn.name;
document.querySelector(".btn").name = "Round_Red_Button";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
브라우저의 "요소 검사(Inspect Element)" 기능으로 확인해 보면 name 속성이 Red_Button으로 설정되어 있는 것을 볼 수 있습니다.
이제 빨간색 버튼의 name 속성 값을 변경하려면 "Click me to change my Name attribute value" 버튼을 클릭하세요. 클릭하는 순간 기존 name 값이 화면에 표시되고, 속성 값이 새로운 이름으로 변경됩니다.
변경 후 요소 검사 결과를 확인하면 name 속성이 Round_Red_Button으로 바뀐 것을 확인할 수 있습니다.
