JavaScript中获取HTML元素值的三种方法

当我们在编写 JavaScript 代码时，常常需要获取 HTML 元素的值。下面介绍三种常见的方法来获取 HTML 元素的值。

1. 使用 document.getElementById() 方法

document.getElementById() 方法是用来获取指定 id 的元素的，然后我们可以使用 value 属性获取元素的值。示例代码如下：

// HTML 代码
<input type="text" id="myInput">

// JavaScript 代码
const myInput = document.getElementById('myInput');
const inputValue = myInput.value;
console.log(inputValue);  // 输出 input 元素的值

上面的代码中，我们定义了一个 type 为 text，id 为 myInput 的 input 元素。然后使用 document.getElementById() 方法获取该元素，并使用 value 属性获取值。

2. 使用 document.querySelector() 方法

document.querySelector() 方法可以用来获取指定选择器的第一个元素，然后我们也可以使用 value 属性获取元素的值。示例代码如下：

// HTML 代码
<input type="text" class="myInput">

// JavaScript 代码
const myInput = document.querySelector('.myInput');
const inputValue = myInput.value;
console.log(inputValue);  // 输出 input 元素的值

在这个示例中，我们定义了一个 class 为 myInput 的 input 元素。接下来，我们使用 document.querySelector() 方法来获取该元素，并使用 value 属性获取值。

3. 使用事件监听器

我们还可以通过事件监听器来获取 HTML 元素的值，这种方法也经常用于交互式的应用中。例如，当用户点击按钮时，我们需要获取某个元素的值进行处理。示例代码如下：

// HTML 代码
<input type="text" id="myInput">
<button id="myBtn">获取值</button>

// JavaScript 代码
const myInput = document.getElementById('myInput');
const myBtn = document.getElementById('myBtn');

myBtn.addEventListener('click', function() {
  const inputValue = myInput.value;
  console.log(inputValue);  // 输出 input 元素的值
});

上面的代码中，我们通过 addEventListener() 方法给按钮添加了一个点击事件的监听器，当用户点击按钮时，读取并输出了 input 元素的值。

以上是 JavaScript 中获取 HTML 元素值的三种方法，你可以根据不同的场景和需求来选择合适的方法。