innerHTML获取页面上的元素，包括获取元素的value值

前言

  我们可以通过innerHTML获取界面上的元素，但是有些元素，比如说：input中的value值我们却获取不到，但是在做OA时，有需求需要将自定义的表单转成HTML存入数据库，这个时候应该怎么做呢？

问题阐述

HTML代码：

<form name="form1" id="f1" action="" method="POST">
	内容:<input name="mycontent" id="mycontentid" type="text" value="" />
	<input type="button" name="getvalue" id="cli" value="获取input值" onclick="fungetValue()" />
</form>

通过innerHTML获取界面上的元素：

function fungetValue() {
	console.log(document.getElementById('f1').innerHTML);
}

控制台输出：

  界面上的内容：
 
  控制台输出：

  可见，此时通过innerHTML获取界面上的元素并没有获取到input元素的value值。

解决方案

自定义属性

function fungetValue() {
	var elems = document.getElementsByTagName('input')
	for (var i = 0; i < elems.length; i++) {
		elems[i].setAttribute("value", elems[i].value);
	}
	console.log(document.getElementById('f1').innerHTML);
}

  原理：我们获取到页面上所有的input元素，通过循环给每个元素添加一个自定义的属性input，属性值是input的value值，然后在控制台输出。

控制台输出：