JavaScript 和 HTML DOM：Button 对象

在 JavaScript 和 HTML DOM 中，<button> 元素对应的 JavaScript 对象可以通过 document.getElementById 或其他 DOM 查询方法来获取。以下是一个简单的例子，演示如何使用 JavaScript 操控 <button> 元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Button Object Example</title>
</head>
<body>

<button id="myButton">Click me</button>

<script>
  // 获取 button 元素
  var buttonElement = document.getElementById('myButton');

  // 添加点击事件处理程序
  buttonElement.addEventListener('click', function() {
    alert('Button clicked!');
  });

  // 修改按钮文本
  buttonElement.textContent = 'Click me now';
</script>

</body>
</html>

在这个例子中，我们首先通过 getElementById 方法获取了一个具有特定 id（"myButton"）的 <button> 元素。接着，我们使用 addEventListener 方法添加了一个点击事件处理程序，当按钮被点击时，弹出一个警告框。最后，我们使用 textContent 属性修改了按钮的文本内容。

通过 JavaScript，你可以操控按钮的属性、样式，以及为按钮添加事件监听器，实现与用户的交互。这使得你可以动态地改变页面上按钮的行为和外观。

转载请注明出处：http://www.pingtaimeng.com/article/detail/6199/JavaScript 和 HTML DOM