当我们在编写 JavaScript 代码时，常常需要获取 HTML 元素的值。下面介绍三种常见的方法来获取 HTML 元素的值。
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 属性获取值。
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 属性获取值。
我们还可以通过事件监听器来获取 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 元素值的三种方法，你可以根据不同的场景和需求来选择合适的方法。
本文链接：http://task.lmcjl.com/news/11589.html