document.getElementById().value无法获取元素值解决办法

当通过JavaScript原生的document.getElementById("id").value获取HTML元素中的值时得到的却是undefined，为什么会这样呢？比如下方的实例：

<p id='e1'>笨鸟工具，x1y1z1.com！</p>

<script>
  var str = document.getElementById("e1").value;
  alert(str)
</script>

试一试

document.getElementById()获取元素值的解决办法

如上面的实例中，通过运行的结果会发现，“获取”到的段落p中的值是undefined，为什么呢，据鄙人的开发经验，.value一般应用在获取表单的值当中。不过在介绍.value的用法之前，先来解决获取HTML一般元素值的办法，其实很简单，可以将value改成innerHTML即可，如下实例：

<p id='e2'>笨鸟工具，www.x1y1z1.com！</p>

<script>
  var str = document.getElementById("e2").innerHTML;
  alert(str)
</script>

试一试

代码解析

如上代码，当innerHTML后面跟着一个赋值运算符“=”的时候，是用“=”右侧的值对通过getElementById()所选择的HTML元素中的内容进行替换或者填充，当没有赋值运算符时，便可用来获取HTML元素的值。可是用.value时，JS也并没有不运行，只是获取到的值是undefined，由此可知，.value的语法是存在的，那么.value该怎么应用呢？

---

.value的使用方法

.value的语法一般是用在获取表单中的值，比如input标签内的输入值，实例代码如下：

<input id='e3' type='text'><br><br>
<button class='btn btn-default' onclick='getValue()'>获取输入值</button>
<script>
  function getValue(){
    var str = document.getElementById("e3").value;
    alert(str)
  }
</script>

试一试