input元素的value属性与setAttribute()方法

先写一个带有value属性的input元素

<input id="myinput" type="text" value="小明">

我们先打印一下它：

	let myInput =  document.getElementById("myinput");
	console.log(myInput);

看看结果

输入框里面文本就是value的值小明
现在我们去掉它的value属性，用javascript为他添加value：

	<input id="myinput" type="text">

	let myInput = document.getElementById("myinput");
	myInput.value = "小明";
	console.log(myInput);

再瞅一眼：

输入框里面的文本是小明，但是实际的input元素却没有value属性。看来，它仅仅是更改了输入框里面的文本而已。
我们试试用getAttribute()方法能不能获取到它的内容：

	let myInput = document.getElementById("myinput");
	myInput.value = "小明";
	console.log(myInput);
	console.log(myInput.getAttribute("value"));

看结果

getAttribute()方法得到的是null，因为这个元素根本就没有value这个属性。
如果我们用setAttribute()方法呢，一起来看看吧：

	let myInput = document.getElementById("myinput");
	myInput.setAttribute("value", "小明");
	console.log(myInput);
	console.log(myInput.getAttribute("value"));

第四次回眸：

文本框的内容添加了，并且为元素新增了value属性。getAttribute()方法自然就能获取到了。是不是若有所思……

我们继续整点花里胡哨的：

	let myInput = document.getElementById("myinput");
	myInput.value = "小明";
	myInput.setAttribute("value", "老王");
	console.log(myInput);
	console.log(myInput.getAttribute("value"));

再回首：

是不是发现了什么。
直接用.value赋值，只能修改输入框里面显示的文本，对元素本身没有任何效果。如果用setAttribute()方法赋值，不仅会修改文本框中显示的文本，还会为元素（对象）的value属性赋值，如果没有value属性，就创建value属性并赋值。
当两者同时使用的时候，.value赋值的优先级高于setAttribute()方法，但是setAttribute()方法会做.value没做的事，那就是为元素的value属性赋值。
同时也能说明，getAttribute()方法是从元素本身的属性中去获取，而非其他。

本文地址：https://blog.csdn.net/weixin_46618182/article/details/107372528