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

港控/mmm° 2023-07-10 08:28 104阅读 0赞

# 前言 #

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

# 问题阐述 #

## HTML代码： ##

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

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

## 控制台输出： ##

界面上的内容：  
 ![在这里插入图片描述][20200301152616951.png]  
  控制台输出：  
![在这里插入图片描述][20200301152602311.png]  
  可见，此时通过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值，然后在控制台输出。

## 控制台输出： ##

![在这里插入图片描述][20200301153540920.png]

[20200301152616951.png]: https://img-blog.csdnimg.cn/20200301152616951.png
[20200301152602311.png]: https://img-blog.csdnimg.cn/20200301152602311.png
[20200301153540920.png]: https://img-blog.csdnimg.cn/20200301153540920.png