HTML DOM 按钮对象

htmlweb developmentfront end technology更新于 2025/9/22 23:40:17

HTML DOM 按钮对象与 <button> 关联。元素。

属性

以下是 HTML DOM 按钮对象的属性 −

属性	描述
autofocus	设置或返回按钮在页面加载时是否自动聚焦。
disabled	设置或返回给定按钮是否被禁用。
form	返回包含按钮的表单的引用。
formAction	设置或返回按钮。
formEnctype	设置或返回按钮的 formEnctype 属性值。
formMethod	设置或返回按钮的 formMethod 属性值。
formNoValidate	设置或返回提交时是否验证表单数据。
formTarget	设置或返回按钮的 formTarget 属性值。
name	设置或返回按钮的 name 属性值。
type	设置或返回按钮类型。
值	设置或返回按钮值。

语法

以下是语法 −

创建按钮对象 −

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);
}