探究JavaScript中设置input value的几种方式

一、使用document.getElementById()方法

使用getElementById()获取input元素，然后使用该元素的value属性设置input的value值。

    <input id="myInput">
    <script>
        var input = document.getElementById("myInput");
        input.value = "Hello World";
    </script>

代码解析：

首先使用HTML定义了一个id为“myInput”的input元素，然后使用JavaScript获取这个DOM元素对象，并将它的value属性设置为“Hello World”。

二、使用document.getElementsByTagName()方法

使用getElementsByTagName()获取input元素数组

    <input id="input1">
    <input id="input2">
    <script>
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].value = "Test";
        }
    </script>

代码解析：

首先使用了HTML定义了两个input元素，然后使用JavaScript获取所有的input元素，然后使用for循环语句的语法，将每个input的value属性值都设置为“Test”。

三、使用jQuery

使用jQuery的val()方法简化代码，实现input value的设置。

    <input id="myInput">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $("#myInput").val("Hello World");
    </script>

代码解析：

首先定义了一个id为“myInput”的input元素，然后将jQuery的CDN链接到HTML中。在JavaScript中，调用jQuery的val()方法获取ID为“myInput”的input元素，并设置它的value属性为“Hello World”。

四、使用setAttribute()方法

使用setAttribute()方法设置input的value值

    <input id="myInput">
    <script>
        var input = document.getElementById("myInput");
        input.setAttribute("value", "Hello World");
    </script>

代码解析：

首先定义了一个id为“myInput”的input元素，然后使用JavaScript获取了这个input DOM元素对象，并使用setAttribute()方法将value属性设置为“Hello World”。

五、使用dataset属性

使用JavaScript的dataset属性和自定义属性data-value简化代码，实现input value的设置。

    <input id="myInput" data-value="Hello World">
    <script>
        var input = document.getElementById("myInput");
        input.value = input.dataset.value;
    </script>

代码解析：

首先为input元素定义了一个data-value属性，该属性的值为“Hello World”。在JavaScript中，首先获取了ID为“myInput”的DOM元素对象，然后使用该元素的value属性设置成该元素的dataset.value属性，最终实现设置input的value为“Hello World”。

六、使用Object.defineProperty()方法

使用Object.defineProperty()方法为input元素设置value属性，实现input value的设置。

    <input id="myInput">
    <script>
        var input = document.getElementById("myInput");
        Object.defineProperty(input, "value", {value: "Hello World"});
    </script>

代码解析：

首先，使用HTML定义了一个id为“myInput”的input元素。在JavaScript代码中，使用getElementById()获取该DOM元素对象，然后使用Object.defineProperty()方法为该input元素创建了一个新的value属性，并将该属性的值设置成了“Hello World”，最终实现了输入框的value值为“Hello World”。