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

荔枝味的猫

1.什么是HTML DOM Document对象？
每个载入浏览器的HTML文档都会成为Document对象。
Document对象使我们可以从脚本中对HTML页面的所有元素进行访问。
而Document对象是Window对象的一部分，可以通过window.document属性对其进行访问。

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

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

4.代码展示：
当一个元素有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"。