HTML DOM Button 개체는
속성
다음은 HTML DOM 버튼 객체의 속성입니다 -
| 속성 | 설명 |
|---|---|
| 자동 초점 | 페이지가 로드될 때 버튼이 자동으로 포커스를 받을지 여부를 설정하거나 반환합니다. |
| 비활성화됨 | 주어진 버튼의 비활성화 여부를 설정하거나 반환합니다. |
| 양식 | 버튼이 포함된 양식의 참조를 반환합니다. |
| formAction | 버튼의 formAction 속성 값을 설정하거나 반환합니다. |
| formEnctype | 버튼의 formEnctype 속성 값을 설정하거나 반환합니다. |
| formMethod | 버튼의 formMethod 속성 값을 설정하거나 반환합니다. |
| formNoValidate | 양식 데이터를 제출할 때 유효성을 검사해야 하는지 여부를 설정하거나 반환합니다. |
| formTarget | 버튼의 formTarget 속성 값을 설정하거나 반환합니다. |
| 이름 | 버튼의 이름 속성 값을 설정하거나 반환합니다. |
| 유형 | 버튼 유형을 설정하거나 반환합니다. |
| 값 | 버튼 값을 설정하거나 반환합니다. |
구문
다음은 −
의 구문입니다.버튼 개체 만들기 -
var x = document.createElement("BUTTON"); 예시
HTML DOM 버튼 객체의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<body>
<p>Click on the below button to create a BUTTON element</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를 만들었습니다. 이 버튼은 클릭 시 buttonCreate() 함수를 실행합니다.
<button onclick="buttonCreate()">CREATE</button>
buttonCreate() 메서드는 문서 객체의 createElement() 메서드를 사용하여 버튼 요소를 만들고 변수 x에 할당합니다. create 요소를 사용하여 텍스트 노드를 만들고 변수 t에 할당합니다. 그런 다음 appendchild 메서드를 사용하여 텍스트 노드 t를 버튼에 추가합니다. 버튼은 자식 텍스트 노드와 함께 document.body.appendChild() 메서드를 사용하여 문서 본문에 자식으로 추가됩니다.
function buttonCreate() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("NEW BUTTON");
x.appendChild(t);
document.body.appendChild(x);
}