JavaScript Element.value vs Element.getAttribute("value

JavaScript Element.value vs Element.getAttribute("value")

本文关键字：Element value quot getAttribute vs JavaScript      更新时间：2023-09-26

我最近开始学习JavaScript，但有一点我很困惑：

Element.value和Element.getAttribute("value")之间有什么不同

事实上，我的问题是，当我试图将类型为text的input元素的值复制到另一个元素时，如果我使用第一种方法（Element.value），效果很好，但如果我使用第二种方法，它会复制给元素的第一个值，并且当我更改textbox中的文本时，它永远不会更新，这种行为对我来说似乎很奇怪！你们能解释一下这里发生了什么吗？

<html>
<head>
    <meta charset="utf-8">
    <title>Hello JavaScript</title>
    <script src="script2.js"></script>
</head>
<body>
    <input id="Text1" type="text" />
    <input id="Button1" type="button" value="button" />
    <input id="Text2" type="text" />
</body>
</html>

JavaScript文件：

var myButton;
window.onload = function () {
    myButton = document.getElementById("Button1");
    myButton.onclick = function () {
        var val = document.getElementById("Text1").getAttribute("value");  
        //var val = document.getElementById("Text1").value;
        document.getElementById("Text2").setAttribute("value", val);
    };
};

不同之处在于element.value是实时的，如果用户更改（例如，文本框输入），它将反映这一点，并向您显示新值。

而getAttribute('value')仍将显示原始的value="whateverWasHere"值。

jsFiddle演示

value属性的值是您在编写HTML时设置的值。

读取时，此属性的值用于填充元素的value特性。

属性是您在使用Element.value之后得到的属性，也是用户或大多数JavaScript函数更改的属性。当用户通过界面更改值时，属性不会更改。

简而言之，您几乎总是希望使用Element.value，而几乎从不使用Element.getAttribute("value")。

相关文章：