HTML DOM 버튼 name 속성 완벽 가이드 – 문법과 예제로 배우기

HTML DOM의 Button name 속성은 <button> 요소의 name 어트리뷰트와 연결된 속성입니다. 이 속성을 사용하면 버튼의 name 어트리뷰트 값을 가져오거나 새로 설정할 수 있습니다. name 어트리뷰트는 주로 폼(form) 내부에서 JavaScript를 통해 특정 요소를 선택할 때 유용하게 활용됩니다.

문법(Syntax)

name 속성을 설정하는 기본 문법은 다음과 같습니다.

buttonObject.name = name

여기서 name 속성 값은 해당 버튼의 이름을 나타냅니다.

예제(Example)

버튼 name 속성의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<button id="button1" name="btn1">BUTTON</button>
<p>아래 버튼을 클릭하면 위 버튼의 이름이 변경됩니다.</p>
<button onclick="change()">CHANGE</button>
<p id="Sample"></p>
<script>
   function change() {
      document.getElementById("button1").name="SECOND BUTTON";
      var x=document.getElementById("button1").name;
      document.getElementById("Sample").innerHTML="The new button name is "+x;
   }
</script>
</body>
</html>

출력 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM 버튼 name 속성 완벽 가이드 – 문법과 예제로 배우기

CHANGE 버튼을 클릭한 후의 결과입니다.

HTML DOM 버튼 name 속성 완벽 가이드 – 문법과 예제로 배우기

코드 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

1. 버튼 생성: 먼저 id가 “button1”이고 name이 “btn1”인 버튼을 생성합니다.

<button id="button1" name="btn1">BUTTON</button>

2. CHANGE 버튼 생성: 클릭 시 change() 함수를 실행하는 별도의 버튼을 만듭니다.

<button onclick="change()">CHANGE</button>

3. change() 함수 동작: change() 함수는 id가 “button1”인 버튼 요소를 찾아 name 속성 값을 “SECOND BUTTON”으로 변경합니다. 이후 변경된 name 값을 변수 x에 저장하고, 마지막으로 id가 “Sample”인 단락(<p>)에 그 결과를 출력합니다.

function change() {
   document.getElementById("button1").name="SECOND BUTTON";
   var x=document.getElementById("button1").name;
   document.getElementById("Sample").innerHTML="The new button name is "+x;
}

이처럼 name 속성을 활용하면 런타임에 버튼의 이름을 동적으로 변경하거나 조회할 수 있습니다. 또한 폼 데이터를 전송할 때 서버 측에서 어떤 버튼이 눌렸는지 식별하는 용도로도 널리 사용되므로, 폼과 함께 다루는 경우 반드시 익혀두면 좋습니다.