正文

JavaScript 获取 input 元素的 value 值的简单方法：在 HTML 中通过 input 元素的 id 或 name 属性引用，使用 document.getElementById() 或 document.getElementsByName() 函数。例如：document.getElementById('inputId').value 或

/0 浏览量
1109

在构建网页应用时，处理表单数据是一个常见的任务。其中，获取用户输入的数据是最基础的操作之一。在 JavaScript 中，我们可以通过多种方式来获取 <input> 元素的值。本文将详细介绍如何使用 document.getElementById() 和 document.getElementsByName() 函数来获取 <input> 元素的值。

通过 ID 获取 input 元素值

基本概念

document.getElementById() 是 JavaScript 提供的一个方法，用于获取具有指定 ID 的元素。当你在 HTML 中为 <input> 元素设置一个独特的 ID 时，你可以使用这个方法来轻松地获取其值。

示例代码

// 假设 HTML 中有一个 input 元素，其 ID 为 'inputId'
<input type="text" id="inputId" value="Hello, World!">

<script>
    // 使用 document.getElementById() 获取 input 元素的值
    var inputValue = document.getElementById('inputId').value;
    console.log(inputValue); // 输出: Hello, World!
</script>

在这个例子中，我们通过 document.getElementById('inputId') 获取到 ID 为 inputId 的 <input> 元素，然后通过调用 .value 属性来获取该元素的值。

通过 Name 获取 input 元素值

基本概念

document.getElementsByName() 方法可以获取所有具有指定名称的元素。当你在表单中使用了多个相同的 <input> 元素，并且这些元素拥有相同的 name 属性时，这个方法特别有用。

示例代码

<!-- 假设 HTML 中有两个 input 元素，它们的 name 属性都为 'inputName' -->
<input type="text" name="inputName" value="Hello, World!">
<input type="text" name="inputName" value="Goodbye, World!">

<script>
    // 使用 document.getElementsByName() 获取 name 属性为 'inputName' 的 input 元素
    var inputElements = document.getElementsByName('inputName');
    
    // 打印所有匹配的 input 元素的值
    for (var i = 0; i < inputElements.length; i++) {
        console.log(inputElements[i].value);
    }
    
    // 输出: Hello, World!
    // 输出: Goodbye, World!
</script>

在这个例子中，我们通过 document.getElementsByName('inputName') 获取所有 name 属性为 inputName 的 <input> 元素，然后通过遍历这些元素来获取它们的值。

总结

使用 document.getElementById() 和 document.getElementsByName() 方法是获取 <input> 元素值的一种简单而有效的方式。在实际开发中，你可以根据具体情况选择合适的方法来获取所需的值。希望本文能帮助你更好地理解和应用这些方法。

-- 展开阅读全文 --