by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11700
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、直接正题-valueAsNumber

我也是最近才知道，原来DOM对象获取属性值，不是都是字符串类型，还可以是数值类型。

已知输入框元素：

<input id="number" min="1" max="10" type="number" />

平常我们获取输入框的值都是使用 number.value 获取的，但是这个属性的返回值是个字符串。

其实现在浏览器支持直接返回数值类型的，使用number.valueAsNumber即可。

实地演示

眼见为实，我们实地测试下，例如typeof下number.valueAsNumber的返回值类型，看看返回的是string还是number.

output.textContent = typeof number.valueAsNumber;

比方说有下面一个数值输入框：

点击上面的按钮，可以看到输出的结果是’number’。

如果是普通输入框？

我们不妨拿<textarea>元素测试下，测试代码如下：

<textarea id="textarea" cols="30" rows="4">10</textarea>
<button onclick="console.log(textarea.valueAsNumber);">点击我</button>

结果是 undefined。

说明valueAsNumber属性返回数值不能是普通的输入框元素。

二、valueAsDate属性类似

除了valueAsNumber，还有valueAsDate属性，这个是用在date等与日期相关类型的输入框上的。

返回的是Date对象。

例如下面的实时渲染测试，点击按钮，可以看到返回值类型：

不是所有日期类型都支持

month, date, 以及 week这几个类型的时间选择输入框是支持valueAsDate的，但是datetime-local输入框类型并不支持，因为它表示本地时区中的日期和时间（挂钟时间），但date对象表示绝对时间点。然而，一些浏览器可能提供非标准实现。

例如，我Mac Chrome下测试，返回的就是 null，不支持识别。

<input id="datetime" type="datetime-local">
<button onclick="console.log(datetime.valueAsDate);">点击我</button>

但是，很有意思的，我输出datetime.valueAsNumber反而有值，返回的是当前的时间戳，例如下面的实时渲染测试（选择一个时间，然后点击按钮）：

还挺有意思的，我测试了tel类型，返回的是NaN，range类型可以，也就是支持min/max/step这种数值范围计算的输入框是支持valueAsNumber的。

三、结束语

我看了下这两个DOM属性的兼容性，Chrome 5就开始支持了，看来Web领域还有很多我不知道的细节知识，学无止境啊。

可以把相关知识点在《HTML并不简单》这本书中更新下，大家要多多支持这本书，这样才会有第二版。

好吧，就说这么多，又是学习成长的一天。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11700

（本篇完）