HTML DOM의 Button 객체는 HTML 문서에서 <button> 요소를 나타내며, 자바스크립트를 통해 버튼을 동적으로 생성하거나 속성을 제어할 수 있게 해줍니다.
Button 객체의 주요 속성
HTML DOM Button 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| autofocus | 페이지가 로드될 때 해당 버튼에 자동으로 포커스가 설정되는지 여부를 설정하거나 반환합니다. |
| disabled | 해당 버튼이 비활성화되어 있는지 여부를 설정하거나 반환합니다. |
| form | 버튼이 포함된 폼(form)에 대한 참조를 반환합니다. |
| formAction | 버튼의 formAction 속성값을 설정하거나 반환합니다. |
| formEnctype | 버튼의 formEnctype 속성값을 설정하거나 반환합니다. |
| formMethod | 버튼의 formMethod 속성값(폼 전송 방식)을 설정하거나 반환합니다. |
| formNoValidate | 폼 데이터가 제출 시 유효성 검사를 거쳐야 하는지 여부를 설정하거나 반환합니다. |
| formTarget | 버튼의 formTarget 속성값을 설정하거나 반환합니다. |
| name | 버튼의 name 속성값을 설정하거나 반환합니다. |
| type | 버튼의 유형(type)을 설정하거나 반환합니다. |
| value | 버튼의 값을 설정하거나 반환합니다. |
문법(Syntax)
자바스크립트로 새로운 버튼 객체를 생성하는 기본 문법은 다음과 같습니다.
var x = document.createElement("BUTTON");document 객체의 createElement() 메서드에 "BUTTON"을 인자로 전달하면, 새로운 <button> 요소가 생성되어 변수에 할당됩니다.
예제 코드
다음은 HTML DOM Button 객체를 활용하여 클릭 시 새로운 버튼을 동적으로 생성하는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 BUTTON 요소가 생성됩니다</p>
<button onclick="buttonCreate()">CREATE</button>
<br><br>
<script>
function buttonCreate() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("NEW BUTTON");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 화면에 CREATE라는 텍스트를 가진 버튼이 표시됩니다.
이 상태에서 CREATE 버튼을 클릭하면, 그 아래에 "NEW BUTTON"이라는 텍스트를 가진 새로운 버튼이 동적으로 추가됩니다.
예제 코드 분석
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
먼저, 클릭 이벤트가 발생했을 때 buttonCreate() 함수를 실행하도록 onclick 속성이 지정된 CREATE 버튼을 만듭니다.
<button onclick="buttonCreate()">CREATE</button>
그다음 buttonCreate() 함수 내부에서 다음 작업이 순차적으로 수행됩니다.
1단계: document 객체의 createElement() 메서드를 사용하여 새로운 버튼 요소를 생성하고 변수 x에 할당합니다.
2단계: createTextNode() 메서드로 "NEW BUTTON"이라는 텍스트 노드를 생성한 뒤 변수 t에 할당합니다.
3단계: appendChild() 메서드를 사용하여 텍스트 노드 t를 버튼 x의 자식 노드로 추가합니다. 이 과정을 통해 버튼 안에 표시될 텍스트가 지정됩니다.
4단계: 마지막으로 document.body.appendChild() 메서드를 호출하여, 텍스트 노드를 포함한 버튼 전체를 문서 본문(body)의 자식 요소로 추가함으로써 화면에 실제로 표시됩니다.
function buttonCreate() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("NEW BUTTON");
x.appendChild(t);
document.body.appendChild(x);
}이처럼 HTML DOM Button 객체를 활용하면 페이지 로드 후에도 사용자의 상호작용에 따라 버튼을 자유롭게 생성하고 조작할 수 있습니다.