前言

  我们可以通过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>

<form name="form1" id="f1" action="" method="POST">

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

function fungetValue() {
    console.log(document.getElementById('f1').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值，然后在控制台输出。