JavaScript中document.getElementById().value与innerHTML的区别

①、什么是HTML DOM Document对象？

每个载入浏览器的HTML文档都会成为Document对象。

Document对象使我们可以从脚本中对HTML页面的所有元素进行访问。

而Document对象是Window对象的一部分，可以通过window.document属性对其进行访问。

②、getElementById()与Document对象的关系？

getElementById()是Document对象的方法，该方法返回对拥有指定id的第一个对象的引用。使用document.getElementById()可以取到页面上一个有id的元素。

③、getElementById()方法中调取.value与.innerHTML的区别？

.value与.innerHTML的区别在于，这个id元素中的内容是如何表示出来的，如果是通过value表示出来的，我们则通过.value获取id元素中的内容，那如果id元素中没有value值要如何获取id元素中的内容呢？这个时候就用到我们的innerHTML了。

④、代码展示：

当一个元素有value属性的时候，其value才会有值。

 <input type="text" id="txt" value="Elsa"/>

这样一个元素，当你使用document.getElementById(“txt1”).value时，可以得到其value值，即"Elsa"这个字符串。

如果一个元素没有value值，那么使用document.getElementById().value时是取不到的。这是时我们的innerHTML就派上用场咯。
 

<p>将在<span id="mes"> 5 </span> 秒钟后返回首页！</p>

当我们使用document.getElementById(“mes”).innerHTML可以取到<span>与</span>之间的内容，即“5”。