前言

昨天朋友提了这样一个问题：他的代码中的输入框里的数值在谷歌浏览器显示正常，在mac上的浏览器上显示不出来，但是控制台能够打印出输入框的值。

猜测

因为它在普通的浏览器上显示是正常的，所以我给出了以下两个猜测：

1. 样式的兼容性问题，样式原因把数值给遮盖掉了

2. 代码在某一时机，数值丢了，所以不显示(应该是小概率)

打开控制台对比查看输入框是否有值，结果神奇的一幕发生了：在页面上看到输入框有值，但是控制台上得dom节点也没有显示出值。

以elementUI为例：

我们可以看到此时输入框里是没有值的，所以节点中没有值，我们也不奇怪，我们给输入框添加123时结果如下：

奇怪了，我明明给输入框添加了值，但是节点中依旧是没有值显示。

答案：标签类型导致节点值在控制台的展示不同。

单标签和双标签：

我们常见的双标签有：div p span

我们看下在控制台的展示效果：

单标签有以下标签：

<br>
 <hr>
 <area>
<base>
 <img>
<input>
 <link>
<meta>
<basefont>
<param>
 <col>
<frame>
<embed>
<keygen>
<source>

但是这些单标签部分是不包含value的

单标签只有input包含value，双标签一般取值是根据innertext进行取值，而我们的input只能通过input进行取值

这样是不是就看到了，我们在控制台的属性栏就可以查看对应的节点值。

如果是其他的标签，我们也可以通过innertext查看其中的值：

好了，下次遇见了这样的问题，你就不迷惑了吧