HTML 输入范围的值，getattribute vs value

Question

我已经创建了类型=“RANGE”和 id=“slider”的 HTML INPUT 元素。为什么我不能使用 getAttribute("value") 方法访问它的值？调试器显示有一个名为“value”的属性，其值不等于元素的值。range 元素的值不应该是它的属性吗？

var sliderValue1=document.getElementById("slider").getAttribute("value");
var sliderValue2= document.getElementById("slider").value;

Answer 1

为什么我不能使用 getAttribute("value") 方法访问它的值？

你不能这样做，因为，.getAttribute("value")返回元素写入 html 的值（如果你不改变它，默认值）。

例子：

和： <input type="range" id="slider" value="500">

document.getElementById("slider").getAttribute("value");500如果您使用输入更改范围，也返回。

调试器显示有一个名为“value”的属性，其值不等于元素的值。

这是真的，也是对的。如果您设置默认值，则它永远不会改变（对于重置输入很有用）。

range 元素的值不应该是它的属性吗？

不，元素的当前值存储在 html 之外，因此要访问当前值，您必须使用: document.getElementById("slider").value;，但它与所有类型的输入相同，不仅在范围内。

$(function(){
    $("input[name=foo]").on("change",function(){
        var val = $(this).val();
        var attr = $(this).attr("value");
        var prop = $(this).prop("value");
        console.log(" --- JQUERY TEST JS ----");
        console.log("Current value: (using .val)",val);
        console.log("Initial value: (using .attr)",attr);
        console.log("Current value: (using .prop)",prop);
    });
});

//NATIVE JS
function originalJS(){
    console.log(" --- ORIGINAL JS ----");
    console.log("Current value: (using .value)",this.value);
    console.log("Initial value: (using .attr)",this.getAttribute("value"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="range" onChange="originalJS.call(this)" name="foo" value="500"/>
<p>RUN AND WATCH CONSOLE :) ... watch value="500" (but range is 0-100)</p>

<input type="text" onChange="originalJS.call(this)" name="foo" value="500"/>